这边给的一个例子是商城的几个示例页面，首先贴出做出来的几个页面。
首页
分类
购物车
我的
商品列表
商品详情页
该示例的完成是根据官方文档，在编写过程中参考完成的。有疑问可以查看官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/。
首先的话打开微信开发者工具创建我们的项目。
创建好项目后的项目结构如下：（这里做了些调整，也添加了一些新的文件夹用来存放对应的文件）
项目结构
如果有需要修改小程序的标题，背景色等，可以打开app.json文件里进行修改，navigationBarTitleText对应的是标题，navigationBarTextStyle对应的是标题颜色，navigationBarBackgroundColor对应的是标题背景颜色。
接下来的话就对上述几个实现了的页面所用到的一些小程序里的知识简单的说下。
首页的轮播图，是用到了swiper这个组件。对应代码如下：
轮播图组件
这里请求数据时采用的是 wx.request 这个api：
wx.request({
url: "",
data: {},
method:'POST',
header: { 'Content-Type': 'application/json' },
success: function (res) {
console.log(res)
that.data = res.data.data;
that.setData({
data: that.data,
color: !that.data.color
});
},
fail: function (res) {
console.log(res.data.errmsg);
}
})
商品列表页设计到了一个下拉刷新的问题，这里则采用到了小程序里的onReachBottom。我们可以在这一个函数里写下下拉刷新的请求。
商品详情页的话涉及到了一个加减数量的问题，这里写了以下两个函数进行操作：
minus: function () {
var num = this.data.num;
if (num > 1) {
num--;
}else{
num = 1;
}
this.setData({
num: num
})
},
plus: function() {
var num = this.data.num;
num++ ;
this.setData({
num: num
})
}
最后还有一个是关于分享的，小程序提供了这样一个onShareAppMessage方法，使用如下：onShareAppMessage: function () {
return {
title: '商品详情页',
path: '/page/detail/detail?goods_id=1',
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
}
上述代码中，可以在方法里编辑分析的标题，分析的路径，以及成功与失败时进行的提示/操作等。
以上是我完成这次几个页面所涉及到的一些知识做下简单的记录，说明。如果需要了解更多的话可以到小程序简易教程上了解：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201818。
网友评论