切图网习惯于在做小程序之前先做成html5+vuejs的形式,因为html5切图是我们比较熟悉的方式,而且有专业的工具 以及浏览器调试也会更加的方便 灵活,效率高,而且html5的方式可以方便预览看效果,方便调整,当html5页面做好确认没问题以后 再转成小程序或者官方出品wepy的方式,这个时候就需要找到html5和小程序之间的微妙不同,需要做以下调整,亲测可用
css需要调整的
把css中的px改为rpx,可以借助工具批量替换,如果使用的工具是 vscode 可以用插件 px to rpx,如果是hbuilder可以执行批量替换。
html需要调整的
- p 改为 view
- span、i 改为 label
- @click 改为 @tap
- img 改为 image
- a href 改
- :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}`
})