• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mpvue 转小程序实践总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

介绍

Mpvue 是一个使用 Vue.js 开发小程序的前端框架。   基础介绍

 

框架基于 Vue.js 核心修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,

 

从而为小程序开发引入了整套 Vue.js 开发体验,同样也使得  一套代码同时复用在小程序和 Web 中成为可能。  webapp?

 

本文将以 IT之家Lite 小程序的 Web 转换经过为线索,大致介绍一下转换的基本步骤及需要注意的一些事项。

 

目录结构

省略了部分与转换无关的文件
├─build
├─config
├─src
│ ├─components
│ ├─pages
│ ├─store
│ ├─styles
│ ├─utils
│ │  ├─api.js
│ │  ├─index.js
│ │  ├─request.js
│ │  └─wx.js
│ ├─App.vue
│ └─main.js
├─package-lock.json
└─package.json

转换步骤

0.前期准备

  • 建议使用 git 进行分支管理
  • 尽量避免使用不必要的小程序特有标签,如 text,image 等 #9137744   ? 
  • 避免直接使用 wx 对象,使用 import wx from 'wx' 的方式引入,便于 web 中改写 #c3ef6e7  ?
// src/utils/wx.js
export default wx
  • 使用 flyio 作为请求库,配置 alias 将 flyio 指向 flyio/dist/npm/wx
  • 基于原分支新建 web-version 分支

1.修改打包配置

  • 可以在原有配置基础上修改, 主要涉及 entry、target 及 loader 相关的配置项,
  • 这里我直接通过 vue-cli 生成了一个新的项目,复制 build、config 文件夹及 eslint、babel 等的配置文件替换原有配置,
  • 使用新项目的 package.json 并做相应修改,新建项目时  各选项尽量与原项目 保持一致 #ece3a76
  • 修改 main.js,指定挂载元素,顺利的话,这步之后执行 npm run dev 便已经可以跑起来了,有报错的话解决相应错误即可

2.配置路由

  • 添加 vue-router,并进行相应配置,建议使用 history 模式 #ddf94bc
  • 修改路由参数获取相关的代码 #b949197
  • 使用 router-link 替换 a 标签,避免页面重载 #eb09297

3.调整请求接口

  • 配置 alias 将 flyio 指向 flyio/dist/npm/fly
  • 小程序中不会有跨域的问题,但 web 中需配合后端进行请求转发或通过其他方式来解决这一问题 #f963975

4.转换小程序组件及 API

  • 底部导航栏,自己布局实现 #8d6d98b
.nav(v-if="$route.meta.nav")
  a.nav-item(href="/pages/news/list")
    img.nav-icon(v-if="$route.name === 'NewsList'", src="/static/assets/news-active.png")
    img.nav-icon(v-else, src="/static/assets/news.png")
    .nav-title(:class="{ active: $route.name === 'NewsList' }") 资讯
  a.nav-item(href="/pages/quanzi/list")
    img.nav-icon(v-if="$route.name === 'QuanziList'", src="/static/assets/quanzi-active.png")
    img.nav-icon(v-else, src="/static/assets/quanzi.png")
    .nav-title(:class="{ active: $route.name === 'QuanziList' }") 圈子
// src/utils/wx.js
import Vue from 'vue'

export default {
  showNavigationBarLoading () {
    Vue.prototype.$loading('加载中')
  },
  hideNavigationBarLoading () {
    Vue.prototype.$loading.close()
  },
  showToast ({ title }) {
    Vue.prototype.$toast.center(title)
  }
}

5.Web 优化

维护

在初步完成 Web 版的转换之后,便可以再次切换回主分支,后续的 feature 及 bugfix 均在主分支进行,

 

待主分支发版后 切换到 web 分支进行一次合并操作,可能会产生少量冲突,

 

但也都会比较容易解决,最后处理下新引入的小程序特性即可,整体而言可维护性还是比较好的

总结

整个转换过程还是比较顺利的,主体部分约 1 个多小时完成,相对于小程序 web 的环境更为开放,

 

所以大部分小程序的 api 可以通过各种方式模拟,由于是在两个不同的分支进行,

 

也可以放心地使用各种浏览器端地特性,下面是几点开发及转换中的建议:

 

  • 下拉刷新及上拉加载尽量以 method 的形式实现,便于 web 中复用
onPullDownRefresh () {
  this.refresh()
},
onReachBottom () {
  this.loadmore()
},
methods: {
  ...mapActions([
    'getSlides',
    'getNews'
  ]),
  async refresh () {
    await Promise.all([
      this.getNews({ r: 2, init: true }),
      this.getSlides()
    ])
    wx.stopPullDownRefresh()
  },
  loadmore () {
    const { news } = this
    const lastnews = news[news.length - 1]
    this.getNews({ r: Date.parse(new Date(lastnews.postdate)) })
  },
}
  • 样式及脚本尽量不要直接修改原有代码,  可通过 mixin、新建 style 标签等方式实现,  避免造成冲突

展望

  • 双端统一的 UI 库,目前来看只能使用一些简单的 css 类库
  • 更好的路由支持,理想状态下,可以通过 vue-router 的配置文件自动生成各页面的 main.js 文件,
  • 并配置 entry,开发 .vue 文件时,可以直接使用 this.$route this.$router 及 router-link 完成相关操作,避免每次手动修改

  1. Git 仓库
  1. Demo

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小明程序助手小程序发布时间:2022-07-18
下一篇:
signalr应用于微信小程序(二)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap