微信小程序动态生成页面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文件把图片显示出来

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

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

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

你可能感兴趣的:(小程序,js)