云开发官方文档： 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，添加cloudfunctionRoot和miniprogramRoot

配置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，让应用获得云开发的能力

项目配置

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

小程序框架图