用小程序·云开发轻松构建二手书商城小程序（下）丨实战
导语
今天是“世界读书日”，传承知识，手有余香~本文教你用小程序·云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。
在上次的文章中我们介绍了二手书交易商城小程序的登录注册页、发布信息页与首页的开发流程，接下来我们就来了解详情页面、启动页是如何实现的。
四、详情页面
（1）小程序布局只要掌握一个 flex，基本上就够了，所以这里不过多阐述样式问题，到时候如果有疑问查看 demo 都有注释的。
（2）因为此小程序的使用对象及功用限制，所以和完整的商城相比少了一个购物车功能，所以支付购买在商品详情页即完成了，这里涉及到两个点，一是下单购买，二十购买之后通知问题。
小程序内支付：
不仅仅是支付包括提现，此程序都使用的 tenpay 这个模块，详细官网：
https://www.npmjs.com/package/tenpay
小程序中的实例使用，可以参考之前公众号的历史文章：
当然，之前文章是教大家如何实现支付，关于提现流程也一样，在此程序的 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 的相关内容，到时候再回过头来看这些内容可能会豁然开朗。