关于前端:mpvue开发小程序项目初始化及实现授权登录

4次阅读

共计 6261 个字符，预计需要花费 16 分钟才能阅读完成。

mpvue 是一个应用 vue.js 开发小程序的框架。其官网 http://mpvue.com/ 的介绍是，mpvue 框架基于 Vue.js 外围，mpvue 批改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

应用 mpvue 框架开发小程序，可能间接应用 vue 语法进行开发。

Vant Weapp 是一套小程序 UI 组件库，能够应用这个 UI 库封装好的一些组件来实现某些性能，相似 element 组件的引入应用。

github：https://github.com/wendux/fly
Flyio 帮忙文档：https://wendux.github.io/dist…
如官网所说，Fly.js 是一个反对所有 JavaScript 运行环境的基于 Promise、反对申请转发的 http 申请库，它可最大限度地在多个端上实现代码复用。
其领有的特点：
1、提供对立的 PromiseAPI
2、浏览器环境下十分轻量
3、反对多种 JavaScript 运行环境
4、反对申请 / 响应拦截器
5、主动转换 JSON 数据
6、反对切换底层 HTTP Engine，可轻松适配各种运行环境
7、浏览器端反对全局 Ajax 拦挡
8、H5 页面内嵌到原生 APP 时，反对将 HTTP 申请转发到 Native，反对间接申请图片

本次搭建的小程序环境，将应用 flyio 这个 http 申请库来实现数据的申请，目前用到的办法为 get、post。

两者的应用示例在官网帮忙文档有示例：

1、搭建 mpvue 脚手架
基于 mpvue-quickstart 模版创立新我的项目
vue init mpvue/mpvue-quickstart one_hour_app

2、关上并跑起我的项目
新建的我的项目关上，dist 文件夹尚未存在

跑起我的项目
cd one_hour_app
npm run dev
这样跑起来后我的项目中便多了一个 dist 文件夹，外面有个 wx 文件夹

这个 wx 文件夹就是要导入到微信开发者工具中的文件。
装置微信开发者工具，关上微信官网文档页面可下载：https://developers.weixin.qq….

装置好微信开发者工具后点击导入我的项目

弹窗内输出导入的目录

目录就是方才说的那个在 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。
1、装置 scss，sass-loader 的版本是 7.3.1，如果应用最新的版本会报错，这里装置这个低版本的。

npm i -D sass-loader node-sass

测试下：

2、装置 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 里生成。

3、装置 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)
        }
    )
}

最初放上受权的过程示意图：

正文完