【uniapp】微信小程序迁移至uniapp以及echarts图表

需要对微信小程序开发和uniapp开发都有了解

目标：

1. 微信小程序原生开发转为uni-app开发
2. 微信小程序云开发转为uniCloud阿里云开发，涉及云数据库和云存储的迁移
3. 迁移后依然发行至微信小程序

代码迁移

借助 miniprogram-to-uniapp工具，源项目同级目录下会生成后缀为_uni的uniapp项目

# 全局安装
npm install miniprogram-to-uniapp -g
# 查看安装
wtu -V
# 转换
wtu -i [微信小程序路径]

云开发迁移

1. 微信云开发数据库所有表导出为为json格式，云存储的图片也导出
2. 在uniCloud控制台创建阿里云服务空间
3. 在阿里云数据库建表并导入数据，如果只需要查询数据则可以不编辑表结构
4. 在阿里云云存储批量上传图片

代码细节调整

转换后基本的页面和功能是没有问题的，但涉及云开发、echarts、openid获取等一些功能则需要一项一项修改调整。

uniapp配置文件

maninfest.json ：申请并配置AppID等

uniCloud云存储图片显示

修改<image src="">中原本的地址为云存储的cdn地址https://vkceyugu.cdn.bspapp.com/....，点击详情可见。

uniCloud云数据库

修改db的引入，jql语法大体不变，但注意返回参数格式变化了需要调整。

const db = uniCloud.database();

uniapp获取openid

之前是wx.login和微信云函数，现在需要借助uniCloud云函数。

云函数wx-info代码

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数  
	let js_code = event.code

	const appid = '' //微信小程序appid  
	const secret = '' //微信小程序APPSecret秘钥  
	const loginUrl = 'https://api.weixin.qq.com/sns/jscode2session'
	console.log(js_code)
	let res = await uniCloud.httpclient.request(loginUrl, {
		data: {
			appid: appid,
			secret: secret,
			js_code: js_code,
			grant_type: 'authorization_code'
		},
		dataType: 'json'
	})

	let openid = res.data
	//返回数据给客户端  
	return openid
};

APP.vue，先登录获取code，在通过code获取openid

uni.login({
	provider: "weixin",
	success: (res) => {
		console.log("code: ", res.code)
		uniCloud.callFunction({
			name: "wx-info",
			data: {
				"code": res.code
			}
		}).then(res => {
			console.log("openid:", res.result.openid);
		}).catch((err) => {
			console.log(err)
		})
	}
});

radio点击后需要取消点击

不使用radio-group的@change事件，而在每个radio上分别使用@tap事件

<radio-group>
	<radio :checked="checked1" :value="value1" @tap="change" :data-item="value1"></radio>
	<radio :checked="checked2" :value="value2" @tap="change" :data-item="value2"></radio>
</radio-group>

change(data) {
	const value = data.currentTarget.dataset.item;
}

uniapp使用echarts

原先使用的是官方的echarts-for-weixin ,没有找到好的直接修改的办法，研究后发现使用插件最方便。

图表插件

1. 删除旧的ec-canvas文件夹

2. 保留旧的图表配置option

3. 安装插件：百度图表插件，点击可自动导入，可兼容多端
   

4. 插件安装后，引用并使用，删掉原来多余的部分代码，不用修改原来的option

   <l-echart ref="chart1" @finished="showChart1"></l-echart>
   
   import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
   
   let option = {...}
   this.$refs.chart1.init(echarts, chart1 => {
   	chart1.setOption(option);
   })
   

注意：直接使用插件内的echarts.min文件还想按需引入的话，可在官网按需定制echarts.min.js，然后替换掉uni_modules内插件的echarts.min.js。

海报生成

canvas绘图相关代码不变，绘制echarts图表时通过以下代码获取临时路径

this.$refs['chart1'].canvasToTempFilePath({
	success: res => {
		resolve(res.tempFilePath)
	},
	fail: res => {
		reject()
	}
})