微信小程序动态生成页面
我最近自己在做小程序参加竞赛,然后记录下自己的心得,希望对在座的各位有点帮助吧。然后我的Q:2991194667,有问题可以一起探讨。
1.首先是我打算做一个瀑布流的布局,像淘宝那样,那么就要先从云端数据库获得图片。
onLoad(a) {
let that = this;
wx.cloud.database().collection('shicai').where({ bianhao:wx.cloud.database().command.lt(58).and(wx.cloud.database().command.gt(50))
}).get({})},
**collection后面是你要请求的数据库名,我这里是请求云数据库shicai中属性为bianhao的,然后编号位于50和58之间的,把编号对应的图片数据加载到数组中。如果你嫌弃代码复杂,可以const一个简单的量代替:wx.cloud.database()**
2.然后你需要有详情页,就是用户点击某张图,要有一个链接,他会跳转到具体的页面,比如淘宝买东西,点下图片就跳到另一个页面,这些页面都是动态生成的,不是写死的。点击链接的时候会把参数传递过去,让数据库知道你点的那张图片,他才好动态加载对应的图片的具体界面。
所以要在瀑布流展示的xml文件的前端写这句话:把num参数传过去。
<navigator url="/pages/detail/detail?num={{item.num}}" class="imgList" wx:for="{{dataList}}" wx:key="{{index}}">
3.拿到num,要去数据库找这张图。
onLoad: function(options) {
console.log(options.num)
var that=this
wx.cloud.database().collection('shicai').where({
num:options.num
})
4.在data初始化一个变量,就比如说,详情页是展示图片
data: {
showimg:null,
},
然后在detail.js拿到num的值后,写.get的回调函数
({
success(res) {
console.log(res)
that.setData({
showimg: res.data[0].fileIDs,
})
},
fail(res) {
console.log("请求失败", res)
}
})
请求成功那么就把fileIDs(图片的云端ID)给showimg
5.在detail.xml文件把图片显示出来
这样就可以啦,你如果详情页需要显示其他的属性,那继续加就可以了,方法都是相似的,然后前提是你数据库要有这个属性。
总结的话:刚自学小程序一个月,写下心得,一是帮助自己加深记忆,二是帮助需要帮助的人,有些地方可能理解不到位,或者可能有错误,希望不吝指正,谢谢。另:转载请注明出处,谢谢。
写了很长时间,觉得有收获加个关注或者打赏下呗,
持续更新更多优质代码相关学习心得。谢谢。