微信小程序之云开发初体验-一一网

这是我参与更文挑战的第4天，活动详情查看：更文挑战

1. 前言

若想免费、快速的开发出一个完整的项目, 用小程序的云开发可能是最好的选择.
云开发大大降低了开发成本、特别是对于前端开发同学来说、不需要后端/运维等知识, 即可实现从前端到后端的一系列开发全流程, 适合小型应用开发。

2. 基础知识

创建云开发小程序的2种方式:

新建个带有云开发的小程序;
在现有项目中引入云开发能力;

A. 新建个带有云开发的小程序
新建项目、勾选小程序云开发, 点击新建算是创建成功.

创建成功后, 我们会得到如下图所示的文件目录:

目录结构说明:

cloudfunction为存放云函数的根目录, 云函数你可以理解为接口;
miniprogram为小程序页面的根目录;

文件夹路径&名称都不是一成不变的, 可选择修改这些文件夹的名称&路径 -> project.config.json的如下配置项

// 建议放小程序页面的文件夹跟放云函数的文件夹处于平级关系且都在项目根目录下, 便于管理.
{
    "miniprogramRoot": "miniprogram/",
    "cloudfunctionRoot": "cloudfunctions/"
}
复制代码

接下来主要演示下如何在现有项目中引入云开发能力.

2. 环境搭建

2.1 新建云函数根目录

在项目根目录下新建cloudfunctions文件夹、用来放置云函数.

2.2 开通云开发服务

A. 找到微信开发者工具上的’云开发’图标、点击.

B. 点击后会出现弹窗, 按照指引选择后点击’开通’。
这里需要输入环境名称、以及选择配额类型(基础配额是免费的、普通开发者足够使用)

C. 点击后会初始化环境, 初始化完成后会出现如下弹窗.

D. 点击确定后会自动弹出云开发控制台、如下图所示.

至此, 我们的云开发服务就已经开通了.

2.3 找到云开发的环境ID

打开云开发控制台 ->设置 -> 环境设置中, 找到环境名称和环境ID.

可在小程序源代码cloudfunctions文件夹中看到有个小云朵图标【云函数根目录】&&环境名称, 若未显示环境名称而是’未指定环境’, 可右键选择环境并确定.
能看到如下2个标识意味着是OK了的.

2.4 指定小程序的云开发环境

在app.js中输入如下代码,记得输入环境ID

  // 低版本库兼容 
  onLaunch() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: '此处请输入环境ID',
        traceUser: true,
      })
    }
  },
复制代码

3. 创建云函数(接口)

A. 在云函数根目录下右键-> 新建Node.js云函数

B.输入云函数名, 我们会得到如下内容:

需要留意的一个点是: 这里定义的云函数名就是你后面在做接口调用时使用的接口名称.
C. 编写云函数逻辑
这里以下面发送订阅消息-云调用作为演示

4. 发送订阅消息-云调用

这里演示下如何发送订阅消息[其实这里主要还是为了实现订阅消息的云调用, 对微信小程序订阅消息感兴趣的可戳此链接: juejin.cn/post/697282…]
测试页面主要代码如下:

// 测试的话, 记得先点击订阅、后点击戳我下发订阅消息、才能收到下发的消息哦。
// wxml
<text class="user-motto" bind:tap="doSubscribe">点我唤起订阅面板</text>
<view bindtap="sendMess">戳我下发订阅消息</view>

// js
  doSubscribe () {
    const tmpId = '_cw8BWc-6KlbhsG4p3jgChtf5MQz0LCfYz8pDJBQP3Y'
    const _this = this
    if(tmpId){
      wx.requestSubscribeMessage({
        tmplIds: [tmpId],
        success (res) {
          console.log('接口调用成功的回调函数', res)
        },
        fail (err) {
          console.log('接口调用失败的回调函数', err)
        },
        complete () {
          console.log('接口调用结束的回调函数（调用成功、失败都会执行)')
        }
      })
    }
  }
复制代码

// 落地页页面主要代码 - pages/logs/logs
// js
Page({
  data: {
    logs: []
  },
  onLoad(options) {
    console.log(options,'跳转传参数')
  }
})
复制代码

云函数send主要代码如下:

// 记得云函数相关的编写是写在云函数文件夹下、非小程序页面的文件夹下哦.
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
// 云函数入口函数

exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
        "touser": cloud.getWXContext().OPENID, // 通过 getWXContext 获取 OPENID
        "page": '/pages/logs/logs?title=云开发传参',
        "lang": 'zh_CN',
        "data": {
          "amount1": {
            "value": "110"
          },
          "date3": {
            "value": "2019年10月1日"
          }
        },
        "template_id": '_cw8BWc-6KlbhsG4p3jgChtf5MQz0LCfYz8pDJBQP3Y',
        "miniprogramState": 'developer'
      })
    return result
  } catch (err) {
    return err
  }
}

复制代码

D. 小程序页面调用接口

  sendMess () {
    wx.cloud.callFunction({
      name: 'send',
      success: res =>{
        console.log('云函数success', res)
      },
      fail: res =>{
        console.log('云函数fail', res)
      },
    })
  }
复制代码

至此、在微信开发者工具上、你会发现有调用wx.cloud.callFunction.send, 我们看看返回如下:

图总是不这么的直观、贴上返回的json串吧

{
  "result": {
    "msgid": 1912280574182899700,
    "errMsg": "openapi.subscribeMessage.send:ok",
    "errCode": 0
  },
  "requestID": "b79c6b50-cc21-11eb-a893-52540006aa05"
}
复制代码

我们再来看看真机的效果
A. 手机上会收到一条服务通知

B. 戳进去之后我们会看到具体的服务通知内容、如下图:

C. 我们戳卡片进去会落地到我们指定的页面、本例是logs页面, 打开调试我们可以看到传过来的参数.

5. 部署并上传云函数

cloudfuntions为云函数的根目录、找到其中一个云函数的目录比如send文件夹.
A. 右键菜单-> 在外部终端中打开; 打开后在终端输入如下代码并执行:

// 目的: 下载云函数的依赖模块
npm install
复制代码

下载完成后、你会发现目录结构中多了node_modules模块.

B. send目录右键 -> 上传并部署:所有文件

该步骤主要是把本地的云函数上传到云端, 上传成功后该send文件夹图标就会变成一朵小云.
C. 在云开发控制台-> 云函数-> 云函数列表就能看到刚上传的send云函数了.

Tips: 当你把云函数都部署上传到服务器之后，你把整个 cloudfuntions 文件夹删掉都没有关系;
相同的依赖（比如都依赖 wx-server-sdk）一旦部署到云函数之后，你可以选择不上传 node_modules 时，因为已经上传过了。

6. 踩坑史

6.1 invalid scope 没有权限,请先开通云服务的问题

明明辛辛苦苦按照环境搭建步骤搞起来了、仍报错如下错误:
微信开发工具开发小程序出现VM82:1 cloud init error: Error: invalid scope 没有权限,请先开通云服务的问题
问题分析: AppID首次开通云环境后，还需要等待10分钟，再次编译即可正常。
解决方案: 10分钟后关闭微信开发者工具再次打开、重新编译即可.

6.2 module “pages/index/wx-server-sdk.js” is not defined

报错提示如下:

报错代码及目录说明如下:

报错原因分析: 应该在云函数底下的index.js中去编写、而不是本地小程序页面的js去编写代码.

6.3 在云函数目录下执行npm install

该命令会去下载云函数目录下package.json中dependencies的依赖模块。
我们先来看看云函数下的package.json依赖哪些模块:

再看看安装完依赖后的node_modules有哪些东西(仅截取了部分):

也许到了这里会有疑惑、我们的package.json中只有1个依赖模块wx-server-sdk, 为什么node_modules文件夹下却下载了如此多的模块?
因为 wx-server-sdk 也依赖三个包 tcb-admin-node、protobuf、jstslib，而这三个包又会依赖其他包，子子孙孙的，于是就有了很多模块。