mpvue 项目初始化及实现授权登录的实现方法

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

<button class="auth-btn" 
       open-type="getUserInfo"
       @getuserinfo="getUserInfo">授权登录</button>

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

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

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

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