小程序·云开发总结

小程序·云开发总结

至刚刚接触小程序·云开发的你

2018年底第一次接触小程序·云开发至今已经有了大半年了，从最初的不懂到懂也总是一个过程，下面是我对小程序·云开发的一些总结。

小程序云开发的优势与劣势

小程序·云开发是在18年初时微信小程序为了给开发者带来更多的方便，开放了一个只需要掌握前端技术与mongoDB，利用云开放的数据口传送数据即可使用小程序并将其上线的功能，对于前端开发者来说无非是一个天大的福利，因此再不需要如此繁琐的后台与运维而是写完后进行云函数部署上传后直接就可以上线/更新。
而其劣势是在于它本身的运行是固定的，能够接受用户的范围很小，一旦超过后系统就会出现暂时性崩溃，导致用户体验值下降，所以只能够适应小型的开发范围，如果想要提高小程序的使用性能与体验值还是建议去使用服务器搭建后台。

小程序·云开发的使用指南

我的GitHub（关于个人利用云开发的学校项目，基本已经完成了很多，还差一些数据没搜集，目前还是先以内容为主。）
步入正题首先需要下载微信开发者工具点击下载打开后点击新建项目并需要填写APPID后选择云开发 QuickStart 进入页面，内部有两个主要的主体页面一个是云文件cloudfunctions一个是内容文件miniprogram，在下面还有一个project.config.json文件是用来控制云文件的操作范围，需要在里添加添加字端cloudfunctionRoot=“你的内容文件名”;

部署云函数 wx-server-sdk

在云开发中必须要对已写好的对文件进行上传部署，接下来就是部署云函数的步骤
点击云文件选择login文件右键用终端打开进行终端安装package-lock.json文件
首先需要安装两种运行环境node.js点击下载、npm点击下载安装完成后在终端输入:

`$ npm - v` // 用于检查npm是否安装成功.
`$ node -v`  // 用于检查node.js 是否安装成功.

安装成功后会返回相应的版本号。
后进行安装部署配置wx-server-sdk
终端输入：

`$ npm install --save wx-server-sdk@lastest`

按下enter后等待系统自动安装，当系统安装成功后会自动在云文件login内添加 package-lock.json如果没有安装成功，在之后部署文件的过程中控制台会弹错一个error具体内容如下：

Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud function service error code -504002, error message Function not found: [login]; at cloud.callFunction api;

如果在终端安装中出现错误请检查安装环境是否完整，并要检查安装环境的兼容性，然后再重新安装部署配置。

函数的初始化

在部署配置安装完成后，接下来就是对云函数进行初始化和云端数据的调用。
首先需要在云文件下openapi或login内的index.js进行对云函数初始化，如下代码

const cloud = require('wx-server-sdk')
cloud.init()

在app.js内也需要添加初始化字段

//app.js部署云函数
if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })

   /*this.globaldata = {}  //在函数体之外,刷新数据        */

创建云端数据库

点击云开发 进入云开发后台，点击数据库后添加一个新集合(库)，可以自己在内新建条件或使用mongoDB导入与Excel的.csv格式的表格导入但要注意：不可以使用同一个条件(_openid除外)附加给每一条记录否则无法导入同时也要注意数据库的格式同时如果在附加条件没有相应的_id号码内系统会自动填充各条记录的_id，但每一条记录的_id必须是不同的否则也会报错。

在js文件内引入数据

在数据导入成功后，接下来就是需要在前端页面取出云端存储的数据，首先还是需要对数据库函数进行初始化：

//index.js
wx.cloud.init()
wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid);
        console.log('[云函数] [login] user userInfo: ', res.result.userInfo);

        app.globalData.openid = res.result.openid;
        wx.setStorageSync('openid', res.result.openid);
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })

然后进行在具体的页面内调用数据库。

getData: function(e){
    const db = wx.cloud.database();       //调用数据库函数
    db.collection('base').where({    //获取数据库‘sitdatabase’
      _openid: this.data.openid,   //利用数据库中的唯一约束获取数据库中的具体数据
    }).get({
      success: res => {
        this.setData({
          data: res.data     //刷新数据并将具体的数据从库内取出来
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
}

   onload: function(){
   var that = this;
    this.getData();    //渲染刷新页面
}

接下来是需要将已经获取到的数据利用.wxml将数据显示出来

   <view class="container">
    <block wx:for="{{data}}" wx:key="index" class="blockItem">
        <text class="English">{{item.English}}text>
     <text class="chinese">{{item.Chinese}}text>
   block>
view>

接下来只要配置好.wxss进行对页面进行渲染和调整就好了。

本来应该还有些内容需要补充的但暂时忘记了，等想起来我会继续补充的～～hhh