mpvue開發小程序——項目初始化及實現受權登陸

時間 2020-07-20

標籤 mpvue 開發程序項目初始化實現受權登陸简体版

原文原文鏈接

mpvue

mpvue是一個使用vue.js開發小程序的框架。其官網http://mpvue.com/ 的介紹是，mpvue框架基於Vue.js核心，mpvue修改了Vue.js的runtime和compiler實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套Vue.js開發體驗。css

使用mpvue框架開發小程序，可以直接使用vue語法進行開發。html

Vant Weapp

Vant Weapp是一套小程序UI組件庫，可使用這個UI庫封裝好的一些組件來實現某些功能，相似element組件的引入使用。vue

flyio

github：https://github.com/wendux/fly
Flyio幫助文檔：https://wendux.github.io/dist...
如官網所說，Fly.js是一個支持全部JavaScript運行環境的基於Promise、支持請求轉發的http請求庫，它可最大限度地在多個端上實現代碼複用。
其擁有的特色：
一、提供統一的PromiseAPI
二、瀏覽器環境下很是輕量
三、支持多種JavaScript運行環境
四、支持請求/響應攔截器
五、自動轉換JSON數據
六、支持切換底層 HTTP Engine，可輕鬆適配各類運行環境
七、瀏覽器端支持全局Ajax攔截
八、H5頁面內嵌到原生APP時，支持將HTTP請求轉發到Native，支持直接請求圖片node

本次搭建的小程序環境，將使用flyio這個http請求庫來實現數據的請求，目前用到的方法爲get、post。webpack

二者的使用示例在官網幫助文檔有示例：
git

項目初始化

一、搭建mpvue腳手架
基於mpvue-quickstart模版建立新項目
vue init mpvue/mpvue-quickstart one_hour_appgithub

二、打開並跑起項目
新建的項目打開，dist文件夾還沒有存在
web

跑起項目
cd one_hour_app
npm run dev
這樣跑起來後項目中便多了一個dist文件夾，裏面有個wx文件夾
vue-router

這個wx文件夾就是要導入到微信開發者工具中的文件。
安裝微信開發者工具，打開微信官網文檔頁面可下載：https://developers.weixin.qq....npm

安裝好微信開發者工具後點擊導入項目

彈窗內輸入導入的目錄

目錄就是剛纔說的那個在one_hour_app項目中npm run dev以後生成的dist下的wx。AppID的獲取，須要先在微信公衆平臺註冊，而後打開開發-開發設置找到。

導入成功後顯示這樣

這樣，就能夠在編輯器寫咱們的代碼，而後在微信開發者工具裏面能夠像瀏覽器同樣查看頁面效果。

查看項目vue文件能夠發現，咱們基本上能夠像寫vue同樣寫裏面的vue文件。

以後對項目結構進行刪減，把本來提供的那些沒用到的文件先刪除。保留一個架構。開發主要關注的是src這個目錄。
statics裏面的images、tabs刪掉
src/main.js保持不變
src/App.vue裏的代碼刪掉，剩下

src/app.json對應到頁面路由pages配置、頭部windows的樣式和文字設置、腳部tabBar菜單配置，如今只保留以下：

src/utils文件先保持不變
src/components/card.vue刪掉
src/pages只留下index那塊的內容。接着是刪掉index.vue的東西。

修整完後，只剩下首頁

至此，基於mpvue的小程序項目架構已經搭建好了。

接着是css擴展語言scss、Vant Weapp UI組件庫、flyio、mpvue路由插件mpvue-router-patch。
一、安裝scss，sass-loader的版本是7.3.1，若是使用最新的版本會報錯，這裏安裝這個低版本的。

npm i -D sass-loader node-sass

測試下：

二、安裝Vant Weapp

npm i vant-weapp -S --production

打開Vant Weapp的官網找一個button的例子測試下，可是使用以前須要在app.json文件中配置引入組件。

因爲把這個組件安裝到了node_modules/vant-weapp/dist，

因此引入組件的路徑跟官網給的不同，須要手動修改一下路徑：

同時因爲咱們須要在微信開發者工具查看，而那裏導入了的是dist/wx，跟編輯器裏的目錄是不同的，因此爲了能在微信開發者工具正常顯示組件，還須要作一個配置，將整個node_modules/vant-weapp/dist目錄拷貝到dist/wx/vant-weapp/dist目錄，在wepack.base.conf.js添加以下配置：

if (/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

使用一個button組件測試下：
<van-button type="primary">主要按鈕</van-button>

這樣組件就成功引入了，並且也能夠看到剛纔那個拷貝目錄的配置也生效了，能夠看到vant-weapp目錄已在wx裏生成。

三、安裝flyio、mpvue-router-push

npm i -S flyio
npm i -S mpvue-router-patch

如今用不到這個路由插件，先安裝着放着。

接着是使用flyio來實現小程序受權登陸的請求。

首先在utils裏建立request.js用來封裝flyio的請求。

// 初始化flyio請求
function createFly () {
  if (mpvuePlatform === 'wx') {
    const Fly = require('flyio/dist/npm/wx')
    return new Fly()
  } else {
    return null
  }
}

// 處理get請求、post請求，
//若是是post，就把get改爲post就行，這裏爲了節省篇幅，省去了post的那段代碼
export function get (url, params = {}, showErr = true) {
  const fly = new createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.get(url, params).then(response => {
        const data = (response && response.data) || {}
        if (data.error_code === 0) {
          resolve(response)
          console.log(response)
        } else {
          if (showErr) {
            mpvue.showToast({
              title: data.msg || '請求失敗',
              icon: 'none',
              duration: 1500
            });
          }
          reject(response)
        }
      }).catch(err => {
        console.log(err)
      })
    })
  }
}

若是遇到了 TypeError: __webpack_require__(...) is not a function這樣的問題，就關閉微信開發者工具，刪除dist包，再從新npm run dev跑一下，從新打開微信開發者工具應該就沒問題了。

接下來是用戶受權的內容。

受權登陸

首頁的展現，須要調用mpvue.getSetting獲取用戶的當前設置。已受權就展現正常頁面，未受權就展現auth.vue受權登陸頁面。

未受權的狀態，當用戶贊成受權使用的時候，這時首頁就會變成正常的頁面，同時，須要獲取用戶的信息userInfo。

在成功獲取了用戶信息以後，須要使用存儲器mpvue.setStorageSync把它存儲起來供以後須要的時候使用getStorageSync來獲取。這時會存在兩種狀況，一種是已存在openId的狀況，另外一種是還沒獲取openId的狀況。

當未取到openId時，須要調用接口獲取openId，而調用這個接口須要得到code，這個code能夠經過mpvue.login API獲取到。當取得code以後就調用獲取openId的接口，返回openId並存儲起來。取得openId後，就能夠把這個openId做爲參數，傳給獲取首頁數據的接口。

當已經取得openId時，就直接調用首頁接口數據並傳openId做爲接口的參數。

在此以後，須要調用register註冊接口，調用這個接口可以把用戶的行爲數據存儲在後臺，辨別不一樣的用戶。

流程示意圖：

auth.vue組件主要的按鈕事件：

<button class="auth-btn" 
              open-type="getUserInfo"
              @getuserinfo="getUserInfo">受權登陸</button>

getUserInfo () {
      this.$emit('getUserInfo')
    }

src/api/index.js用來存放接口

import { get, post } from "@/utils/request.js"
const API_BASE = '後臺接口前綴'

export function getOpenId (params) {
  return get(`${API_BASE}/openId/get`, params)
}

export function getHomeData (params) {
  return get(`${API_BASE}/book/home/v2`, params)
}

export function register (params) {
  return post(`${API_BASE}/user/register`, params)
}

src/api/wechat.js用來存放微信平臺相關的API

import { getOpenId } from '@/api'
const APP_ID = '填寫微信公衆平臺的App_ID'
const SECRET = '填寫微信公衆平臺的secret'

// 請求getSetting獲取用戶當前的受權
export function getSetting (auth, onSuccess, onFail) {
  mpvue.getSetting({
    success (res) {
      if (res.authSetting[`scope.${auth}`]) {
        onSuccess(res)
      } else {
        onFail(res)
      }
    },
    fail (res) {
      console.log(res)
    }
  })
}

// 獲取用戶信息
export function getUserInfo (onSuccess, onFail) {
  mpvue.getUserInfo({
    success (res) {
      onSuccess(res)
      console.log(res)
    },
    fail (res) {
      onFail(res)
    }
  })
}

// 獲取openId
export function getUserOpenId (callback) {
  mpvue.login({   // 調用login API 得到code
    success (res) {
      console.log(res)
      const { code } =  res // 這個code是獲取openId的前提
      getOpenId({ code, appId: APP_ID, secret: SECRET }).then(response => {
        const { openid } = response.data.data
        mpvue.setStorageSync('openId', openid)
        callback && callback(openid)
      }).catch(err => {
        console.log(err)
      })
    },
    fail (res) {
      console.log(res)
    }
  })
}

index.vue頁面：

<template>
  <div>
    <div v-if="isAuth">
      <div class="index">首頁</div>
      <van-button type="primary">主要按鈕</van-button>
      <div>
        獲取userInfo示例：
        <div>
          {{ userInfo.nickName }}
        </div>
        獲取homeData數據示例：
        <div>{{ homeData.hotSearch && homeData.hotSearch.num }}</div>
      </div>
    </div>
    <auth v-if="!isAuth" @getUserInfo="init" />
  </div>
</template>

import { get, post } from '@/utils/request'
import Auth from '@/components/base/auth.vue'
import { getHomeData, register } from '@/api'
import { getSetting, getUserInfo, getUserOpenId } from '@/api/wechat'

data () {
    return {
      isAuth: false,
      userInfo: {},
      homeData: {}
    }
  },
  mounted () {
    this.init()
  },

// 獲取首頁數據
getIndexData (openId, userInfo) {
    getHomeData({ openId }).then(response => {
        console.log('getHomeData-----', response)
        this.homeData = response.data.data
    })
},

// 在得到受權信息後調用以得到用戶信息
getUserInfoData () {
    const onCompleteGetOpenId = (openId, userInfo) => {
        this.getIndexData(openId, userInfo)  // 獲取首頁數據
        register({ openId, platform: mpvuePlatform, ...userInfo })  // 註冊
    } 
    getUserInfo( // 獲取用戶信息
        (res) => {
            const { userInfo } = res
            this.userInfo = userInfo
            mpvue.getStorageSync('userInfo', userInfo)
            const openId = mpvue.getStorageSync('openId')
            if (!openId || openId.length === 0) { // 未存在openId
                getUserOpenId((openId) => { // 須要請求接口得到
                    onCompleteGetOpenId(openId, userInfo)
                })
            } else {
                onCompleteGetOpenId(openId, userInfo) // 已存在openId
            }
        },
        (res) => {
            console.log(res)
        }
    )
}

// 一開始就須要獲取受權信息，mounted裏調用
init () {
    getSetting(
        'userInfo',
        (res) => {
            this.isAuth = true
            console.log(res)
            this.getUserInfoData()
        },
        (res) => {
            this.isAuth = false
            console.log(res)
        }
    )
}

最後放上受權的過程示意圖：