mpvue开发小程序所遇问题及h5转化方案

时间 2019-11-09

标签 mpvue 开发程序问题 h5 转化方案繁體版

原文原文链接

mpvue开发小程序所遇问题及h5转化方案

项目结构

|---build
        |---pages.js文件目录
    |---src
        |---component子组件
        |---pages
            |---业务页面
        |---store，vuex储存
        |---utils
            |---请求api.js
            |---format格式化插件，小程序中不能使用vue自带的格式化只能手动修改后台返回的时间戳，价格，订单状态等
            |---request封装fly进行请求响应拦截
            |---wx.js

环境及依赖css
- less-loader,提供嵌套样式，谁用谁知道
- flyio提供请求便于请求模块的快速转化h5(flyio提供了h5,小程序的请求封装，参考mpvue中提供的一个例子写拦截器，用于处理后台返回未登陆状态跳转页面)，本身在小程序中wx.request封装也同样，只是转h5又须要作一个axios。
- 腾讯地图qqMap提供的reverseGeocoder(wx.getLocation只提供了经纬度定位，而产品须要的是确认定位后获取城市，进行同城商品检索)
- 阿里云oss对象储存处理文件上传，比较意外的是腾讯对阿里云的oss域名前缀进行了封禁后台不能配置，解决方案是让后台将该域名进行服务器域名代理。提一嘴，最开始用七牛云没有出现这个问题，嫌麻烦的能够用七牛!
- 富文本处理，使用mpvue例子中提供的mpvue-wxparse，固然你也能够本身写
小程序开发过程遇到的问题html
- 使用mpvue是一个很是爽的过程，vue的语法基本能正常使用但有几个须要注意的问题
- 页面传递参数相似get请求?key=value，下一个页面采用$mp.query.key获取可是在同类型的页面如商品详情屡次key的切换因为页面缓存key会保持不变，根据业务不一样状况可能不一样，我采起的方案是在onUnload中清除key，虽然mpvue文档官方不推荐用小程序的周期，但须要屡次切换key的页面目前可以实现先这么处理吧。
- 最开始仅打算作小程序，后来须要补充app，须要在开放平台关联小程序后使用unionId以使三端用户相同，没有作好产品定位，须要从新进行表结构设置。获取方法为利用wx.login获取iv，sessionkey解析encryptedData
- 图片验证码须要带session，所以不能直接用img标签发送get请求，而是须要要经过filedownload请求地址下载二进制文件后转连接绑定给img
- input函数触发聚焦须要先设置:focus先为false再为true进行聚焦
- 子组件由于只会绑定一次不会触发OnShow周期，父组件在onshow周期获取获取不到this.$children
- 小程序在关闭5分钟内不会被清除部分页面仍是须要下拉刷新这个功能，能够在main.js开启enablePullDownRefresh: true，但会与scroll-view中的下拉冲突，只能二选一
- 咱们能够经过swiper嵌套scroll-view进行tab栏组件制做，swiper这个组件的高度须要用js写定高度，高度经过getSystemInfo获取，若是经过弹性布局flex:1;可能致使部分ios旧版本高度撑不开,嵌套比较多就不贴代码了
- 默认各类小程序原生自带图标是白色，若是背景色是白色，那么你可能一会儿发现不了加载图消失的缘由.window里配置backgroundTextStyle:'dark'
- 小程序有很多保留字须要注意不要重复，查看Q&A
- 前几回提交审核彷佛是机器审核，代码异常也能够经过。
- watch全局vuex会在非当前页面执行，若是你拿了$mp里面的参数可能会全局报错
- api,过滤函数复用方面，import的js在每次Import打包进去都会直接拷贝整个js，60个页面就重复60次，咱们能够把这部分公共的js放到vendor.js中，就只打包一次了，包大小有明显变化，修改webpack，参考issue

转h5实践vue

小程序与h5须要替换的大概30%页面渲染轻松，但组件替换须要花必定时间，比较复杂的包括如下vue项目经常使用部分，若是有一两个vue项目相信早就操做过这些部分，替换这些组件也就改改业务逻辑，采用的ui框架是接近weui的vuxwebpack

wx这个对象咱们能够结合router和vux封装一下其中的navigateTo，redirectTo等路由及模态框和toast，并在webpack.base.conf配置wx指向该文件,这样咱们就能直接使用wx这个对象面的方法不用修改ios

/*webpack.base.conf*/
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'wx': resolve('src/utils/wxSimulate.js')
  }
},
/*模拟wx的本身写的wxsimilate.js*/
  import router from '../router'
  import Vue from 'vue'
  import { ConfirmPlugin, ToastPlugin } from 'vux'
  Vue.use(ConfirmPlugin)
  Vue.use(ToastPlugin)
  const wx = {
    navigateTo ({ url }) {
      console.log(url)
      router.push({ path: url })
    },
    redirectTo ({url}) {
      router.replace({ path: url })
    },
    navigateBack () {
      router.go(-1)
    },
    showToast ({title}) {
      Vue.$vux.toast.show({
        // 组件除show外的属性
        text: title
      })
    },
    // 模态框显示
    showModal ({title, content, success}) {
      Vue.$vux.confirm.show({
        title,
        content,
        // 组件除show外的属性
        onConfirm () {
          success && success({confirm: true, cancel: false})
        },
        onCancel () {
          success && success({confirm: false, cancel: true})
        }
      })
    }
  }
  window.wx = wx
  export default wx

地图(采用vue-amap)，很少说，面向api编程
上下拉加载采用betterscroll封装一个scroll组件进行slot,slot文章参考点左边

rpx采用less+flexible中@rpx代替，只须要把全部rpx换成@rpx便可，不懂的小伙伴能够去看一下rem相关git

/*mpvue*/
  <style scoped lang="less">
  #index {padding:100rpx 20rpx 110rpx;}
/*vue*/
  <style scoped lang="less">
  @charset "utf-8";
  @rpx: 117.188rem;
  #index {padding:100/@rpx 20/@rpx 110/@rpx;}

flyio从mpvue搬过来基本不变
刚才mpvue中提到的阿里云oss上传须要修改配置文件中的uploadFile为h5中的FormData进行文件上传
二者的input聚焦函数业务不一样，h5中ios不容许函数吊起聚焦须要用户本身手点，安卓仍是能够的el.focus()进行。

最后感谢美团的各位大佬，让我这个菜鸡舒舒服服的开发了小程序、业绩也达标了，对文章有问题的大佬请指正，但愿你们都能顺顺利利开开心心的开发小程序，最近看到京东出了个taro又准备开启新的填坑之路啦。