社区/文章分享/用小程序·云开发轻松构建二手书商城小程序(下)丨实战

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

导语

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

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

四、详情页面

(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 的相关内容,到时候再回过头来看这些内容可能会豁然开朗。