需要对微信小程序开发和uniapp开发都有了解
目标：
- 微信小程序原生开发转为uni-app开发
- 微信小程序云开发转为uniCloud阿里云开发，涉及云数据库和云存储的迁移
- 迁移后依然发行至微信小程序
代码迁移
借助 miniprogram-to-uniapp工具，源项目同级目录下会生成后缀为_uni的uniapp项目
# 全局安装
npm install miniprogram-to-uniapp -g
# 查看安装
wtu -V
# 转换
wtu -i [微信小程序路径]
云开发迁移
- 微信云开发数据库所有表导出为为json格式，云存储的图片也导出
- 在uniCloud控制台创建阿里云服务空间
- 在阿里云数据库建表并导入数据，如果只需要查询数据则可以不编辑表结构
- 在阿里云云存储批量上传图片
代码细节调整
转换后基本的页面和功能是没有问题的，但涉及云开发、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 ,没有找到好的直接修改的办法，研究后发现使用插件最方便。
图表插件
-
删除旧的ec-canvas文件夹
-
保留旧的图表配置option
-
安装插件：百度图表插件，点击可自动导入，可兼容多端
-
插件安装后，引用并使用，删掉原来多余的部分代码，不用修改原来的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。文章来源：https://www.toymoban.com/news/detail-489066.html
海报生成
canvas绘图相关代码不变，绘制echarts图表时通过以下代码获取临时路径文章来源地址https://www.toymoban.com/news/detail-489066.html
this.$refs['chart1'].canvasToTempFilePath({
success: res => {
resolve(res.tempFilePath)
},
fail: res => {
reject()
}
})
到了这里，关于【uniapp】微信小程序迁移至uniapp以及echarts图表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
