如何實(shí)現(xiàn)mpvue項(xiàng)目初始化及授權(quán)登錄

vue init mpvue/mpvue-quickstart one_hour_app

cd one_hour_app
npm run dev

npm i -D sass-loader node-sass

npm i vant-weapp -S --production

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: ['.*']
   }])
  ]
 })
}

<van-button type="primary">主要按鈕</van-button>

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

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

// 處理get請(qǐng)求、post請(qǐng)求，
//如果是post，就把get改成post就行，這里為了節(jié)省篇幅，省去了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 || '請(qǐng)求失敗',
       icon: 'none',
       duration: 1500
      });
     }
     reject(response)
    }
   }).catch(err => {
    console.log(err)
   })
  })
 }
}

<button class="auth-btn" 
       open-type="getUserInfo"
       @getuserinfo="getUserInfo">授權(quán)登錄</button>

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

import { get, post } from "@/utils/request.js"
const API_BASE = '后臺(tái)接口前綴'

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)
}

import { getOpenId } from '@/api'
const APP_ID = '填寫(xiě)微信公眾平臺(tái)的App_ID'
const SECRET = '填寫(xiě)微信公眾平臺(tái)的secret'

// 請(qǐng)求getSetting獲取用戶當(dāng)前的授權(quán)
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({  // 調(diào)用login API 獲得code
  success (res) {
   console.log(res)
   const { code } = res // 這個(gè)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)
  }
 })
}

<template>
 <div>
  <div v-if="isAuth">
   <div class="index">首頁(yè)</div>
   <van-button type="primary">主要按鈕</van-button>
   <div>
    獲取userInfo示例：
    <div>
     {{ userInfo.nickName }}
    </div>
    獲取homeData數(shù)據(jù)示例：
    <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()
 },

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

// 在獲得授權(quán)信息后調(diào)用以獲得用戶信息
getUserInfoData () {
  const onCompleteGetOpenId = (openId, userInfo) => {
    this.getIndexData(openId, userInfo) // 獲取首頁(yè)數(shù)據(jù)
    register({ openId, platform: mpvuePlatform, ...userInfo }) // 注冊(cè)
  } 
  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) => { // 需要請(qǐng)求接口獲得
          onCompleteGetOpenId(openId, userInfo)
        })
      } else {
        onCompleteGetOpenId(openId, userInfo) // 已存在openId
      }
    },
    (res) => {
      console.log(res)
    }
  )
}

 // 一開(kāi)始就需要獲取授權(quán)信息，mounted里調(diào)用
init () {
  getSetting(
    'userInfo',
    (res) => {
      this.isAuth = true
      console.log(res)
      this.getUserInfoData()
    },
    (res) => {
      this.isAuth = false
      console.log(res)
    }
  )
}