云开发官方文档: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

初始环境配置

  1. 注册小程序
  2. 下载开发者工具
  3. 拿到AppID
  4. 新建项目(云开发)
  5. 删除已有项目 和 配置新的项目
  6. 运行一个Hello程序
  7. 采用更合理的方法生成空白项目

注册微信小程序https://mp.weixin.qq.com/wxopen/waregister?action=step1

注册页面

下载开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

获取AppID

1、网页登陆小程序后台,点击查看详情

后台登录界面

2、在账号信息中可以看到我们的Appid

Appid

3、安装wechat-devtools,打开程序,新建项目,将Appid填入wx2727bcf126ae0568到下方的面板并选择小程序·云开发

新建项目

新建项目如下:

初始项目

项目结构说明:

  • cloudfunction 是云函数部分,云函数即是放在云端的函数。
    • 云函数目录下有很多文件夹,可以右击在终端打开,然后执行npm install初始化云函数,之后再右击,选择上传并部署,将本地的函数传送到云端,此时即使把本地函数目录删除,也可以在代码中调用云函数。
    • 云函数的修改可以使用增量更新的方式推送到云端
  • miniprograme 是页面部分,用于生成小程序的页面
  • project.config.json 小程序的配置文件,这里说明开头的两个配置
    • cloudfunctionRoot: 定义了云函数的路径,默认是cloudfunctions/,可以自定义
    • miniprogramRoot: 定义了云函数的路径,默认是miniprogram/,可以自定义
  • README.md: 初始化小程序的说明文件

初始化项目环境

点击miniprogame/app.js,查看env,默认是注释掉的

初始化环境

获得环境ID:点击云开发,第一次需要注册,进入后点击设置,可以看到环境ID,然后把'my-env-id'替换成这里的环境ID,如下:

获取本地页面环境ID

1
2
3
4
5
6
7
8
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: 'wxac-bffcs',
traceUser: true,
})
}

ps: wx.cloud.init 用于初始化本地页面的环境,是本地向云端发送请求的环境,云端函数中还有cloud.init这个初始化,是初始化云端函数调用其他API的环境

1
2
3
4
5
// path : cloudfunctions/login/index.js
cloud.init({
// API 调用都保持和云函数当前所在环境一致
env: cloud.DYNAMIC_CURRENT_ENV
})

Hello Miniprogram

创建新项目的时候会生成一个云开发的小demo,我们如果不需要,可以直接全删掉,然后把cloudfunction改名为cfun,把miniprogram改名为pages,(原来的app.js,app.json,app.wxml,sitemap等可以不用删,这里是删了又重新写的)

ps:注意,后面有更简洁的方式,这里不要尝试

删除原有项目

现在我们新建自己的项目:

  • 右击pages,新建文件夹,命名为index

  • 在index的同级目录下新建一个app.json,然后输入以下内容(注意,如果没有这一步,下面新建Page会没有反应):

    1
    2
    3
    4
    5
    {
    "pages": [
    "index/index"
    ]
    }
  • 右击index,新建Page,命名为app,该操作会生成app.js,app.json,app.wxml,app.wxss四个文件

  • 这时候如果没有project.config.json这个文件,可以将开发工具关闭再打开

效果如下:

新建自己的项目

然后点击project.config.json,添加cloudfunctionRootminiprogramRoot

配置projectconfig

这时候,我们的小程序就会显示pages/index/app.wxml里的内容了

Hello程序

css样式写了app.wxss中

1
2
3
4
5
6
text {
display: flex;
justify-content: center;
font-size: 25px;
color: slategrey;
}

更加合理的方法生成新项目

写完上面的内容后,想如果每次都这么生成项目实在太过于繁琐,于是看看还有什么其他的方式可以生成空白项,在这找到了合理的方法

https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d

新建一个项目(不使用云函数)

新建不使用云函数的项目

配置App.js

配置appjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
env: 'wxac-bffcs',
traceUser: true,
})
}
this.globalData = {}
}
}
)

配置project.config.json,让应用获得云开发的能力

项目配置

这样就可以了配置一个简单的空白项目了,最后再给一张小程序组织的结构图:

小程序框架图