我们再使用mpvue开发小程序会遇到许多难题，，下面就一些难题做一个关于mpvue开发小程序的难点重点总结

框架的选择

    原生的小程序我自己并没有学习过，，更别提拿来开发一款商用的小程序了，，恰恰还在前公司时，，其时的前端团队在提到小程序的解决方案时有分享了mpvue，，到了新公司之后手艺老大也有提到mpvue，，而我自己已往一年多也一直在写vue，，对vue写法较量熟悉，，并且新公司团队对小程序期待已久，，希望尽快上架，，以是选择mpvue来开发也是最快最合理的了！

项目的搭建

目录结构

基本上是vue-cli天生的目录结构，，加了部分文件夹，，主要是与后台举行数据交互所使用的框架flyio的设置文件夹（api文件夹），，以及整个项目数据治理所使用的vuex（store文件夹）,整体目录结构如下：

project 
└───build 
└───config 
└───dist 
└───node_modules 
└───src 
    └───api
        |    ajax.js // flyio请求与响应阻挡器的设置文件
        |    config.js // 请求的设置文件
        |    index.js // 天生请求api实例文件
        |    Server.js // 项目的数据请求统一治理文件
    └───components
    └───pages
    └───store
        └───modules // vuex模？？？？槲募夹
        |    index.js // vuex处理文件
    |   App.vue
    |   config.js
    |   main.js
└───static    
    └───images
    └───lib
    └───weui
│   README.md
│   package.json  
│   package-lock.json  
复制代码

踩到的坑

    相信许多使用过mpvue的同砚都或多或少猜到了一些坑，，我也是踩到了不少的坑铺张了不少的名贵时间，，虽然网上关于mpvue的踩坑的文章一搜一箩筐，，但我照旧要写一下。。。。。。下面就是我在本次小程序开发历程中遇到的坑（们）以及针对它们的解决方案：

### tabBar图标问题 
复制代码

    在 设置小程序原生的底部tabBar 时，，遇到了第一个问题：在将设计师给我的图标icon路径设置准确的情形下，， 开发者工具上的tabBar的图标总是会很大，，并且险些占满了整个高度 ，，相当难看，，搜了许多博客都没有找到解决步伐，，时代还实验了自己实现tabBar，，可是在看到那令人呕呕呕的效果之后，，我照旧放弃了，，又回到原生的tabBar，，然后静下心来想了想，，最后在比照github上的一些mpvue的项目之后，，发明原来是图标icon的问题，，最后乐成解决： 就是icon尺寸坚持稳固，，然后周围留出合适的透明（？？？？？）空缺 ...很简朴有木有？？？？？就这铺张我许多脑细胞，，原谅我的愚钝（智障脸）。。。。。。虽然了，，原生的tabBar着实尚有一个问题就是，， tabBar的问题文字在真机上会离底部特殊特殊近 ，，这个我没找到解决步伐，，除了自己实现tabBar。。。。。。

### 详情页数据保存之前旧数据的问题
复制代码

    这个问题我想许多同砚都遇到过了，，并且我看到mpvue github上的issues内里有许多人都遇到了这个问题并且都在持续关注，，足以说明这是个痛点问题，，谁让它会影响小程序的用户体验呢。。。。。。到现在为止看到的较量统一的解决步伐就是：在（详情）页面onLoad的时间，，将要在本页面展示的数据初始化并且举行新的赋值，，举:chestnut:如下：

<template>
    <html-text :text="htmltext"></html-text>
</template>
<script>
    import htmlText from xxxxx
    export default {
        components: {
            htmlText
        },
        data () {
            return {
                htmltext: ''
            }
        },
        onLoad () {
            this.htmltext = ''
            this.$http.get('xxxxxxxx').then((res) => {
                this.htmltext = res.htmltext
            })
        }
    }
</script>
复制代码

    其他数组或者工具类型的处理可能会贫困一些，，可是要领类似，，在数据请求返回之前的这段时间内不想留空缺尬对用户的话就自己做一些loading，，总是要强过用户先面临旧数据再一闪跳到新数据的体验。。。。。。

### created钩子函数在项目初始化时就所有执行的问题  
复制代码

    这个我想应该是mpvue的一个bug吧？？？？？该钩子函数在页面内照旧不要随便用的好。。。。。。

### 现在mpvue关于重大富文本的支持现在性能较差的问题  
复制代码

### 微信原生的路由跳转navigateTo(),redirectTo(),navigateBack(),switchTab()，，reLaunch()等，，在真机上的体现较为怪异
复制代码

    关于参数的转达，，我也遇到过类似于旧数据的问题，，最后不得已借助于vuex才得以解决。。另外小程序的页面栈个数着实有限，，以是在开发时一定要注重页面栈的治理。。

### onShow()的使用要注重
复制代码

    要记得该钩子函数里的js代码不但是刚进入页面时会执行，，在息屏后再次点亮后也将会执行。。

关于mpvue的坑突然能想起来的未几了，，现在就先写这么多，，后面想起来了再来更新吧。。

Flyio的使用

    在小程序的开发中，，并没有使用小程序原生的wx.request()来举行数据交互，，而是选择了mpvue文档里推荐使用的Flyio，，Flyio的介绍就未几做介绍，，打斗可以自己看文档，，这里我主要说一下的 请求和响应阻挡器的结构 ：

    文档里着实有很详细的介绍以及代码，，可是我凭证代码写下来之后在遇到登录失效的问题时并没有凭证预想的解决：先锁住请求然后重新请求拿到新的cookie之后再重新举行之前的请求，，再和其他人讨论之后使用promise解决了这一问题，，详细可见代码：

src/api/ajax.js:

/**
 * http请求阻挡器
 */
const Fly = require('flyio/dist/npm/wx')
const config = require('./config')

const ajaxUrl =
  process.env.NODE_ENV === 'development'
    ? config.Host.development
    : process.env.NODE_ENV === 'production'
      ? config.Host.production
      : config.Host.test
      
let fly = new Fly()
let loginFly = new Fly()
// 界说公共headers
const headers = {
  ...
}
Object.assign(fly.config, {
  headers: headers,
  baseURL: 'xxxxxx',
  timeout: 10000,
  withCredentials: true
})
loginFly.config = fly.config
// session失效后外地重新登录
const login = () => {
  return new Promise((resolve, reject) => {
    wx.login({
      success: res => {
        let loginParams = {
          ...
        }
        loginFly.post('/api/locallogin/url', loginParams).then(d => {
          if (d.headers && typeof d.headers['set-cookie'] !== 'undefined') {
            // 更新session
            wx.setStorageSync('sessionid', d.headers['set-cookie'])
          }
          resolve()
        }).catch(error => {
          log(error)
          reject(res.data)
        })
      },
      fail: res => {
        console.error(res.errMsg)
      },
      complete: res => {}
    })
  })
}
// 请求阻挡器
fly.interceptors.request.use(request => {
  if (wx.getStorageSync('sessionid')) {
    request.headers.cookie = wx.getStorageSync('sessionid')
  }
  return request
})
// 响应阻挡器
fly.interceptors.response.use(
  response => {
    // session已经失效，，需要重新登录小程序
    if (response.data.errCode === 100009) {
      // log('session失效，，凭证之前存储在外地的用户信息重新请求session...')
      // 锁定响应阻挡器
      fly.lock()
      return login().then(() => {
        fly.unlock()
        // log(`重新请求：path:${response.request.url}，，baseURL:${response.request.baseURL}`)
        return fly.request(response.request)
      }).catch(err => {
        log(err)
      })
    } else {
      return response.data.data
    }
  },
  err => {
    log('error-interceptor', err)
    if (err.status) {
      wx.showToast({
        title: '泛起未知过失',
        icon: 'none',
        duration: 3000
      })
    }
  }
)
export default fly
复制代码

vuex的使用

    由于是生涯购物类小程序，，涉及到 购物车 + 地点选择 等较为重大的逻辑，，许多地方都需要数据共用，，在本期项目中vuex起了很大的作用，，由于模？？？？榻隙，，若是将所有数据写在一个文件里无疑会为后期维护带来重大难题，，以是将各模？？？？榈氖莸ザ阑中丛诟髯缘奈募里，，这样整体流程就清晰了许多，，下面是划分模？？？？榈闹魑募的代码

src/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

import modules1 from './modules/modules1'
import modules2 from './modules/modules2'
import modules3 from './modules/modules3'
...

Vue.use(Vuex)

export default new Vuex.Store({
  // 做模？？？？榛,每个功效一个store.js文件,然后统一在这边引入
  modules: {
    modules1,
    modules2,
    modules3,
    ...
  }
})
复制代码

src/store/modules/modules1.js:

import api from '@/api' // actions里请求用到
const state = {
    aaaa,
    ...
}
const getters = {
    aaaa (state) {
        return state.aaaa
    },
    bbbb (state, getters, rootState) {
        return getters.aaaa
    },
    ...
}
// actions里可举行异步操作
const actions = {
    async anExample ({state, getters, dispatch, commit}, {params}) {
        let res = await api.requestFunction({params})
        ...
        return res
    },
    ...
}
const mutations = {
    setStateX (state, Y) {
        state.X = Y
    },
    ...
}
export default {
  namespaced: true, // 很主要
  state,
  getters,
  actions,
  mutations
}
复制代码

在.vue文件中挪用

src/pages/xxx.vue

<script>
import { mapState, mapGetters } from 'vuex'
export default {
   computed: {
        // 挪用getters
        ...mapGetters('modules', [
            'aaaa',
            'bbbb'
        ]) 
    },
    methods: {
        // 挪用action
        funcA () {
            this.$store.dispatch('modules1/anExample', {params}).then(res => {
                ...
            })
        },
        // 挪用mutation
        funcB () {
            this.$store.commit('modules1/setStateX', Y)
        }
    }
}
</script>
复制代码

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。通过拖拽、拼接模？？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。更多小程序市肆请审查：小程序市肆