uniapp+unicloud打包部署微信小程序

打包为微信小程序流程

1. **注册微信公众平台账号**：实名认证后，在平台创建新小程序，在开发管理-拿到专属AppID，后续开发全靠它！

同时生成小程序密钥（生成二维码需要用到）

https://mp.weixin.qq.com/

2.微信开发者工具下载：即便使用uniapp开发，后续测试也需要用到微信开发者工具。

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.Hbuilder配置AppId，打开 manifest.json 之后找到 微信小程序配置AppId,将 ES6转换ES5/上传代码时样式自动补全/上传代码时自动压缩 都勾选上.

注意:manifest.json基础配置中可以设置vue大版本.

4.如果使用了uniCloud，需要部署到云端数据库空间【uniCloud目录下的database json数据结构和cloudfunctions云函数】。

首先确保创建了uniCloud云开发环境，在项目根目录上右键：

然后在uniCloud子目录上右键-云服务空间初始化向导：勾选初始化云函数和数据库。

5.运行-运行到小程序模拟器-运行设置 中选择开发者工具的安装目录

6.打开微信开发者工具: 设置-安全设置-开启服务端口

7-1.方式一(dev):运行-运行到微信小程序:

等待控制台差量编译成功后.默认是在项目根目录\unpackage\dist\dev\mp-weixin

导入项目-选中上面打包出来的文件夹,进入进行开发调试,修改代码后会实时进行差量更新.

7-2.方式二(prod):发行-小程序-微信:

发行成功后 控制台会输出打包的目标目录,默认是在项目根目录\unpackage\dist\build\mp-weixin下.

然后我们打开微信开发者工具-导入项目-选中上面打包出来的文件夹即可,然后双击项目进入测试界面,等待小程序加载出来即可.

uniCloud与wx.cloud云数据库

区别

1.都是基于云端的json结构数据库，适合独立开发者，不想搭建自己的阿里云服务器部署mysql数据库的用户。

区别：

(1).wx.cloud 适用于微信小程序原生开发，仅支持仅微信小程序及微信云托管

(2).uniCloud(推荐 mongo)适用于uni-app 跨端框架 ，支持微信小程序、支付宝小程序、H5、App、百度小程序等

uniCloud创建服务空间：https://unicloud.dcloud.net.cn/

使用uniCloud，需要部署到云端数据库空间【uniCloud目录下的database json数据结构和cloudfunctions云函数】。

首先确保创建了uniCloud云开发环境，在项目根目录上右键：

然后在uniCloud子目录上右键-云服务空间初始化向导：勾选初始化云函数和数据库。

uniCloud的clientDB api

2.Uniapp中 clientDB的前端，有两种用法:

(1)可以用js API操作云数据库

(1-1)获取db引用并执行查询

const db = uniCloud.databaseForJQL() //代码块为cdb
db.collection('list')
//传统nosql查询语法示例:
  .where({
    name: "hello-uni-app" //传统MongoDB写法，不是jql写法。实际开发中推荐使用jql写法
  })
//jql查询语法示例
  .where('name=="hello-uni-app"')
  .get()
  .then((res)=>{
    // res 为数据库查询结果
  }).catch((err)=>{
    console.log(err.code); // 打印错误码
		console.log(err.message); // 打印错误内容
  })

(1-2).客户端事件

1) 刷新token : 透传uni-id自动刷新的token给客户端(HBuilderX 3.2.11及以上版本，clientDB会自动将刷新的token及过期时间保存在storage内。)

const db = uniCloud.databaseForJQL()
function refreshToken({
  token,
  tokenExpired
}) {
  uni.setStorageSync('uni_id_token', token)
  uni.setStorageSync('uni_id_token_expired', tokenExpired)
}
// 绑定刷新token事件
db.on('refreshToken', refreshToken)
// 解绑刷新token事件
//db.off('refreshToken', refreshToken)

2)全局clientDB错误事件，HBuilderX 3.0.0起支持

const db = uniCloud.databaseForJQL()

function onDBError({
  code, // 错误码详见https://doc.dcloud.net.cn/uniCloud/jql.html#returnvalue
  message
}) {
  // 处理错误
}
// 绑定clientDB错误事件
db.on('error', onDBError)
// 解绑clientDB错误事件
//db.off('error', onDBError)

(2)也可以使用<unicloud-db>组件

<unicloud-db> 组件是一个数据库查询组件，它是对clientDB的js库的再封装.

在传统开发中，开发者需要在前端定义data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。

有了<unicloud-db> 组件，上述工作只需要1行代码！写组件，设组件的属性，在属性中指定要查什么表、哪些字段、以及查询条件，就OK了！

属性列表:https://doc.dcloud.net.cn/uniCloud/unicloud-db.html#props

(2-1)查询:

通过collection属性指定要查询表"table1"，通过field属性指定要查询字段"field1"，并且在where属性中指定查询id为1的数据。查询结果data就可以直接渲染在界面上.

<unicloud-db> 组件的查询语法是jql : https://doc.dcloud.net.cn/uniCloud/jql.html

<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">

<view> {{ data}} </view>

</unicloud-db>

(2-2).增删改(add、remove、update方法)

this.$refs.udb.add(value, {
  toastTitle: '新增成功', // toast提示语
  success: (res) => { // 新增成功后的回调
    const { code, message } = res
  },
  fail: (err) => { // 新增失败后的回调
    const { message } = err
  },
  complete: () => { // 完成后的回调
  }
})

uni-config-center云配置中心

Unicloud的云函数中是不支持直接配置环境变量的！！！ 不适合直接通过process.env.WEIXIN_APPID 从云函数环境变量中取。

实际开发中很多插件/云函数/公共模块需要配置文件才可以正常运行，比如各种appkey、secret。存放在数据库里的话，拖累云函数性能，并且增加数据库请求。

uni-config-center解决了上述问题。通过独立了公共模块，统一管理配置文件，做到配置和代码分离，更新代码不会覆盖配置，并且可以在多个云函数之间共享配置。

常见报错：

1. Error not found collection at pages/index/index.vue...，说明云端数据库集合（users/rooms/room_members/transfers）未初始化。

解决：HBuilderX 里右键 uniCloud-alipay/database → 上传 DB Schema

重新上传相关云函数（至少 getOrCreateUser、getRoomLedger） 再运行小程序

2.plus is not defined

在使用plus时，需要在plus ready后再调用plus api。

但是，如果在使用浏览器调试时，无论是否运行上述方法，都报plus is not defined错误。因为浏览器是不能调试H5+,只能用手机进行调试,相当于在app内置了一个支持html5+的内核,该内核支持plus对象.所以没有plus库,也不用引用库.就像js中我们使用document对象,但从来没有引document库一样的道理。

// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断

if (window.plus) {

this.plusReady(); // 在这里调用5+ API

} else {

document.addEventListener('plusready', this.plusReady(), false);// 兼容老版本的plusready事件

}

function plusReady() {

// 在这里调用plus api

plus.device.getInfo({

success: function (e) { alert('getDeviceInfo success'); },

fail: function (e) { alert('getDeviceInfo failed'); }

})

}