摘要：最后寫(xiě)一個(gè)公用的樣式就可以使用了?，F(xiàn)在我們可以愉快的使用其開(kāi)發(fā)了，如果對(duì)開(kāi)發(fā)比較熟悉的話(huà)，完全遷移過(guò)來(lái)是沒(méi)有問(wèn)題的。

由于公司業(yè)務(wù)需求的需要，在這一周需要開(kāi)發(fā)小程序，加急看了下小程序的文檔，發(fā)現(xiàn)用其原生來(lái)編寫(xiě)程序不是很順手，公司前端用的技術(shù)棧是vue， 詢(xún)問(wèn)了谷哥和度娘發(fā)現(xiàn)大部分推薦了 wepy和 mpvue，對(duì)比了兩個(gè)框架，還是選用了 mpvue, 因?yàn)?mpvue 繼承自 vue.js，其技術(shù)規(guī)范和語(yǔ)法特點(diǎn)與 Vue.js 保持一致。

快速搭建 mpvue 目錄

// 全局安裝 vue-cli
$ npm install --global vue-cli
// 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart wx-mpvue-demo
// 安裝依賴(lài)
$ cd wx-mpvue-demo
$ npm install
// 啟動(dòng)構(gòu)建
$ npm run dev

一個(gè)簡(jiǎn)單的工程目錄就搭建完成了。

封裝自己的公用模塊

1.封裝Totast

由于小程序原生的消息提示實(shí)在是讓人崩潰，所以我們先自己來(lái)封裝下 totast， 在 util目錄新建 totast.js

class toast {
  static msg (title, {icon = 1}) {
    wx.showToast({
      title,
      icon: ["success", "none"][icon]
    })
  }
  static confirm ({title = "提示", content, callback}) {
    wx.showModal({
      title,
      content,
      success: function (res) {
        if (res.confirm) {
          callback(res.confirm)
        } else if (res.cancel) {
          console.log("用戶(hù)點(diǎn)擊取消")
        }
      }
    })
  }
}

export default toast

我們掛載到main.js中， 在組件里可以方便調(diào)用

import toast from "./utils/toast"
Vue.prototype.$totast = toast

2.封裝 publicRequest

小程序的網(wǎng)路請(qǐng)求不是很方便，我們也對(duì)其封裝一下。

import totast from "./toast"

const Authorization = "Bearer xxx"
class publicRequest {
  static get ({url, data = {}, isJson = false, hasToken = true, header}) {
    let hasNetWork = checkNetWork()

    if (!hasNetWork) {
      totast.msg("網(wǎng)路異常", {})
      return false
    }

    let contentType = isJson ? "application/json" : "application/x-www-form-urlencoded"
    let _authorization = hasToken ? {"Authorization": Authorization} : {}
    let _header = Object.assign({"content-type": contentType}, _authorization, header)
    wx.showLoading({title: "加載中..."})
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        header: _header,
        dataType: "json",
        method: "GET",
        data,
        success: (res) => {
          if (res.statusCode === 200) {
            resolve(res.data)
          }
        },
        fail: (error) => {
          totast.msg(error.errMsg, {})
          reject(error)
        },
        complete: res => {
          if (res.statusCode !== 200) {
            totastMessage({
              statusCode: res.statusCode,
              message: res.data.msg
            })
          }
          wx.hideLoading()
        }
      })
    })
  }
  static post ({url, data = {}, isJson = false, hasToken = true, header}) {
    let hasNetWork = checkNetWork()

    if (!hasNetWork) {
      totast.msg("網(wǎng)路異常", {})
      return false
    }
    let contentType = isJson ? "application/json" : "application/x-www-form-urlencoded"
    let _authorization = hasToken ? {"Authorization": Authorization} : {}
    let _header = Object.assign({"content-type": contentType}, _authorization, header)
    wx.showLoading({title: "加載中..."})
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        header: _header,
        method: "POST",
        data,
        dataType: "json",
        success: (res) => {
          resolve(res.data)
        },
        fail: (error) => {
          totast.msg(error.errMsg, {})
          reject(error)
        },
        complete: res => {
          if (res.statusCode !== 200) {
            totastMessage({
              statusCode: res.statusCode,
              message: res.data.msg
            })
          }
          wx.hideLoading()
        }
      })
    })
  }
}
const checkNetWork = function () {
  return new Promise(resolve => {
    wx.getNetworkType({
      success: res => {
        let networkType = res.networkType;
        if (networkType === "none" || networkType === "unknown") {
          resolve(false)
        } else {
          resolve(true)
        }
      },
      fail: () => {
        resolve(false)
      }
    })
  })
}
const totastMessage = function ({statusCode, message}) {
  switch (statusCode) {
    case 502:
      totast.msg("服務(wù)器異常", {})
      break
    default:
      totast.msg(message, {})
      break
  }
}
export default publicRequest

我們呢也對(duì)其掛載到 vue 上去。

import publicRequest from "./utils/publicRequest"
Vue.prototype.$http = publicRequest

3.掃一掃的調(diào)用

我們先公用出掃一掃

const handleScan = function () {
  return new Promise((resolve, reject) => {
    wx.scanCode({
      success: (res) => {
        console.log(res)
        resolve(res)
      },
      fail: error => {
        reject(error)
      }
    })
  })
}
export default handleScan

公用出來(lái)后掛載到我們的 vue 上后可以在組件里直接調(diào)用 this.$handleScan，如

methods: {
  async scanCodeInfo () {
    let goods = await this.$handleScan()
    console.log(goods)
    this.codeInfo = goods.result
  }
}

4.如何引入iconfont圖標(biāo)

因?yàn)樾〕绦虻膚xss文件的font-face的url不接受http地址作為參數(shù),但可以接受base64,因此需將字體文件下載后,轉(zhuǎn)換為base64，然后引用。
所以我們可以在阿里巴巴圖標(biāo)庫(kù)下載下來(lái)，將iconfont.ttf轉(zhuǎn)換。轉(zhuǎn)換地址：https://transfonter.org/

下載文件后解壓得到stylesheet.css文件，將此文件引入到項(xiàng)目。最后寫(xiě)一個(gè)公用的樣式:

.icon:after{
  font-family: "iconfont";
  font-weight: lighter;
  font-style: normal;
}

.icon-saoyisao:after { content: "e7c7"; }

.icon-hebingxingzhuang:after { content: "e61a"; }

就可以使用了。

現(xiàn)在我們可以愉快的使用其開(kāi)發(fā)了，如果對(duì) vue開(kāi)發(fā)比較熟悉的話(huà)，完全遷移過(guò)來(lái)是沒(méi)有問(wèn)題的。最后附上項(xiàng)目demo和原文地址
每個(gè)人都有第一次，哈哈~這就是我的第一次寫(xiě)文章，不到之處，望指正。