在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版本

待续。。。。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐