干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发，也是我首次用vue来开发移动端项目，前期积累的移动端开发经验较少。经过这个项目的锻炼，加深了对vue相关知识点的理解和运用，同时，在项目中所涉及到的微信api(微信分享，微信支付)，百度地图api(如何实例化地图，给地图添加自定义覆盖物，给地图添加自定义标注，对地图进行缩放，拖拽等)的相关使用，开阔了自己的知识眼界；现将我开发过程中积累的相关经验与大家进行分享，希望和大家一起学习和进步….

• vux：Vue 移动端 UI 组件库的使用；
• vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件；
• vuex：vue状态管理工具详细入门；
• async/await：异步神器来封装接口请求文件fetch.js
• vue 项目中的迭代判断技巧；
• vue 项目中常用的图片引入方式；
• 微信api在vue项目中的使用：
  1. vue2实现微信分享坑点和经验 ；
  2. vue2实现微信支付坑点和经验；
• 百度地图api在vue项目中的使用:
  1. vue2.0项目中如何使用百度地图api
  2. vue2如何给地图添加房源覆盖物；
  3. 如何给地图添加自定义定位控件并更换控件的图标；
  4. 如何给地图添加自定义当前位置定位标注
  5. 几个常用的api(地图缩放，拖拽，获取当前位置)等功能的实现；

VUX – Vue 移动端 UI 组件库的使用；

vux介绍：详细请参见官方文档。

由于是做微信公众号移动端项目，我们对比了几个vuejs的移动端UI库，知道vux是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面；虽然它属于个人维护，体验上需要一些改进。但项目中几个组件的使用，大大提升了开发效率。

使用方法如下：

• 安装- vux:

npm install vux --save

注意事项：

vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

• 以轮播组件swiper为例

如果你要使用的组件只是在当前页面中使用，我们可以只在当前页面中引入即可。如果在很多页面中都有使用，可以在main.js中以全局方式引用。使用组件方法如下：

<template>
    <swiper auto loop :interval="interval" :duration="duration" id="swiper-banner"
            class="swiper-banner"
            :height="height">  
        <swiper-item 
                class="swiper-demo-img"
                v-for="(item, index) in bannerList"
                :key="index">
                    <img :src="item.img">
        </swiper-item>
    </swiper>
 </template>

 <script>
   import { Swiper, SwiperItem } from "vux";

   export default {
        name: "swiper",
        data() {
            interval:4000,// 轮播停留时间
            duration:300// 切换动画时间
            height:"10.19rem", // 高度值
            bannerList:[
                {img: 'https://static.vux.li/demo/1.jpg',title: '送你一朵fua'},
                {img: 'https://static.vux.li/demo/5.jpg',title: '小花'}
            ]
        }
   }

 </script>

属性auto,默认为false，表示是否自动轮播；属性loop,默认为false，表示是否循环;

vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件

官方网址：vue-lazyload

介绍：
vue-lazyload主要应用于图片延迟加载。包含如下的特点：

• 小巧轻便，功能强大，易于使用
• 可以用于加载任何图像类型
• 支持Vue 1.0和Vue 2.0

理解图片延迟加载:

当某个网页中呈现的图片较多时，由于网络等原因，访问该网页时，所有的图片不会立马全部进行显示出来，会出现一定的网络延迟加载的现象，影响用户体验；但我们可以vue-lazyload插件来实现在图片加载的过程中，先显示出默认的加载图片，直到图片完全显示，默认图片消失，这样就会大大的提升用户体验。

使用方法如下：

1、通过npm安装

npm install vue-lazyload -s

2、在main.js中进行引用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预压高度的比例
  error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标
  loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标
  attempt: 1 // 图像尝试加载 次数
})

3、在组件中使用

<img v-lazy="item.picUrl" alt="">

4、实现效果以后，还可以根据API进行功能扩展。

相应的参数可参考官方API进行设置。

5、vue-lazyLoad文件整理，请参照：vue2-plugs-demo项目中src/components/LazyLoad/index.vue 和 src/main.js部分；；

vuex:vue状态管理工具详细入门；

vuex介绍：

详细介绍请参见官方网站。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
什么情况下我应该使用 Vuex？
如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
使用方法：

• 安装vuex:

npm install vuex --save

• 在mins.js中引用：

import Vuex from "vuex";
Vue.use(Vuex);

理解vuex的5个基本对象：

• state：存储状态。也就是变量；
• getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
• mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似。
• actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。
• modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

vue-cli中使用vuex的方式

一般来讲，我们都会采用vue-cli来进行实际的开发，在vue-cli中，开发和调用方式稍微不同。

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── index.js         # 模块集合
    ├── m1.js         # 模块1
    ├── m2.js         # 模块2

state.js示例：

const state = {
    name: 'weish',
    age: 22
};

export default state;

getters.js示例（我们一般使用getters来获取state的状态，而不是直接使用state）：

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type.js示例（我们会将所有mutations的函数名放在这个文件里）：

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js示例：

import * as types from './mutation-type.js';

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

actions.js示例（异步操作、多个commit时）：

import * as types from './mutation-type.js';

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

modules/m1.js示例,m2同理。（如果不是很复杂的应用，一般来讲是不会分模块的）：

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

modules/indes.js,将modules文件集中管理，如下：

import m1 from './m1';
import m2 from './m2';

export default {
  m1,
  m2
}

index.js示例（组装vuex）：

// 如果项目中，使用的状态管理操作非常频繁，可以将状态管理的对象进行细分，最后汇集之后集中管理；
import vue from 'vue'
import vuex from 'vuex'

import state from './state'
import * as getters from './getters'
import mutations from './mutations'
import actions from './actions'
import modules from './modules'

vue.use(vuex)

export default new vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

最后将store实例挂载到main.js里面的vue上去就行了

import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

在vue组件中使用时，我们通常会使用mapGetters、mapActions、mapMutations，然后就可以按照vue调用methods和computed的方式去调用这些变量或函数，示例如下：

import {mapGetters, mapMutations, mapActions} from 'vuex';

/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            name,
            age
        ])
    },
    methods: {
        ...mapMutations({
            setName: 'SET_NAME', // 映射 this.setName() 为 this.$store.commit('SET_NAME')
            setAge: 'SET_AGE'
        }),
        ...mapActions([
            nameAsyn // 将 this.nameAsyn() 映射为 this.$store.dispatch('increment')
        ])
    }
};

mapGetters，mapMutations，mapActions的使用，相当与将已经定义好的状态管理数据（变量，函数）引用到vue对象的computed和methods中，我们在页面中，只管使用就行；使用方式，如：
获取computed中的变量：

this.name;
this.age;

获取methods中的变量：

this.setName(this.name)；// 映射为 `this.$store.commit('setName', this.name)`
this.setAge();
this.nameAsyn();

总结：

1、如果项目中，使用的状态管理操作非常频繁，可以将状态管理的对象进行细分，如区分不同的对象文件夹（state,getters,mutations,actions,modules）,最后汇集之后集中管理；

2、如果项目中使用的状态管理的变量较少时，可以采用一个文件进行集中管理；

vuex项目整理，请参照：vue2-plugs-demo项目中src/store 和 src/store2部分；

async/await：异步神器来封装接口请求文件fetch.js

在前后端分离的项目开发中，前端人员如果要通过接口获取后端数据时，我们一般会独立封装自己的接口异步请求方法，以便在整个项目中都能够轻松的进行引用；

项目中使用async/await 来处理异步请求，封装的方法（utils/fetch.js）如下:

export default async (url = '', data = {}, type = 'POST', method = 'fetch') => {
  type = type.toUpperCase()

  // get请求需要进行url和参数的重新拼接
  if (type === 'GET') {
    let dataStr = '' 
    Object.keys(data).forEach(key => {
      dataStr += key + '=' + data[key] + '&'
    })

    if (dataStr !== '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
      url = url + '?' + dataStr 
    }
  }
  // 如果支持fecth语法(es7语法)并且请求方式为'fetch'
  if (window.fetch && method === 'fetch') {
    let requestConfig = {
      credentials: 'include',
      method: type,
      headers: {
        'Accept': 'application/json;charset=UTF-8',
        'Content-Type': 'application/json;charset=UTF-8'
      },
      mode: 'cors',
      cache: 'force-cache'
    }
    // 'POST'请求，将相关的请求参数添加到'body'中。
    if (type === 'POST') {
      Object.defineProperty(requestConfig, 'body', {
        value: JSON.stringify(data)
      })
    }
    // await fetch,以同步的方式将数据（json形式）进行返回，前端通过变量接收即可；
    try {
      const response = await fetch(url, requestConfig)
      const responseJson = await response.json()
      return responseJson
    } catch (error) {
      throw new Error(error)
    }
  } else { // 如果先浏览器不支持fetch语法，则用es6中promise()来封装异步接口请求；
    return new Promise((resolve, reject) => {
      let requestObj
      if (window.XMLHttpRequest) {
        requestObj = new XMLHttpRequest()
      } else {
        let ActiveXObject = window.ActiveXObject
        requestObj = new ActiveXObject()
      }

      let sendData = ''
      if (type === 'POST') {
        sendData = JSON.stringify(data)
      }
      requestObj.open(type, url, true)
      requestObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
      requestObj.send(sendData)

      requestObj.onreadystatechange = () => {
        if (requestObj.readyState === 4) {
          if (requestObj.status === 200) {
            let obj = requestObj.response
            if (typeof obj !== 'object') {
              console.log(obj)
              obj = JSON.parse(obj)
            }
            resolve(obj)
          } else {
            reject(requestObj)
          }
        }
      }
    })
  }
}

如登录界面的用到的api,统一管理在login/api/index.js中，如下：

import fetch from "@/utils/fetch";

/**
* 登录
*/
export const login = (reqData) => fetch("/v2/cotton/user/app_login", reqData);

api统一管理完成之后，我们需要在页面中进行调用，获取数据，方法如下：

import { getyancode, login } from "./api";
methods: {
        async login() {
            // 提交时，做验证；
            if (this.checkMobile() && this.checkMsgCode()) {
                this.loading.show = true;
                let reqData = {
                    phone: mutils.replaceAllSpace(this.telphone),
                    code: mutils.replaceAllSpace(this.yancode)
                };
        try{ // try{}catch(){}用于处理异常
          const res = await login(reqData);
          if (res.status.code == "200") {
             console.log('接口请求成功~');
          } else {
             console.log('接口请求失败~');
          }
        }catch(err){
          console.log(err)
        }
            }
        }
 }

通过异步接口请求，我们就可以获取到相关的数据，开始后续的操作了。
异步接口请求封装方式分析：
async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化。
async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，也就意味着该函数的执行不会阻塞后面代码的执行。如：

async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法，如：

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

执行结果：

虽然在后面，但是我先执行
hello world

async和await结合使用，await表示等待的意思，注意await 关键字只能放到async 函数里面。现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2。

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve(2 * num)
       }, 2000);
   } )
}

现在再写一个async 函数，从而可以使用await 关键字， await 后面放置的就是返回promise对象的一个表达式，所以它后面可以写上 doubleAfter2seconds 函数的调用。

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

现在调用testResult 函数

testResult();
结果为：60

当然我们在使用async/await来接口请求时，需要进行异常处理。它用的是try/catch 来捕获异常，把await 放到 try 中进行执行，如有异常，就使用catch 进行处理。

fetch.js文件整理，请参照：vue2-plugs-demo项目中utils/fetch.js 和 src/login部分；

vue 项目中的迭代判断技巧

比如我们有一个列表，我们希望能显示我们当前选中的那一个，如何实现呢？
基本思路是通过$index来判断是否是当前迭代对象，然后去增减class或者style来实现不同的样式。

<template>
  <ul>
    <!-- 方法1 class-->
    <li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li>

    <!-- 方法2 style-->
    <li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li>
  </ul>
</template>

<script>
  data () {
    return {
    list: ['a', 'b', 'c'],
    activeId: 0
    }
  }