乾貨分享：vue2.0做移動端開發用到的相關插件和經驗總結

最近一直在做移動端微信公衆號項目的開發，也是我首次用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
      }
    }
</script>

vue 項目中常用的圖片引入方式

1. 在img標籤中使用圖片

data () {
    return {
        img: require('path/to/your/source')
    }
}

然後在template中：

<img :src="img" />

1. 以背景圖的方式使用圖片

data () {
    return {
        img: require('path/to/your/source')
    }
}

<div :style="{backgroundImage: 'url(' + img + ')'}"></div>

或者直接在css中定義

background-image: url('path/to/your/source');

微信api在vue項目中的使用：

• vue2實現微信分享坑點和經驗 ；

官方網址：微信公衆平臺技術文檔/微信JS-SDK說明文檔

當然要進行微信公衆號開發，前期是要經過用戶註冊並綁定相關的賬號，纔會得到微信官網給出的相關的權限，纔可以進行後續的開發流程及api的調用，主體步驟請參見微信公衆號技術文檔。我在這裏，只是介紹註冊流程走完之後，如何進行api的調用。

由於在做微信公衆號vue2.0前端項目開發，根據產品需要，項目中有一些自定義分享的功能和設計；由於微信自帶的分享是一個比較普通，是以它自己的分享機制，只是對某個頁面進行通常的呈現。自定義分享，就需要我們調用微信分享api,進行自定義配置。

分享到微信好友和QQ好友，效果如圖：

分享到微信朋友圈，效果如圖：

開發步驟如下：

1、在index.html中引入jweixin-1.2.0.js；

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2、相關微信api配置文件utils/wx.js,如下：

import fetch from "./fetch";
/**
  * baseUrl:服務器地址
  * shareOosImg：分享默認的圖標
  * wechatId：申請成功的wechatId
  **/
import { baseUrl,shareOosImg,wechatId } from "@/utils/env"; 

/**
  * 獲取微信端簽名，時間戳等信息
  */
export const getCompactHouseList = (reqData) => fetch("/v2/cotton/user/get_wechat_authorize", reqData);

export function setWxConfig(link, title, desc, pic) {
    let url = window.location.href.split("#")[0];
    // 公衆號申請流程走完之後，官方會給給出一個"wechatId",通過這個參數去請求我們的後臺接口，就會得到相關已經配置好的信息。
    getCompactHouseList({ "wechatId": wechatId, "url": url }).then((res) => {
        if (res.status.code == 200) {
            let wxConfigObj = res.result.parment;
            let myLink = link ? link : "";
            let myTitle = title ? title : "小愛科技";
            let Mydesc = desc ? desc : "驚喜多多!優惠多多!";
            let mypic = pic ? pic : shareOosImg;
            wxConfig(wxConfigObj, myLink, myTitle, Mydesc, mypic);
        }
    }).catch((err) => {
        console.log(err);
    });
};

function wxConfig(wxConfigObj, link, title, desc, pic) {
    // 進行初始化配置。
    wx.config({
        debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
        appId: wxConfigObj.appid, // 必填，公衆號的唯一標識
        timestamp: wxConfigObj.timestamp, // 必填，生成簽名的時間戳
        nonceStr: wxConfigObj.noncestr, // 必填，生成簽名的隨機串
        signature: wxConfigObj.signature, // 必填，簽名
        jsApiList: ["checkJsApi","onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ","chooseWXPay", "chooseImage" ] // 必填，需要使用的JS接口列表
    });
    wx.ready(() => {
           //分享到朋友圈
        wx.onMenuShareTimeline({
            title: title, // 分享標題
            link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: pic, // 分享圖標
            success: function () {
                // alert("分享朋友圈成功");
            }
        });
               // 分享給微信朋友
        wx.onMenuShareAppMessage({
            title: title, // 分享標題
            desc: desc, // 分享描述
            link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
            imgUrl: pic, // 分享圖標
            type: "", // 分享類型,music、video或link，不填默認爲link
            dataUrl: "", // 如果type是music或video，則要提供數據鏈接，默認爲空
            success: function () {
                // 用戶點擊了分享後執行的回調函數
                //alert("分享朋友成功");
            }
        });
                // 分享到QQ
                wx.onMenuShareQQ({
                        title: title, // 分享標題
                        desc: desc, // 分享描述
                        link: link, // 分享鏈接
                        imgUrl: pic, // 分享圖標
                        success: function () {
                        // 用戶確認分享後執行的回調函數
                        },
                        cancel: function () {
                        // 用戶取消分享後執行的回調函數
                        }
                });
        wx.checkJsApi({
            jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
            success: function(res) {
                console.log(res);
            // 以鍵值對的形式返回，可用的api值true，不可用爲false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });
    });
    wx.error(() => {
    });
};

export function chooseWXPay(data, This) {// 支付
    wx.chooseWXPay({
        timestamp: data.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
        nonceStr: data.nonceStr, // 支付簽名隨機串，不長於 32 位
        package: data.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
        signType: data.signType, // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
        paySign: data.paySign, // 支付簽名
        success: function (res) {
            This.$router.push({ path: "/myReserve", query: { "reserve": "reservation" } });
        }
    });
};

//拍照或從手機相冊中選圖接口
export function chooseImage(callback) {
    wx.chooseImage({
        count: 6, // 默認9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function (res) {
            callback(res);
        }
    });
}

3、在main.js中引用如下：

import Vue from "vue";
import * as wx "@/utils/wx";
Vue.use(wx);

3、頁面中引用分享方法

注意：如果這個頁面，我們希望分享出去的內容，是按產品設計的內容，就需要在
方法中調用分享方法；如果我們不關心這個頁面的分享的內容，我們可以不用調用配置好的分享方法，默認爲微信自帶的分享。

this.wx.setWxConfig(`${baseUrl}/tuijianDetail`,"我在小愛科技等你來~","驚喜多多！優惠多多！推薦好友關注有紅包~");

這樣使用微信右上角的分享功能，成功分享出去之後，就可以看到想要的內容了。

• vue2實現微信支付坑點和經驗；

同理，微信支付，需要調取微信支付api。由於微信支付api,是在我們點擊按鈕時觸發，所有就不需要寫在 wx.ready(() => {}）裏面了。

1. 相同的方法定義wx.js中：

export function chooseWXPay(data, This) {// 支付
    wx.chooseWXPay({
        timestamp: data.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
        nonceStr: data.nonceStr, // 支付簽名隨機串，不長於 32 位
        package: data.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
        signType: data.signType, // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
        paySign: data.paySign, // 支付簽名
        success: function (res) {
            This.$router.push({ path: "/myReserve", query: { "reserve": "reservation" } });
        }
    });
};

1. 頁面中調用如下：

this.wx.chooseWXPay(res.result.list,This);

支付成功之後，通過路由跳轉到其他頁面；

注意：微信api的成功驗證，必須要外網地址（能夠訪問的服務器地址），如果使用自己本機的地址，放到手機上測試，是無法成功的。

百度地圖api在vue項目中的使用:

官方網址、示例demo、參考類。

由於最近項目的開發中，要使用到地圖進行相關的城市區域，區域中房源數據的顯示，因此選擇了使用百度地圖。

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。
百度地圖JavaScript API支持HTTP和HTTPS，免費對外開放，可直接使用。接口使用無次數限制。

• vue2.0項目中如何使用百度地圖api

使用api之前，要註冊百度賬號，申請成爲百度開發者，獲取服務密鑰（ak）,才能使用相關的服務功能。

開發步驟如下：

1、申請百度賬號和ak，點我申請

2、準備頁面
根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規範的文檔聲明：

 <!DOCTYPE html>

3、適應移動端頁面展示

下面我們添加一個meta標籤，以便使您的頁面更好的在移動平臺上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

4、設置容器樣式
設置容器樣式大小，使地圖充滿整個瀏覽器窗口：

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style> 

5、在index.html中引用百度地圖API文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>

6、創建地圖容器元素
地圖需要一個HTML元素作爲容器，這樣才能展現到頁面上。這裏我們創建了一個div元素。

<div id="container"></div> 

7、創建地圖實例
位於BMap命名空間下的Map類表示地圖，通過new操作符可以創建一個地圖實例。其參數可以是元素id也可以是元素對象。

var map = new BMap.Map("container"); 

8、設置中心點座標

var point = new BMap.Point(116.404, 39.915);

9、地圖初始化，同時設置地圖展示級別
在創建地圖實例後，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點座標和地圖級別。 地圖必須經過初始化纔可以執行其他操作。

map.centerAndZoom(point, 15);  

至此，我們就快速創建了一張以天安門爲中心的地圖~

• vue2如何給地圖添加房源覆蓋物；

如圖：

我們需要地圖初始化完成之後，自定義相關的方法，來添加覆蓋物；

根據官方文檔，自定義標註或地圖覆蓋物。具體的實現代碼，大家可以根據官方api進行開發。

1、定義構造函數並繼承Overlay
首先您需要定義自定義覆蓋物的構造函數，通過構造函數參數可以傳遞一些自由的變量。設置自定義覆蓋物對象的prototype屬性爲Overlay的實例，以便繼承覆蓋物基類。

// 定義自定義覆蓋物的構造函數  
function SquareOverlay(center, length, color){
    this._center = center;
    his._length = length;
    this._color = color;
}
// 繼承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();

2、初始化自定義覆蓋物

實現initialize方法，當調用map.addOverlay方法時，API會調用此方法。
當調用map.addOverlay方法添加自定義覆蓋物時，API會調用該對象的initialize方法用來初始化覆蓋物，在初始化過程中需要創建覆蓋物所需要的DOM元素，並添加到地圖相應的容器中。這裏我們選擇添加在容器markerPane上。

// 實現初始化方法  
SquareOverlay.prototype.initialize = function(map){
    // 保存map對象實例
    his._map = map;
    // 創建div元素，作爲自定義覆蓋物的容器
    var div = document.createElement("div");
    div.style.position = "absolute";
    // 可以根據參數設置元素外觀
    div.style.width = this._length + "px";
    div.style.height = this._length + "px";
    div.style.background = this._color;
    // 將div添加到覆蓋物容器中
    map.getPanes().markerPane.appendChild(div);
    // 保存div實例
    this._div = div;
    // 需要將div元素作爲方法的返回值，當調用該覆蓋物的show、
    // hide方法，或者對覆蓋物進行移除時，API都將操作此元素。
    return div;
}

3、繪製覆蓋物

實現draw方法。
到目前爲止，我們僅僅把覆蓋物添加到了地圖上，但是並沒有將它放置在正確的位置上。
您需要在draw方法中設置覆蓋物的位置，每當地圖狀態發生變化（比如：位置移動、級別變化）時，API都會調用覆蓋物的draw方法，用於重新計算覆蓋物的位置。
通過map.pointToOverlayPixel方法可以將地理座標轉換到覆蓋物的所需要的像素座標。

// 實現繪製方法   
SquareOverlay.prototype.draw = function(){    
// 根據地理座標轉換爲像素座標，並設置給容器    
   var position = this._map.pointToOverlayPixel(this._center);    
   this._div.style.left = position.x - this._length / 2 + "px";    
   this._div.style.top = position.y - this._length / 2 + "px";    
}

4、移除覆蓋物
當調用map.removeOverlay或者map.clearOverlays方法時，API會自動將initialize方法返回的DOM元素進行移除。

map.removeOverlay();

5、添加覆蓋物
您現在已經完成了一個完整的自定義覆蓋物的編寫，可以添加到地圖上了。

// 初始化地圖  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定義覆蓋物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);

• 如何給地圖添加自定義定位控件並更換控件的圖標；

給地圖添加自定義控件，需要用到控件類：ZoomControl，使用方法如下：

addControlLocation(){
    var that = this;
    // 定義一個控件類，即function    
    function ZoomControl(){    
        // 設置默認停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;    
        this.defaultOffset = new BMap.Size(20, 50);    
    }    
    // 通過JavaScript的prototype屬性繼承於BMap.Control   
    ZoomControl.prototype = new BMap.Control();
    ZoomControl.prototype.initialize = function(map){    
        // 創建一個DOM元素   
        var img = document.createElement("img");    
        img.setAttribute('src',that.locationImg)
        // 設置樣式    
        img.style.cursor = "pointer";
        // 綁定事件，獲取當前城市    
        img.onclick = function(e){...   }    
        // 添加DOM元素到地圖中   
        map.getContainer().appendChild(img);    
        // 將DOM元素返回  
        return img;    
    }
    // 創建控件實例    
    var myZoomCtrl = new ZoomControl();    
    // 添加到地圖當中    
    this.mp.addControl(myZoomCtrl);
}

在地圖初始化完成後，調用addControlLocation()方法即可；

• 添加自定義 當前位置定位標註

如圖：

需要用到new BMap.Marker();設置圖標大小用 myIcon.setImageSize();

addCurrentMarker(){ // 添加自定義 當前位置定位標註
           var myIcon = new BMap.Icon(this.redLocation,{
               offset: new BMap.Size(10, 25), // 指定定位位置
               imageOffset: new BMap.Size(0, 0 - 10 * 25) // 設置圖片偏移
           });
           // myIcon.setStyle({width: '.666rem', height: '.666rem'});
           myIcon.setImageSize(new BMap.Size(60,60)); // 設置 圖標大小
           let point = new BMap.Point(this.currentPoint.lng,this.currentPoint.lat);  //  標註的中心點，應該是始終是用戶當前位置
           let marker = new BMap.Marker(point,{icon:myIcon});  // 創建Marker標註
           this.mp.addOverlay(marker);  // 添加當前定位點
       },

• 幾個常用的api(地圖縮放，拖拽，獲取當前位置)等功能的實現；

1. 地圖表面觸發點擊事件：

   this.mp.addEventListener("touchstart", () => {}）；

2. 地圖縮放事件：

   this.mp.addEventListener("zoomend", () => {}）；

3. 地圖拖拽事件：

this.mp.addEventListener("dragstart",()=>{}）；
this.mp.addEventListener("dragend",()=>{}）；

1. 獲取用戶當前位置(經緯度對象)：

export function getLocationData(fn) {
    let geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            fn(r.point);
        }
    });
}

1. 根據經緯度解析地址信息，分別返回省市區街等:

let gc = new BMap.Geocoder();//Geocoder地址編碼
gc.getLocation(item, function (rs) {   //getLocation函數用來解析地址信息，分別返回省市區街等 r.point裏有經緯度
        let addComp = rs.addressComponents;
        let province = addComp.province;//獲取省份
        let city = addComp.city;//獲取城市
});

項目實踐：基於vue2.0 +vuex+ element-ui後臺管理系統

歡迎加入討論組，一起來學習用vue,vuex,element,express,mongodb來構建後臺管理系統；

一起來用項目實戰加深自己對知識的理解。