商城软件开发-安卓商城开发

导语

传承知识，手有余香~本文教你用小程序·云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。

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

四、详情页面

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

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

小程序内支付：

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

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

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

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

发送通知：

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

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

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

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

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

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

（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"
}

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

 class="contain">
      class="go">
               bindtap="go">跳过{{count}}s 
     
      class="bg" src="{{bgurl}}">

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