说明、介绍

本篇文章是微信小程序开发入门的第二篇，介绍如何运行第一篇文章创建的项目

运行项目

目前我们项目的页面是这样的：

此时我们点击“获取OpenId”控制台会报如下错误：TypeError: Cannot read property 'envId' of undefined：

查看报错信息，我们可以看到，问题出在index.js文件的108行，打开文件miniprogram\pages\index\index.js，可以看到108行代码如下：

  jumpPage(e) {
    wx.navigateTo({
      url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,
    });
  },

可以看出是this.data.selectedEnv.envId的envId没有定义，那我们就找到this.data.selectedEnv.envId。

找到上面data中定义的selectedEnv，看到他是这么赋值的：selectedEnv: envList[0],，而envList是从其他文件引入的：const { envList } = require('../../envList.js');。

如此，我们打开envList.js文件，看到envList[0]是没有内容的，这样我们就知道问题出在哪里了。

我们将envList.js文件的代码改成如下：

const envList = [{
  envId: '此处填写自己的环境id'
}];

环境id在哪里查看？

点击左上角的云开发按钮，打开云开发控制器，复制环境id，填入上方代码

此时我们再点击“获取OpenId”就没有报错信息了，并且进到了一个新的页面，点击新页面的“获取OpenId”，跳出了如下提示：

我是windows系统，在终端运行命令./uploadCloudFunction.bat会报错，并且我发现项目中也没有uploadCloudFunction.bat这个文件。

上述问题解决步骤

打开云开发控制台，点击左上角的“云函数”，再点击“新建云函数”，新建的云函数名称为“quickstartFunctions”

此时再回去点击“获取OpenId”，发现没有报错，但是OpenId并没有展示出来，我们进到代码中详细查看一下，打开miniprogram\pages\getOpenId\index.js文件，找到点击“获取OpenId”的方法，代码如下：

  getOpenId() {
    ...
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.envId
      },
      data: {
        type: 'getOpenId'
      }
    }).then((resp) => {
      this.setData({
        haveGetOpenId: true,
        openId: resp.result.openid // 这里需要修改一下，改成resp.result.userInfo.openId
      });
      wx.hideLoading();
    }).catch((e) => {
      this.setData({
        showUploadTip: true
      });
      wx.hideLoading();
    });
  },

通过打印resp，可以看到他的内容如下，所以我们要修改上面的代码：

此时再回去点击“获取OpenId”，OpenId就正常展示出来了。

结尾

以上就是运行示例项目的过程