导语
今天是“世界读书日”,传承知识,手有余香~本文教你用小程序·云开发轻松制作二手书交易商城小程序,让智慧延续,让温暖传递。
在上次的文章中我们介绍了二手书交易商城小程序的登录注册页、发布信息页与首页的开发流程,接下来我们就来了解详情页面、启动页是如何实现的。
(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 的相关内容,到时候再回过头来看这些内容可能会豁然开朗。