当前位置:首页 > 技术分析 > 正文内容

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

ruisui883个月前 (01-13)技术分析19

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/247.html

标签: vue 小程序
分享给朋友:

“html5迁移到微信小程序的 方法 亲测可用” 的相关文章

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...

微信外H5跳转小程序——组件(vue项目)

场景有个H5(vue项目),需要实现点击商品item跳转到小程序,微信内和微信外都要支持,这里我们只介绍一下H5在微信外的跳转。如图所示,红框内是一个商品,就是点击这里,要跳转小程序:配置微信小程序云开发(云函数)1、开通云开发然后选择免费额度2、云开发权限设置找到权限设置,把这里的「未登录用户访问...

TDesign企业级开源设计系统越发成熟稳定,支持 Vue3 / 小程序

TDesing 发展越来越好了,出了好几套组件库,很成熟稳定了,新项目完全可以考虑使用。早在2021年,腾讯的 TDesing 刚发布不久,我就写了一篇简短的文章来介绍,当时主要关注的是 TDesign 的 Vue 组件库和用来搭建 admin 后台系统的实用性。虽然当时看起来不错,但还处于测试版,...

千智云低代码平台 v2.0.6发布「平台升级」

【平台简介】千智云低代码应用平台是一款低代码开发+低代码PaaS+SaaS应用中台为一体的应用平台。平台提供了多种应用场景功能及应用组件,满足各种应用的基本实现,可以使用低代码开发的方式,定制化的开发软件项目,并使用平台提供的各种功能,提供了大多数业务场景的支持。也可以将开发的应用发布到平台,成为S...