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