在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.组件属性必须赋值,如:
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版本
待续。。。。