uniapp 转微信小程序遇到的坑

在uniapp转微信小程序过程中经验总结：总体来说对于小一点并且功能不复杂的页面，相对于使用微信小程序语法制作小程序uniapp制作还是相对快捷，uniapp在功能组件方面大于微信小程序自带组件。uniapp在语法校验没有微信小程序严格。在自作过程中遇到的问题总结如下：

1.icon不支持部分格式，最好引入全部格式，转微信不报错。

2.v-if在编译的时候在小程序那边是变成display：none\block来控制的，所以使用定位会造成盒子错乱，距离尺寸不好把控，所以在使用v-if的时候尽量多套一个盒子去适配好一点。
v-show在使用这个的时候小程序那边虽然也用display：none\block去控制的，但是这里会有一个css选择器的权重问题，用v-show去控制的话会照成控制盒子不生效等问题，所以尽量避免使用v-show去控制盒子

如果已经转过来了，在原有的v-show的dom外再加一层view ，使用数据性hidden

3.input 中的placeholder要有赋值，如：placeholder：“ ”，不然会转成 placeholder 为 true

4.不支持外链canvas页面，需要外链的话微信小程序访问外部链接_花铛的博客-CSDN博客_微信小程序跳转外部链接

5.选择器最好全部写成class ，对别的选择器不友好。

6.加载外部链接的图片，给image标签外加一个wx:if,如下：

<image wx:if="{
   
   {showImage}}" src="/image/Weatherpic/{
   
   {now.cond_code}}.png"></image>

定义showImage:0,在onShow中showImage=1,显示图片

7.组件属性必须赋值，如：<uni-datetime-picker
v-model="datetimerange"
type="datetimerange"
returnType="timestamp"
start=""
end=""
rangeSeparator="至"
/>

通过转化为小程序，start=‘’将转化为start 没有初始赋值会出现bug 不能选择

8.input框再打入文字的时候消失，在input加入属性:always-embed="true"或者取消外面高度

参考：input键盘弹出时，滚动页面，输入框内容错位问题 | 微信开放社区

9.input框输入时，输入内容上移，给父级view 添加height:100vh;overflow:hidden;overflow-y:auto;就行

10.has not been registered yet报错先解决所有的错误，有引用的数据必须有初始值

11.Component is not found in path "pages/index/group"(using by "pages/index/index")报错，在路径引入正确的情况下，在.json文件中添加 "component": true;(作为引入的子组件)

12.uniapp 防止事件捕获和冒泡 @touchmove.stop.prevent=“”，后面必须写入函数，函数可以什么都不做，不然会有问题，正确格式 @touchmove.stop.prevent='donothing'

13.uniapp转微信小程序，子组件会被打包压缩到父组件中

14.微信小程序只支持mqtt4版本

待续。。。。

uniapp 转微信小程序遇到的坑

猜你喜欢