0%

2023-02-18 浅谈 uni-app 在微信小程序平台的适配

2023-02-18 浅谈 uni-app 在微信小程序平台的适配

温馨提示:本文使用 New Bing 润色

最近我突发奇想,想要给自己做了很久的“草梅定时推送”项目开发一个微信小程序版本。“草梅定时推送”的手机端是基于 uni-app 开发的,网页版和 APP 版都是由 uni-app 一套代码生成的,并且已经适配好了。但是,在我真正开始着手微信小程序适配的时候,才想起来当初为什么放弃支持微信小程序了,因为小程序中有很多东西需要重新调整,大大增加了适配难度!在这个过程中也遇到了不少问题,特此记录下来,以便警示后来人!警钟撅烂!

Prop 传参问题

image-20230218172904577

image-20230218172522396

首先要解决的第一个问题,就是prop 不支持 v-bind,也不支持传函数

在微信小程序端使用 v-bind 语法会直接报错,所以我只能做条件编译或者换一种写法。

其次是 prop 中传函数的问题,H5 端和 APP 端都支持,但小程序端读取 prop 时获取到的值为 null,也就是说不能传递函数作为 prop

上传文件问题

image-20230218174608767

在微信小程序中,uni.uploadFile 方法只支持单文件上传,所以多文件上传需要额外适配。

【可以看到小程序端额外写了个循环】

image-20230218173506222

双向绑定问题

image-20230218180006303

在微信小程序里面,双向绑定的变量存在无法修改的问题,只能另外绑定一个事件来修改变量

图片预览问题

图片预览属于老问题了,我至今还没解决这个问题,只能先记录一下,以后如果解决了再看。

在微信开发者工具中是一切正常的,但真机运行的时候就不行了,图片也是配置了跨域的,域名也在白名单里面,但就是无法加载。

该问题已解决,请参考以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const previewImage = () => {
// 预览图片
// 其他环境
// #ifndef MP-WEIXIN
uni.previewImage({
urls: [avatar.value],
})
// #endif
// 微信小程序条件编译
// #ifdef MP-WEIXIN
uni.getImageInfo({
src: avatar.value, // 图片地址
success(image) {
wx.previewImage({ // 注意是 wx 开头的微信小程序接口
urls: [image.path],
referrerPolicy: 'origin', // 必填,否则会受到图床的防盗链影响
success(res) {
console.log(res)
},
fail(error) {
console.log(error)
},
})
},
})
// #endif
}

注意:在微信开发者工具里面点击真机调试后,此时出于调试模式的小程序依旧无法点开图片预览,需要断开连接后重新进入开发版本的小程序查看。

总结

以上是我在 uni-app 适配微信小程序平台时遇到的一些问题,以及解决问题的方法,希望对后来者有所帮助。

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/afef49e2.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!