如何使用vue開發公眾號網頁

項目背景

主要就是一個h5頁面，涉及的功能不是很難，主要很久沒有開發公眾號，對整個開發步驟有些生疏。其中包括對微信sdk的調用方式、用戶的微信授權和sdk的接入等。主要圍繞開發步驟進行梳理。

開始

因為是一個h5頁面，整體而言項目不大，然后在項目技術選型的時候確定使用vue框架進行開發。使用vue開發h5，個人整體感覺還是效率比較高的。在ui庫方面選擇的是vant庫，組件整體而言還是不錯的，支持自定義主題方便樣式自定義比較適合h5的開發。

通過vue-cli創建項目

安裝腳手架工具

npm install -g @vue/cli# ORyarn global add @vue/cli

創建一個項目

vue create water_project

然后就創建了項目目錄

.├── README.md├── babel.config.js├── jsconfig.json├── package-lock.json├── package.json├── public│ ├── favicon.ico│ └── index.html├── src│ ├── App.vue│ ├── api│ ├── assets│ ├── components│ ├── global.less│ ├── main.js│ ├── mock│ ├── router│ ├── store│ ├── utils│ └── views└── vue.config.js關于移動的適配

因為是移動端網頁，所以需要做適配。網上有很多適配方案這里就不展開說了，主要說下本項目使用的方案是amfe-flexible結合rem來做的，是淘寶的一種解決方案。關于設計稿的單位px轉換為rem使用的是postcss的postcss-pxtorem方案。其實用webpack的loader來做也是可以的，具體方案自行百度。

安裝amfe-flexible包

npm i amfe-flexible -S 安裝postcss-pxtorem插件

npm i postcss-pxtorem -D 在main.js中引入amfe-flexible

import 'amfe-flexible' 在vue.config.js中配置postcss插件

項目中如果沒有vue.config.js文件就手動創建一個，這個是vue cli的配置文件。

css: { loaderOptions: { postcss: {plugins: [ autoprefixer(), pxtorem({ rootValue: 37.5, propList: ['*'], }),], }, },

到此樣式適配已經完成，至于rootValue為什么是37.5.主要是為了vant的適配，所以設計稿以375px為參考。如果沒有使用第三方ui庫可以設計稿以750為參考，此時rootValue為75。

使用 normalize.css

使用normalize.css來消除瀏覽器之間的基礎樣式差異

npm i normalize.css -S

在main.js中引入

import 'normalize.css'接入vant庫

vant是有贊出品的一個ui庫，站在巨人的肩膀上效率當然是要快很多。這種第三方庫只能作為基礎，在有設計稿的情況下要對樣式進行定制。簡單的樣式vant都支持主題定制化還是比較方便的，如果有一些樣式沒有提供自定義主題，就只能寫樣式進行覆蓋了。

下載安裝vant

npm i vant -S 引入組件有3種方式，官網也有介紹，詳情可以查看官網，簡單說下使用方式： 方式一. 自動按需引入組件 (推薦)

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。

# 安裝插件npm i babel-plugin-import -D// 在.babelrc 中添加配置// 注意：webpack 1 無需設置 libraryDirectory{ 'plugins': [ ['import', { 'libraryName': 'vant', 'libraryDirectory': 'es', 'style': true }] ]}// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置module.exports = { plugins: [ [’import’, { libraryName: ’vant’, libraryDirectory: ’es’, style: true }, ’vant’] ]};

// 接著你可以在代碼中直接引入 Vant 組件// 插件會自動將代碼轉化為方式二中的按需引入形式import { Button } from ’vant’;方式二. 手動按需引入組件

在不使用插件的情況下，可以手動引入需要的組件。

import Button from ’vant/lib/button’;import ’vant/lib/button/style’;方式三. 導入所有組件

Vant 支持一次性導入所有組件，引入所有組件會增加代碼包體積，因此不推薦這種做法

import Vue from ’vue’;import Vant from ’vant’;import ’vant/lib/index.css’;Vue.use(Vant);

Tips: 配置按需引入后，將不允許直接導入所有組件。

定制vant主題步驟一 引入樣式源文件

定制主題時，需要引入組件對應的 Less 樣式文件，支持按需引入和手動引入兩種方式。

按需引入樣式（推薦）在 babel.config.js 中配置按需引入樣式源文件，注意 babel6 不支持按需引入樣式，請手動引入樣式。

module.exports = { plugins: [ [ ’import’, {libraryName: ’vant’,libraryDirectory: ’es’,// 指定樣式路徑style: (name) => `${name}/style/less`, }, ’vant’, ], ],};手動引入樣式

// 引入全部樣式import ’vant/lib/index.less’;// 引入單個組件樣式import ’vant/lib/button/style/less’;步驟二 修改樣式變量

使用 Less 提供的 modifyVars 即可對變量進行修改，下面是參考的 webpack 配置。

// webpack.config.jsmodule.exports = { rules: [ { test: /.less$/, use: [// ...其他 loader 配置{ loader: ’less-loader’, options: { // 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項。 lessOptions: { modifyVars: {// 直接覆蓋變量’text-color’: ’#111’,’border-color’: ’#eee’,// 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）hack: `true; @import 'your-less-file-path.less';`, }, }, },}, ], }, ],};

如果 vue-cli 搭建的項目，可以在 vue.config.js 中進行配置。

// vue.config.jsmodule.exports = { css: { loaderOptions: { less: {// 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項。lessOptions: { modifyVars: { // 直接覆蓋變量 ’text-color’: ’#111’, ’border-color’: ’#eee’, // 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑） hack: `true; @import 'your-less-file-path.less';`, },}, }, }, },};引入微信jssdk

引入jsssdk有兩種方式，一種是用js鏈接直接引入，寫在index.html中。

<script src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js '></script>

然后在使用的地方就調用window.wx.xxx就能使用sdk提供的方法了。

第二種就是使用npm包的方式

安裝weixin-js-sdk

npm i weixin-js-sdk -S 在main.js中使用

import wx from 'weixin-js-sdk'// 掛在vue的原型上方便使用Vue.prototype.$wx = wx;

這樣引入之后就可以用this.$wx.xx來使用相應的方法了比如：

this.$wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: res.data.appId, // 必填，公眾號的唯一標識 timestamp: String(res.data.timestamp), // 必填，生成簽名的時間戳 nonceStr: String(res.data.nonceStr), // 必填，生成簽名的隨機串 signature: res.data.signature, // 必填，簽名，見附錄1 jsApiList: [ 'getNetworkType', 'getLocation', ], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});注冊驗證sdk才可以使用api

其實注冊的重要邏輯都在后端，提供一個獲取配置信息的接口，前端直接調用sdk的config方法進行注冊就好了。這里把sdk的注冊邏輯寫在app.vue文件中

封裝一個注冊sdk的方法

async getWxJssdkConf() { const res = await this.$api.getSdkConfig({url: window.location.href.split('#')[0], }); if (res.success) {this.$wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: res.data.appId, // 必填，公眾號的唯一標識 timestamp: String(res.data.timestamp), // 必填，生成簽名的時間戳 nonceStr: String(res.data.nonceStr), // 必填，生成簽名的隨機串 signature: res.data.signature, // 必填，簽名，見附錄1 jsApiList: [ 'getNetworkType', 'getLocation', ], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});this.$wx.ready(() => { this.$wx.checkJsApi({ jsApiList: ['getNetworkType', 'getLocation'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2, success: function (res) { console.log('checkJsApi', res); }, });});this.$wx.error((res) => { console.log('wx.error', res);}); } },

created() { this.getWxJssdkConf(); },

其中this.$api.getSdkConfig為調用后臺的接口，這里是給api也掛載到了vue的原型上，方便使用不用每個頁面都去引入api

Vue.prototype.$api = api

在app.vue中注冊成功后，就可以使用sdk的api了。

微信的授權

如果要獲取用戶的信息，就必須讓用戶進行授權。在授權的時候使用的是微信提供的接口，詳細請看這里，如果是只獲取用戶的openid只用靜默授權就可以了，不用用戶主動授權。具體請看文檔，這里只需要openid就使用靜默授權如下：

在需要授權的主入口使用，比如這里是主頁Home，要先調用微信的接口獲取code，在用code去后端換取openid

/** * @description: 獲取授權code * @param {*} * @return {*} */ getCode() { // 從 window.location.href 中截取 code 并且賦值 // window.location.href.split(’#’)[0] if (window.location.href.indexOf('state') !== -1) {this.code = qs.parse( window.location.href.split('#')[0].split('?')[1]).code; } if (this.code) { // 存在 code 直接調用接口 this.handGetUserInfo(this.code);} else { this.handLogin();} }, /** * @description: 獲取用戶授權登陸 * @param {*} * @return {*} */ handLogin() { // 重定向地址重定到當前頁面，在路徑獲取 code const hrefUrl = window.location.href; if (this.code === '') {window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX &redirect_uri=${encodeURIComponent(hrefUrl)} &response_type=code &scope=snsapi_base &state=h5#wechat_redirect`); } }, /** * @description: 獲取用戶信息 * @param {*} code * @return {*} */ handGetUserInfo(code) { // 調用后臺接口 },

這里就是授權的主要邏輯，沒啥意外就基本走通了。

斷網進行提示

如果用戶的網絡斷了，就跳轉到斷網提示頁。主要使用的是html提供的方法進行判斷，判斷邏輯寫在app.vue文件中，因為每個頁面都會提示，就直接在主入口進行處理。

mounted() { window.addEventListener('online', this.updateOnlineStatus); window.addEventListener('offline', this.updateOnlineStatus); }, methods: { updateOnlineStatus(e) { const { type } = e; console.log('type==============', type); this.onLine = type === 'online'; }, } beforeDestroy() { window.removeEventListener('online', this.updateOnlineStatus); window.removeEventListener('offline', this.updateOnlineStatus); },

主要就是這個方法來檢查用戶網絡連接情況

判斷是不是微信打開的網頁

這里主要使用的是vue-router的導航守衛來做的，在跳轉之前對瀏覽器進行判斷，如果不是微信內置瀏覽器就直接跳轉到異常提示頁

router.beforeEach((to, from, next) => { const ua = navigator.userAgent.toLowerCase(); if ( to.path !== '/notwx' && !(ua.match(/MicroMessenger/i) == 'micromessenger') ) { next('/notwx'); } else { next(); }});

有時跳轉頁面，頁面的滾動高度會保留在上個頁面的滾動高度，這里也是在導航守衛中解決的，主動給滾動到頂部

router.afterEach(() => { window.scrollTo(0, 0);});小結

到此整個開發流程簡單記錄完畢，也是對自己開發的一個梳理，也方便以后查閱。希望對看到文章的你有所幫助，個人見解，如有問題歡迎指正，覺得有幫助，歡迎點個贊，謝謝。

以上就是如何使用vue開發公眾號網頁的詳細內容，更多關于vue開發公眾號網頁的資料請關注好吧啦網其它相關文章！