mpvue开发小程序会遇到许多问题
，，，，，下面为各人解答怎样解决。。

• 项目结构

•  |---build
       |---pages.js文件目录
   |---src
       |---component子组件
       |---pages
           |---营业页面
       |---store
  ，，，，，vuex贮存
       |---utils
           |---请求api.js
           |---format名堂化插件
  ，，，，，小程序中不可使用vue自带的名堂化只能手动修改后台返回的时间戳
  ，，，，，价钱
  ，，，，，订单状态等
           |---request封装fly举行请求响应阻挡
           |---wx.js
  

• 情形及依赖

  • less-loader,提供嵌套样式
    ，，，，，谁用谁知道

  • flyio提供请求便于请求
    ？？？？？？榈目焖僮痟5(flyio提供了h5,小程序的请求封装
    ，，，，，参考mpvue中提供的一个例子写阻挡器
    ，，，，，用于处理后台返回未登录状态跳转页面)
    ，，，，，自己在小程序中wx.request封装也一样
    ，，，，，只是转h5又需要做一个axios。。

  • 腾讯地图qqMap提供的reverseGeocoder(wx.getLocation只提供了经纬度定位
    ，，，，，而产品需要的是确认定位后获取都会
    ，，，，，举行同城商品检索)

  • 阿里云oss工具贮存处理文件上传
    ，，，，，较量意外的是腾讯对阿里云的oss域名前缀举行了封禁后台不可设置
    ，，，，，解决方案是让后台将该域名举行服务器域名署理。。提一嘴
    ，，，，，最最先用七牛云没有泛起这个问题
    ，，，，，嫌贫困的可以用七牛

  • 富文本处理
    ，，，，，使用mpvue例子中提供的mpvue-wxparse
    ，，，，，虽然你也可以自己写

• 小程序开发历程遇到的问题

  • 使用mpvue是一个很是爽的历程
    ，，，，，vue的语法基本能正常使用但有几个需要注重的问题
  • 页面转达参数类似get请求?key=value
    ，，，，，下一个页面接纳$mp.query.key获取可是在同类型的页面如商品详情多次key的切换由于页面缓存key会坚持稳固
    ，，，，，凭证营业差别情形可能差别
    ，，，，，我接纳的方案是在onUnload中扫除key
    ，，，，，虽然mpvue文档官方不推荐用小程序的周期
    ，，，，，但需要多次切换key的页面现在能够实现先这么处理吧。。
  • 最最先仅妄想做小程序
    ，，，，，厥后需要增补app
    ，，，，，需要在开放平台关联小程序后使用unionId以使三端用户相同
    ，，，，，没有做好产品定位
    ，，，，，需要重新举行表结构设置。。；；
    ；；；袢∫煳褂脀x.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内里的参数可能会全局报错
  • 。。。。》窒硇枰⒅胤窒沓隼吹氖堑ヒ趁挥蟹祷氐绞滓
    ，，，，，只能点击右上角三点
    ，，，，，若是还没有举行过操作建议应该先带页面参数到首页
    ，，，，，经由首页跳转到分享目的页面
    ，，，，，这样会自然一点
    ，，，，，现在我的项目基本完成
    ，，，，，为不影响整个流程
    ，，，，，我在几个要害页面中判断getCurrentPage().length>1?来判断是否为第一页
    ，，，，，若是是第一页就显示一个返回首页的按钮
    ，，，，，实属无奈

• 转h5实践

  • 小程序与h5需要替换的或许30%页面渲染轻松
    ，，，，，但组件替换需要花一准时间
    ，，，，，较量重大的包括以下vue项目常用部分
    ，，，，，若是有一两个vue项目相信早就操作过这些部分
    ，，，，，替换这些组件也就改改营业逻辑
    ，，，，，接纳的ui框架是靠近weui的vux
    • wx这个工具我们可以连系router和vux封装一下其中的navigateTo
      ，，，，，redirectTo等路由及模态框和toast
      ，，，，，并在webpack.base.conf设置wx指向该文件,这样我们就能直接使用wx这个工具面的要领不必修改

    /*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 () {
          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相关

      /*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又准备开启新的填坑之路啦。。