微信小程序云服务搭建（前端）

lwang

1. 云开发环境
1.1 项目中配置云开发环境

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\c2f9f9fca8d542928070d3df836f152d\clipboard.png[/img]

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\c2f9f9fca8d542928070d3df836f152d\clipboard.png[/img]

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\c2f9f9fca8d542928070d3df836f152d\clipboard.png[/img]
1.2 创建云开发环境

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\016696484cb94cafa085371c0c5c1668\clipboard.png[/img]
1.3 云开发环境名称

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\f16e7ae75c6e47fa8542579175ffd499\clipboard.png[/img]
1.4 获取环境ID

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\8ef6b2b480f747ab9b1b669ac46b134a\clipboard.png[/img]
1.5 云开发环境设置

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\a42bdf009a6a44b1ae8e8eafb97f3fbb\clipboard.png[/img]
2. 云函数
2.1 创建云函数

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\f279e40c986549ed93e6da2e2c8aa106\clipboard.png[/img]
2.2 编写云函数

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\8bba3151aed94bec918bd13c7dbf15bf\clipboard.png[/img]
index.js 代码

1. // 云函数入口文件
   
2. const cloud = require('wx-server-sdk')
   
3. cloud.init({
   
4.   env: ""
   
5. })
   
6. 
   
7. // 云函数入口函数
   
8. exports.main = async (event, context) => {
   
9.   let bannerList = [
   
10.     {"src":"http://nudianli.com:9090/img/banner1@2x.png"},
    
11.     {"src":"http://nudianli.com:9090/img/banner2@2x.png"},
    
12.     {"src":"http://nudianli.com:9090/img/banner3@2x.png"},
    
13.     {"src":"http://nudianli.com:9090/img/banner4@2x.png"}
    
14.   ]
    
15.   return bannerList;
    
16. }

复制代码

2.3 上传并部署云函数

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\dfb1a391808648a2b73e692fc9a093fc\clipboard.png[/img]
2.4 检查云函数是否创建并部署

[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\a237d5dfc1d943f085d52d7b32e8e548\clipboard.png[/img]
[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\9c7181c5690748c6aec1f2dabfaa37ce\clipboard.png[/img]
2.5 开始调用云函数

1. <div yne-bulb-block="heading" yne-bulb-level="3" id="8965-1624844885014" style="line-height: 1.75;"><span style="font-size: 16px; font-weight: bold;">
   
2. </span></div><div yne-bulb-block="image" style="float: none;"><img alt="" data-media-type="image" src="C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\26721e55621c40c58ca65ab6619ebd27\clipboard.png" style="width: 620px;" data-attr-org-src-id="05C18417B64048FB9FA714F18A0FF085"></div><div yne-bulb-block="code" id="6570-1624844786615" data-theme="default" data-language="javascript">Page({
   
3.   data: {
   
4.     imgUrl:""
   
5.   },
   
6.   onLoad() {
   
7.       // 记录当前函数作用域的this
   
8.       var _this = this;
   
9.       // 调用小程序云函数
   
10.       wx.cloud.callFunction({
    
11.         name:"banner",
    
12.         success(res){
    
13.           console.log(res.result);//这是云函数返回的数据
    
14.           _this.setData({
    
15.             imgUrl:res.result[1].src
    
16.           })
    
17.         },
    
18.         fail(err){
    
19.           console.log(err);// 调用云函数失败的提示
    
20.         }
    
21.       })
    
22.   }
    
23. })
    
24. </div><div yne-bulb-block="paragraph" style="line-height: 1.75;"></div>

复制代码

3. 云数据库
3.1 创建数据表（集合）


[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\0fdc8993218449b081a2a8f470a078a5\clipboard.png[/img]
[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\6079fc984e324257a53d45c133a6f5bb\clipboard.png[/img]
3.2 数据表添加记录（数据，注意数据类型）


[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\9c55e588bd814a898a984c9a3c7d9a3f\clipboard.png[/img]
[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\1a3428491713478ab2a0dce4fcfe5d26\clipboard.png[/img]
3.3 请求数据库指定数据表


[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\c733f4c6221a4da6a21d549e1d903c5d\clipboard.png[/img]
[img=620,0]C:\Users\WYG\AppData\Local\YNote\data\1217245503@qq.com\02c6ef2287d0466fa7697fc98ff3da24\clipboard.png[/img]
demob.js

1. <div yne-bulb-block="code" id="6184-1624852634870" data-theme="default" data-language="javascript">Page({
   
2.   data:{
   
3.     imgArray:[]
   
4.   },
   
5.   onLoad(){
   
6.     let _this = this;
   
7.     // let DB = wx.cloud.database().collection("db_banner");
   
8.     // 请求云数据库的数据
   
9.     wx.cloud.database().collection("db_banner").get({
   
10.         success(res){
    
11.             // console.log("请求数据库的数据成功:",res)
    
12.             let arr = res.data[0].arr;
    
13.             // console.log(arr)
    
14.             _this.setData({
    
15.               imgArray: arr
    
16.             })
    
17.         },
    
18.         fail(err){
    
19.             console.log("请求数据库的数据失败",err)
    
20.         }
    
21.     })
    
22.   }
    
23. })
    
24. </div><div yne-bulb-block="paragraph" style="line-height: 1.75;"></div>

复制代码