微信小程序云开发(大致开发流程及轮播图渲染)

逆战不停歇,前端不停学。

尝试了用微信云端开发来实现轮播图的渲染,大致流程如下。

1.选用微信开发者工具创建项目,选择云开发模式微信小程序云开发(大致开发流程及轮播图渲染)_第1张图片
2.创建完成后,选择cloudfunctions文件夹下的login文件夹,右键点击创建并部署,由此来获取登陆用户的openID

微信小程序云开发(大致开发流程及轮播图渲染)_第2张图片
3.用户ID获取完毕后,点击上方的云开发控制台,进入云开发控制台。微信小程序云开发(大致开发流程及轮播图渲染)_第3张图片
4.找到云开发控制台设置选项当中的环境ID,这是与前端操作关联的关键点。
微信小程序云开发(大致开发流程及轮播图渲染)_第4张图片
5.在app.js里调用wx.cloud.init()函数,所传参数env为刚才在云开发后台找到的环境ID微信小程序云开发(大致开发流程及轮播图渲染)_第5张图片
6.为了便于在云开发中设置接口,我选择在rap2
中创建假接口的数据,生成接口后复制到云开发控制台使用微信小程序云开发(大致开发流程及轮播图渲染)_第6张图片
7.创建好自己的所需数据后,打开链接查看json数据微信小程序云开发(大致开发流程及轮播图渲染)_第7张图片
8.此处为我所快速创建的轮播图json数据,复制粘贴到一个新建的json文件里微信小程序云开发(大致开发流程及轮播图渲染)_第8张图片
9.设置好了json文件备用微信小程序云开发(大致开发流程及轮播图渲染)_第9张图片
10.打开到云开发控制台,创建你所需要的数据集合(Banner),点击导入,导入刚才设置的json文件,生成后台的banner接口微信小程序云开发(大致开发流程及轮播图渲染)_第10张图片
11.接口生成效果如图微信小程序云开发(大致开发流程及轮播图渲染)_第11张图片
12.注意此处需将仅创建者可读写模式切换成所有用户可读,仅创建者可读写,否则在请求时会拿不到数据。微信小程序云开发(大致开发流程及轮播图渲染)_第12张图片
13.如图我在home.js中连接数据库并选择我所需要的banner集合,并在生命周期函数中发起请求,拿到我所需要的轮播图数据微信小程序云开发(大致开发流程及轮播图渲染)_第13张图片
14.注意此处需选择不校验域名,否则会出现跨域问题。微信小程序云开发(大致开发流程及轮播图渲染)_第14张图片
15.在home.wxml中使用swiper组件进行渲染微信小程序云开发(大致开发流程及轮播图渲染)_第15张图片
16.最后效果如图
微信小程序云开发(大致开发流程及轮播图渲染)_第16张图片

你可能感兴趣的:(微信小程序云开发(大致开发流程及轮播图渲染))