html5迁移到微信小程序的 方法 亲测可用

切图网习惯于在做小程序之前先做成html5+vuejs的形式，因为html5切图是我们比较熟悉的方式，而且有专业的工具 以及浏览器调试也会更加的方便 灵活，效率高，而且html5的方式可以方便预览看效果，方便调整，当html5页面做好确认没问题以后 再转成小程序或者官方出品wepy的方式，这个时候就需要找到html5和小程序之间的微妙不同，需要做以下调整，亲测可用。

css需要调整的

把css中的px改为rpx，可以借助工具批量替换，如果使用的工具是 vscode 可以用插件 px to rpx，如果是hbuilder可以执行批量替换。

html需要调整的

1. p 改为 view
2. span、i 改为 label
3. @click 改为 @tap
4. img 改为 image
5. a href 改
6. :style=”” 改为 style=”{{}}”

js需要调整的

this.$router.push({
path: ‘/course-detail’,
query: {
caseCode: ‘123’
}
})
改为
this.$navigate(‘/course-detail’, {
caseCode: ‘123’
})

在组件里调用路由 this.$navigate 会报错说 navigate 不是一个函数，可以用原生的

wx.navigateTo({
url: `/pages/skin/upload-img?caseCode=${caseCode}&revisitCode=${revisitCode}`
})