小程序云开发如何配置(傻瓜式教程)

298 阅读4分钟

快速配置小程序云开发

1. 下载微信开发者工具。


2. 创建项目,配置基本项。

  1. 填写项目名称,路径,然后注册 AppID。由于云开发是要有指定账户才能为您分配云服务资源,所以必须要有用户的唯一标识。
在这里插入图片描述
在这里插入图片描述


  1. 注册 appid 需要先有小程序号,可以通过邮箱去注册。
  2. 接着跳转到小程序发布流程。在这里填写项目的相关信息。可以先随便填写,等项目要发布时再去修改信息。(小程序名字只能改两次)
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


  1. 填写完后获取提交,在项目信息下的账号信息下复制 appid。
    在这里插入图片描述
    在这里插入图片描述


  1. 在原先的配置项目上填入 appid,并选上不使用云服务。 不使用云服务!!! 因为,使用云服务会自动为您配套整套服务环境,不利于查看。
在这里插入图片描述
在这里插入图片描述


  1. 创建好项目后开始配置云服务。首先在 project.config.json 中添加一行代码:

"cloudfunctionRoot" : "cloud",

一定要在后面添加逗号。 添加完代码后创建 cloud 文件,并点击编译,让程序刷新运行。这是就生成了云开发的系统文件。

  1. 接着点击云开发,此处是管理你的云环境。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


  1. 在云环境的设置中获取环境 ID,复制下来。
  2. 在 app.js 文件中添加代码:

wx.cloud.init({
env:"环境id"
})

至此,云开发环境配置完毕。

在这里插入图片描述
在这里插入图片描述

11
11




可能有些小白现在还模模糊糊,这怎么就能云开发了呢?现在就教大家使用些简单的操作。

1. 使用云数据库

  1. 先点击云开发,在点击数据库,创建一个表,这里假设添加的表的表名为 list。
在这里插入图片描述
在这里插入图片描述


  1. 在要用到的js文件中写入如下代码:
 1// 获取数据库的连接
 2const db = wx.cloud.database()
 3
 4page({
 5    /** 
 6    * 添加数据
 7    **/
 8  addData(){
 9      db.collection('list').add({
10         // data 字段表示需新增的 JSON 数据
11         data: {
12            name : "manman",
13            age : 18
14          },
15          // 成功的回调函数
16          successfunction(res) {
17            console.log(res)
18          }
19      })
20  },
21
22    /** 
23    * 查找数据
24    **/
25  getData(){
26    db.collection('list').where({
27        // 查询值
28        name : "manman"
29    }).get({
30        // 获取成功的回调函数
31          successfunction(res) {
32              console.log(res)
33         }
34    })
35  }
36})


2. 使用云函数开发(个人认为此技术还不太成熟,有很多的 bug)

  1. 在 cloud 下右键新建 node.js 云函数,就能生成云函数了。接着就能在这个文件里写 js 代码。
在这里插入图片描述
在这里插入图片描述


  1. 云函数的入口函数
1// 此处为 云函数的入口函数,在这里面写代码,并通过返回值从云上传输下来
2exports.main = async (event, context) => {
3  let a = event.a;
4  let b = event.b;
5  return a+b;
6}


  1. 云函数的调用
 1  qiuhe(){
 2    // 调用云函数
 3    wx.cloud.callFunction({
 4      // 函数名
 5      name:"add",
 6      // 传进的参数
 7      data:{
 8        a:1,
 9        b:1
10      },
11      success(res){
12        console.log("请求成功", res)
13      },fail(res){
14        console.log("请求失败",res)
15      }
16    })
17  }


感兴趣的朋友可以关注下公众号《慢慢编程》,慢慢在这里磕头了!