首页 前端知识 html5迁移到微信小程序的 方法 亲测可用

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

2024-03-13 00:03:40 前端知识 前端哥 181 483 我要收藏

切图网习惯于在做小程序之前先做成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}`
})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3734.html
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!