vue开发小程序项目总结

最近全权负责一个小程序的前端开发工作，之前小程序使用原生技术开发过一版，当时由于进入项目组晚，且项目开发周期短，没有详细了解项目的各种情况，导致后期开发过程中出现各种各样的让人烦心的问题，开发过程很是吃力！经过此次，愈发觉得项目开发前的准备工作乃是项目开发必不可少的。好在，现在甲方允许公司对小程序进行二期优化，这才有了此次的经验总结。

项目前期准备工作

有了第一版的开发经验，对项目有了较深的了解，在此简单说明一下。

项目是一个APP小程序，APP是甲方请的第三方公司开发的一个类似微信的内部员工使用的通讯APP。由于此公司没有对其他项目组进行有关小程序开发的培训工作，只有一些API说明文档和一个内嵌小程序【插件应用】的demo。况且本人所在项目组也没有类似架构师的人来负责这个项目，后台开发人员配合上也是很不给力，只愿意干自己手中的工作，对不是自己负责的工作，很是不上心。总而言之，此项目开发困难重重。

APP小程序是以SSO模式为登录方式。APP提供两种方式获取token值：前端js获取和后端jdk获取。本人负责的APP小程序就是前端获取token值得方式进行开发。在此唠叨一下，直接提供一个API来获取token，对开发小程序不是很方便？这种获取token的方式，真是不常见！这让我在怎么解决获取token的问题上，很是费了些力气。

简单说明一下前端js获取的方式
APP提供一个函数获取toekn，function getSSOToken(“APPID”,function(sso_token) {// 这里写调用sso_token的方法})

项目采用vue框架进行开发，使用vue-axios进行合API请求，使用vuex进行状态管理，vant组件开发页面。总之，项目采用vue+axios+vuex+vant进行开发。

项目开发过程中遇到的问题

1、怎样在vue项目中获取token，并写入vuex中？

解决方法
针对这个小程序获取token的方式，本人采用自定义函数的方式。简单的说，在index.html中把第三方提供获取token的函数封装一下，暴露在window对象下。

// index.html 
var getToken = function(APP_ID, callback) {
  // 第三方提供的获取token的函数
  // 之后就可以在vue文件中使用window.getToken()方式调用
  MXCommon.getSSOToken(APP_ID, callback)
}

2、怎么解决vuex中的变量，在刷新页面之后被初始化【持久化vuex中的变量】？

解决方法
使用vuex-persist插件，此插件需要在项目打包时转译成ES5，否则在ios和低版本下会有兼容问题

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
 
Vue.use(Vuex)
 
const store = new Vuex.Store<State>({
  state: {
    user: { name: 'Arnav' },
    navigation: { path: '/home' }
  },
  plugins: [new VuexPersistence().plugin]
})
 
export default store

// 转译此插件需要在vue.config.js配置文件中进行如此配置
// in your vue.config.js
module.exports = {
  /* ... other config ... */
  transpileDependencies: ['vuex-persist']
}

3、vant移动端样式自适应。

解决方法
此项目是基于vue-cli3+及vue2版本创建的。在项目根目录下新建postcss.config.js文件。键入以下代码。

//postcss.config.js
const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;
  return {
    plugins: {
      autoprefixer: {
        browsers: ['Android >= 4.0', 'iOS >= 8'],
      },
      'postcss-pxtorem': {
        rootValue: designWidth,
        propList: ['*'],
      },
    },
  }
};

4、移动端调试工具。

解决方法
相信vconsole是很多小伙伴选择的移动端调式工具，当然初期开始时，本人也是选择的是。但是开发过程中发现vconsole有个短板，无法查看network。在此，本人推荐一个更为方便的移动端调试工具eruda。使用起来也方便，只要在index.html引用就行。

<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
<script>eruda.init();</script>

5、使用数组map()方法循环【对象数组】会改变原数组。

相信很多小伙伴都跟我一开始都以为【map()方法不会改变原始数组】，其实这句话并不严谨，而应该是【当数组中元素是值类型，map()方法不会改变原数组；当数组是引用类型时，则是改变原始数组的】。如果你不想改变原始数组，可以深度复制原始数组，然后在使用map();也可以采用以下方法

// array: 原始数组；tempArray:新数组
let tempArray = array.map((item) => ({
  ...item,
  key: item.key,
  value: item.value,
}));

6、vue使用嵌套路由。

7、页面多列等高布局【flex布局】

8、vue小程序安卓、IOS浏览器兼容性。

9、vue-axios取消短时间内多次重复请求及切换路由取消上次pending请求。

//main.js
import axios from "axios";
let pending = []
let CancelToken = axios.CancelToken
let cancelPending = (config) => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() // 取消请求
        pending.splice(index, 1) // 移除当前请求记录
      }
    } else {
      item.Cancel() // 取消请求
      pending.splice(index, 1) // 移除当前请求记录
    }
  })
}
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.request.use(config => {
  cancelPending(config)
  config.cancelToken = new CancelToken(res => {
    pending.push({ 'UrlPath': config.url, 'params': config.params, 'Cancel': res })
  })

  return config;
}, error => {
  return Promise.reject(error)
})


axios.interceptors.response.use(
  response => {
    cancelPending(response.config)
    return response
  }, error => {
    console.log(error)
    return Promise.reject(error)
  }
)

Vue.prototype.$http = axios;
axios.defaults.baseURL = '/api/'

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/front-end/vue-applets.html