微信小程序动态生成页面2020-04-13

微信小程序动态生成页面

我最近自己在做小程序参加竞赛，然后记录下自己的心得，希望对在座的各位有点帮助吧。然后我的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文件把图片显示出来

这样就可以啦，你如果详情页需要显示其他的属性，那继续加就可以了，方法都是相似的，然后前提是你数据库要有这个属性。

总结的话：刚自学小程序一个月，写下心得，一是帮助自己加深记忆，二是帮助需要帮助的人，有些地方可能理解不到位，或者可能有错误，希望不吝指正，谢谢。另：转载请注明出处，谢谢。

写了很长时间，觉得有收获加个关注或者打赏下呗，
持续更新更多优质代码相关学习心得。谢谢。