微信小程序开发
小程序开发
浏览：1285 次
这里给出的一个例子是商场的几个示例页面。首先，张贴几页。
主页
分类
购物车
我的
产品列表
产品详细信息页面
本示例是根据官方文件和编制过程中的参考完成的。如果您有疑问，可以查看官方文件：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 。
首先，打开微信开发者工具创建我们的项目。
创建项目后，项目结构如下：（此处进行了一些调整，并添加了一些新文件夹来存储相应的文件）
项目结构
如果需要修改小程序的标题和背景色，可以打开app Json文件。navigationBarTitleText对应于标题，navigation BarTextStyle对应于标题颜色，而navigatingBarBackgroundColor对应于标题背景颜色。
接下来，我将简单地谈谈上面实现的页面中使用的一些小程序的知识。
微调器组件用于主页的旋转图。相应代码如下：
旋转木马组件
请求数据时使用Wx请求的api：
wx.请求({
网址：“”，
数据：｛｝，
方法：“POST”，
标题：｛“Content-Type”：“application/json”｝，
成功：函数（res）{
控制台.log（res）
那个数据=res.data.data；
that.setData（设置数据）({
数据：that.data，
颜色：！数据颜色
});
},
失败：函数（res）{
控制台日志（res.data.errmsg）；
}
})
产品列表页面旨在解决下拉刷新的问题。这里，使用小程序中的onReachBottom。我们可以在这个函数中写下下拉刷新请求。
产品详细信息页面涉及添加或减去数量的问题。在这里，编写以下两个函数进行操作：
减号：函数（）{
var num=此数据编号；
如果（num>1）{
编号--；
}其他{
num=1；
}
this.set数据({
编号：num
})
},
加：函数（）{
var num=此数据编号；
num++；
this.set数据({
编号：num
})
}
最后一个是关于分享。小程序提供了这样一个onShareAppMessage方法，其用法如下：onShareApp消息：function（）{
返回{
标题：'产品详情页'，
路径：“/page/detail/detail？goods_ id＝1’，
成功：函数（res）{
//转发成功
},
失败：函数（res）{
//转发失败
}
}
}
在上面的代码中，您可以编辑分析标题、分析路径以及方法成功或失败时的提示/操作。
以上是完成这些页面所涉及的知识的简要记录。如果您需要了解更多信息，可以转到简单的小程序教程学习：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201818 。
