微信小程序动态生成页面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=thiswx.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文件把图片显示出来
<image class="img" src="{{showimg}}" ></image>
这样就可以啦，你如果详情页需要显示其他的属性，那继续加就可以了，方法都是相似的，然后前提是你数据库要有这个属性。

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

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

微信小程序动态生成页面2020-04-13相关推荐

[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
微信小程序动态修改页面标题title
背景有这样一个需求,想动态修改微信小程序页面顶部的标题,应该如何操作呢? 做法一.首先看看静态修改微信小程序页面顶部的标题的做法. 通过修改页面json文件即可修改页面标题 {"navi ...
微信小程序动态生成二维码
效果图如下: 实现 wxml  <view class='container'><image bindtap="previewI ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序Excel生成下载浏览分享
微信小程序Excel生成下载浏览分享完整流程遇到的小问题完整流程主要是为了实现小程序前端从后端下载excel文件并浏览和分享excel文件给其他用户主要实现步骤:通过后端返回的字节流 : w ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...

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

微信小程序动态生成页面2020-04-13相关推荐

最新文章

热门文章