专栏首页云开发用小程序·云开发轻松构建二手书商城小程序(下)丨实战

用小程序·云开发轻松构建二手书商城小程序(下)丨实战

导语

今天是“世界读书日”,传承知识,手有余香~本文教你用小程序·云开发轻松制作二手书交易商城小程序,让智慧延续,让温暖传递。

上次的文章中我们介绍了二手书交易商城小程序的登录注册页、发布信息页与首页的开发流程,接下来我们就来了解详情页面、启动页是如何实现的。

四、详情页面

(1)小程序布局只要掌握一个flex,基本上就够了,所以这里不过多阐述样式问题,到时候如果有疑问查看demo都有注释的。

(2)因为此小程序的使用对象及功用限制,所以和完整的商城相比少了一个购物车功能,所以支付购买在商品详情页即完成了,这里涉及到两个点,一是下单购买,二十购买之后通知问题。

小程序内支付:

不仅仅是支付包括提现,此程序都使用的tenpay这个模块,详细官网:

https://www.npmjs.com/package/tenpay

小程序中的实例使用,可以参考之前公众号的历史文章:

10行代码实现小程序支付功能!丨实战

当然,之前文章是教大家如何实现支付,关于提现流程也一样,在此程序的demo中都有完整的注释,读一遍代码都能看懂的,这里就不过多阐述了。

发送通知:

此程序通知分为两类:短信通知、邮件通知。

使用场景:用户下单后,对卖家进行短信+邮件通知,下单后订单状态改变使用邮件通知。

说一点题外话:小程序有一个自带的模板通知,在用户主动触发后7天内能推送模板信息,之前写这个程序的时候慎重考虑过,最后还是舍弃了,毕竟七天时间,不是每本书都那么畅销的。

邮件只需要有一个账户即可,短信通知却是要成本的,当然效果要比邮件好,配置起来的话,难度都一样,我们就以短信为例:

首先去腾讯云申请短信API:

https://cloud.tencent.com/product/sms

按照提示操作,设置好短信签名,模板等。

(1)配置云函数

新建sms云函数,代码如下:

const cloud = require('wx-server-sdk')
    const QcloudSms = require("qcloudsms_js")
    const envid = 'zf-shcud'; //云开发环境id
    const appid = 140000001 // 替换成您申请的云短信 AppID 以及 AppKey
    const appkey = "abcdefghijkl123445"
    const templateId = 1234 // 替换成您所申请模板 ID
    const smsSign = "腾讯云" // 替换成您所申请的签名
    cloud.init({
      env: envid,
    })
    // 云函数入口函数
    exports.main = async (event, context) => new Promise((resolve, reject) => {    
      /*单发短信示例为完整示例,更多功能请直接替换以下代码*/
      var qcloudsms = QcloudSms(appid, appkey);
      var ssender = qcloudsms.SmsSingleSender();
      var params = ["测试内容"];
      // 获取发送短信的手机号码
      var mobile = event.mobile
      // 获取手机号国家/地区码
      var nationcode = event.nationcode
      ssender.sendWithParam(nationcode, mobile, templateId, params, smsSign, "", "", (err, res, resData) => {
          /*设置请求回调处理, 这里只是演示,您需要自定义相应处理逻辑*/
          if (err) {
            console.log("err: ", err);
            reject({ err })
          } else {
            resolve({ res: res.req, resData })
          }
        }
      );
    })

小提示:在有多个云环境时候,如果涉及到查询云数据库等和云环境有直接干系的操作时候,最好在cloud.init({env: envid})这里声明一下环境,否则有几率报错。

五、启动页设计

启动页也算本程序一个亮点,首次进入就是一张美美的图给人一种身心愉悦之感,下面我们就详细说说这个怎么做:

问:该设计的核心是什么?

答:全屏背景图+倒计时跳转

首先,我们需要配置一下页面参数实现全屏显示,即在此页面的.json中这么配置:

{
  "navigationStyle":"custom"
}

这就成功实现全屏了,接着我们来编写页面样式:

<view class="contain">
     <view class="go">
             <button  bindtap="go">跳过{{count}}s</button> 
     </view>
     <image class="bg" src="{{bgurl}}"></image>
</view>
.contain {
      width: 100%;
      height: 100%;
      position: relative;
}
.bg {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      width: 100%;
      height: 100%;
      z-index: -1;
}
.go {
      position: absolute;
      right: 30rpx;
      top: 150rpx;  
      z-index: 9;
}
.go button {
      font-size: 28rpx;
      letter-spacing: 4rpx;
      border-radius: 30rpx;
      color: #000;
      background: rgba(255, 255, 255, 0.781);
       display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 160rpx;
      height: 60rpx;
}

样式快速搞定,再来说说js部分。

倒计时功能:

countDown: function() {
            let that = this;
            let total = 3;//倒计时总数3秒
            this.interval = setInterval(function() {
                  total > 0 && (total--, that.setData({
                        count: total
                  })), 0 === total && (that.setData({
                        count: total
                  }), wx.switchTab({
                        url: "/pages/index/index"
                  }), clearInterval(that.interval));
            }, 1e3);
      },

背景图:

1、实现有两种办法,第一是本地路径,第二是引用远程地址(可通过接口动态改变)。

2、第一种好处是直接使用本地图片,加载速度快,第二种可以随时更换启动图,两种办法都试过了,最终我建议还是采用第一种办法,使用本地图片。如果使用远程地址,首次进入会出现短时间白屏,体验不好,当然,你也可以想办法把图片压缩再压缩,那就不存在加载慢了,但分辨率又成了个问题,所以具体如何使用,还是根据产品需求来确定。

六、总结

纸上得来终觉浅,以上总结的是开发此程序中我认为遇到的典型问题,实践过程中肯定会有更多有意思的问题的出现,“面向搜索”编程是一个方面,但我更建议“面向官方文档”,很多问题其实都可以在官方文档中找到答案,如果阅读文档颇感费力,我建议你该静下心来,先熟悉下 html-css-javascript 的相关内容,到时候再回过头来看这些内容可能会豁然开朗。

本文分享自微信公众号 - 腾讯云云开发(tcb2tcb),作者:许坏

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 1500+人参与的云开发0基础训练营又来啦!

    前三期中,我们通过干货满满的课程、细致及时的答疑吸引了1500+人学习小程序·云开发,并帮助一大批朋友真正从0基础的编程小白进阶为能够在小程序上实现idea的实...

    腾讯云开发TCB
  • 攻略丨CloudBase Toolkit 云函数调试

    Tencent CloudBase Toolkit 插件 0.2.0 版起支持云函数本地调试和云端调试两种调试模式。

    腾讯云开发TCB
  • 【必收】精心整理!小程序开发资源汇总(附带源码)

    很多小伙伴想在春节放假期间学小程序,但是小程序学习的资源和教程可能不太好找。所以小助手精心整理了一期,全是干货!认真学,开启美妙的小程序开发之旅,做一个属于自己...

    腾讯云开发TCB
  • C++之const成员函数

    由于const函数的隐藏参数this指针变成了const 类名*this,所以const函数不能修改类的数据成员的值,但可以使用类的数据成员。

    zy010101
  • 找x

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • HTML识别后台传输或者js变量中字符串里的 '\n' 并成功换行显示

    小小咸鱼YwY
  • MYSQL SELECT 是多彩的, 业务如何应用适应不同场景

    看过不少文字, 实际上基本上很少看到select 语句被研究的, select 不就是select 出数据这么简单, NO NO NO .

    AustinDatabases
  • ES6中let、const和var的区别

    let 的用法类似于 var,但所声明的变量只在 let 命令所在的代码块内有效(一个“{}”相当于一个代码块)

    Leophen
  • 华院CEO唐岳岚:数论致远 精行未来--华院助力运营商大数据运营实践

    <数据猿导读> 华院分析(上海)CEO唐岳岚在2016年中国信息通信大数据大会发表了以“数论致远 精行未来--华院助力运营商大数据运营实践”为主题的演讲。 ? ...

    数据猿
  • 换位思考--做一个让人放心的人

    让人放心才能受人信任,也就是说让别人觉得你是靠谱的,那么你的朋友也会真心与你结交,你的事业与生活都会一帆风顺。但其实很多人都不知道如何做一个让人放心的人,这几天...

    叫我龙总

扫码关注云+社区

领取腾讯云代金券