首先使用wtu 这个插件，将原生小程序转为uniapp，在利用uniapp的多端，转为h5
现在uniapp的编辑器默认的还没有使用vue3，所以这里的写法是vue2的
注意的地方：
- 转h5不支持分包
- 不支持this.setData，要进行修改为this.num = num
- 只能有一个根节点，不支持多个根节点，这是要注意的，多根节点的话，使用view标签进行包裹下
- 图片的路径，本地的路径转化过来的时候，会将当前的页面路径也加上了，只要去掉就可以了，使用网络图片的话，不能有空格，如：" htpp://" ，在http前面有空格的，图片不会进行展示，这个一定要注意
- 在data中的变量不能有_num这种的命名，有下划线命名的变量会处理为watch的形式，将_num这个变量也会进行修改为clone_num,但是页面中有的变量还是_num,所以将watch删除，全局替换，将_num替换为clone_num就可以了
- 在一个页面中使用多个v-for进行渲染的时候，:key这个值不能都是index，否则会报错，可以加一个:key=" 'fon1-’ + index "， 这种的也可以
- 小程序中使用到的ui组件库，可以查查是否支持多端，不支持的话，就要将ui组件库改为相应的h5移动端的
- h5端是不支持微信的授权等一些api的，所以这个也要注意下
- 关于api直接的差异，可以直接看uniapp的官网，直接看看这个api支不支持h5就可以了，不支持的话，只能另辟蹊径了
- 在这里我使用的ui组件库是vant2也就是vue2.X的版本，小程序中的值是e.detail，在h5中直接是e，这里需要进行注意，还有就是日历组件中的注意，在小程序中，默认的default-date，是[时间戳new Date(2022/1/1 11:12).getTime()，时间戳new Date(2022/1/1 11:12).getTime()]，在h5中是[时间戳new Date(2022/1/1 11:12)，时间戳new Date(2022/1/1 11:12)]，这个是需要注意的，还有就是小程序中日历组件的显示使用show="{{show}}"，在h5中使用v-model="show"
网友评论