如何使用vue開發(fā)公眾號(hào)網(wǎng)頁
項(xiàng)目背景
主要就是一個(gè)h5頁面，涉及的功能不是很難，主要很久沒有開發(fā)公眾號(hào)，對(duì)整個(gè)開發(fā)步驟有些生疏。其中包括對(duì)微信sdk的調(diào)用方式、用戶的微信授權(quán)和sdk的接入等。主要圍繞開發(fā)步驟進(jìn)行梳理。
開始
因?yàn)槭且粋€(gè)h5頁面，整體而言項(xiàng)目不大，然后在項(xiàng)目技術(shù)選型的時(shí)候確定使用vue框架進(jìn)行開發(fā)。使用vue開發(fā)h5，個(gè)人整體感覺還是效率比較高的。在ui庫方面選擇的是vant庫，組件整體而言還是不錯(cuò)的，支持自定義主題方便樣式自定義比較適合h5的開發(fā)。
通過vue-cli創(chuàng)建項(xiàng)目
安裝腳手架工具
npm install -g @vue/cli # OR yarn global add @vue/cli
創(chuàng)建一個(gè)項(xiàng)目
vue create water_project
然后就創(chuàng)建了項(xiàng)目目錄
. ├── 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
關(guān)于移動(dòng)的適配
因?yàn)槭且苿?dòng)端網(wǎng)頁，所以需要做適配。網(wǎng)上有很多適配方案這里就不展開說了，主要說下本項(xiàng)目使用的方案是amfe-flexible結(jié)合rem來做的，是淘寶的一種解決方案。關(guān)于設(shè)計(jì)稿的單位px轉(zhuǎn)換為rem使用的是postcss的postcss-pxtorem方案。其實(shí)用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插件
項(xiàng)目中如果沒有vue.config.js文件就手動(dòng)創(chuàng)建一個(gè)，這個(gè)是vue cli的配置文件。
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ["*"],
}),
],
},
},
到此樣式適配已經(jīng)完成，至于rootValue為什么是37.5.主要是為了vant的適配，所以設(shè)計(jì)稿以375px為參考。如果沒有使用第三方ui庫可以設(shè)計(jì)稿以750為參考，此時(shí)rootValue為75。
使用 normalize.css
使用normalize.css來消除瀏覽器之間的基礎(chǔ)樣式差異
npm i normalize.css -S
在main.js中引入
import "normalize.css"
接入vant庫
vant是有贊出品的一個(gè)ui庫，站在巨人的肩膀上效率當(dāng)然是要快很多。這種第三方庫只能作為基礎(chǔ)，在有設(shè)計(jì)稿的情況下要對(duì)樣式進(jìn)行定制。簡單的樣式vant都支持主題定制化還是比較方便的，如果有一些樣式?jīng)]有提供自定義主題，就只能寫樣式進(jìn)行覆蓋了。
- 下載安裝vant
npm i vant -S
- 引入組件有3種方式，官網(wǎng)也有介紹，詳情可以查看官網(wǎng)，簡單說下使用方式：
方式一. 自動(dòng)按需引入組件 (推薦)
babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式。
# 安裝插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設(shè)置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接著你可以在代碼中直接引入 Vant 組件
// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式
import { Button } from 'vant';
方式二. 手動(dòng)按需引入組件
在不使用插件的情況下，可以手動(dòng)引入需要的組件。
import Button from 'vant/lib/button'; import 'vant/lib/button/style';
方式三. 導(dǎo)入所有組件
Vant 支持一次性導(dǎo)入所有組件，引入所有組件會(huì)增加代碼包體積，因此不推薦這種做法
import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
Tips: 配置按需引入后，將不允許直接導(dǎo)入所有組件。
定制vant主題
步驟一 引入樣式源文件
定制主題時(shí)，需要引入組件對(duì)應(yīng)的 Less 樣式文件，支持按需引入和手動(dòng)引入兩種方式。
按需引入樣式（推薦）
在 babel.config.js 中配置按需引入樣式源文件，注意 babel6 不支持按需引入樣式，請(qǐng)手動(dòng)引入樣式。
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定樣式路徑
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
手動(dòng)引入樣式
// 引入全部樣式 import 'vant/lib/index.less'; // 引入單個(gè)組件樣式 import 'vant/lib/button/style/less';
步驟二 修改樣式變量
使用 Less 提供的 modifyVars 即可對(duì)變量進(jìn)行修改，下面是參考的 webpack 配置。
// webpack.config.js
module.exports = {
rules: [
{
test: /\.less$/,
use: [
// ...其他 loader 配置
{
loader: 'less-loader',
options: {
// 若 less-loader 版本小于 6.0，請(qǐng)移除 lessOptions 這一級(jí)，直接配置選項(xiàng)。
lessOptions: {
modifyVars: {
// 直接覆蓋變量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通過 less 文件覆蓋（文件路徑為絕對(duì)路徑）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
],
},
],
};
如果 vue-cli 搭建的項(xiàng)目，可以在 vue.config.js 中進(jìn)行配置。
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，請(qǐng)移除 lessOptions 這一級(jí)，直接配置選項(xiàng)。
lessOptions: {
modifyVars: {
// 直接覆蓋變量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通過 less 文件覆蓋（文件路徑為絕對(duì)路徑）
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>
然后在使用的地方就調(diào)用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來使用相應(yīng)的方法了比如：
this.$wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: String(res.data.timestamp), // 必填，生成簽名的時(shí)間戳
nonceStr: String(res.data.nonceStr), // 必填，生成簽名的隨機(jī)串
signature: res.data.signature, // 必填，簽名，見附錄1
jsApiList: [
"getNetworkType",
"getLocation",
], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
注冊(cè)驗(yàn)證sdk才可以使用api
其實(shí)注冊(cè)的重要邏輯都在后端，提供一個(gè)獲取配置信息的接口，前端直接調(diào)用sdk的config方法進(jìn)行注冊(cè)就好了。這里把sdk的注冊(cè)邏輯寫在app.vue文件中
- 封裝一個(gè)注冊(cè)sdk的方法
async getWxJssdkConf() {
const res = await this.$api.getSdkConfig({
url: window.location.href.split("#")[0],
});
if (res.success) {
this.$wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: String(res.data.timestamp), // 必填，生成簽名的時(shí)間戳
nonceStr: String(res.data.nonceStr), // 必填，生成簽名的隨機(jī)串
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為調(diào)用后臺(tái)的接口，這里是給api也掛載到了vue的原型上，方便使用不用每個(gè)頁面都去引入api
Vue.prototype.$api = api
在app.vue中注冊(cè)成功后，就可以使用sdk的api了。
微信的授權(quán)
如果要獲取用戶的信息，就必須讓用戶進(jìn)行授權(quán)。在授權(quán)的時(shí)候使用的是微信提供的接口，詳細(xì)請(qǐng)看這里，如果是只獲取用戶的openid只用靜默授權(quán)就可以了，不用用戶主動(dòng)授權(quán)。具體請(qǐng)看文檔，這里只需要openid就使用靜默授權(quán)如下：
- 在需要授權(quán)的主入口使用，比如這里是主頁Home，要先調(diào)用微信的接口獲取code，在用code去后端換取openid
/**
* @description: 獲取授權(quán)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 直接調(diào)用接口
this.handGetUserInfo(this.code);
} else {
this.handLogin();
}
},
/**
* @description: 獲取用戶授權(quán)登陸
* @param {*}
* @return {*}
*/
handLogin() {
// 重定向地址重定到當(dāng)前頁面，在路徑獲取 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) {
// 調(diào)用后臺(tái)接口
},
這里就是授權(quán)的主要邏輯，沒啥意外就基本走通了。
斷網(wǎng)進(jìn)行提示
如果用戶的網(wǎng)絡(luò)斷了，就跳轉(zhuǎn)到斷網(wǎng)提示頁。主要使用的是html提供的方法進(jìn)行判斷，判斷邏輯寫在app.vue文件中，因?yàn)槊總€(gè)頁面都會(huì)提示，就直接在主入口進(jìn)行處理。
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);
},
主要就是這個(gè)方法來檢查用戶網(wǎng)絡(luò)連接情況
判斷是不是微信打開的網(wǎng)頁
這里主要使用的是vue-router的導(dǎo)航守衛(wèi)來做的，在跳轉(zhuǎn)之前對(duì)瀏覽器進(jìn)行判斷，如果不是微信內(nèi)置瀏覽器就直接跳轉(zhuǎn)到異常提示頁
router.beforeEach((to, from, next) => {
const ua = navigator.userAgent.toLowerCase();
if (
to.path !== "/notwx" &&
!(ua.match(/MicroMessenger/i) == "micromessenger")
) {
next("/notwx");
} else {
next();
}
});
有時(shí)跳轉(zhuǎn)頁面，頁面的滾動(dòng)高度會(huì)保留在上個(gè)頁面的滾動(dòng)高度，這里也是在導(dǎo)航守衛(wèi)中解決的，主動(dòng)給滾動(dòng)到頂部
router.afterEach(() => {
window.scrollTo(0, 0);
});
小結(jié)
到此整個(gè)開發(fā)流程簡單記錄完畢，也是對(duì)自己開發(fā)的一個(gè)梳理，也方便以后查閱。希望對(duì)看到文章的你有所幫助，個(gè)人見解，如有問題歡迎指正，覺得有幫助，歡迎點(diǎn)個(gè)贊，謝謝。
以上就是如何使用vue開發(fā)公眾號(hào)網(wǎng)頁的詳細(xì)內(nèi)容，更多關(guān)于vue開發(fā)公眾號(hào)網(wǎng)頁的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
在本篇文章里小編給大家分享了關(guān)于vue配置接口域名方法和相關(guān)知識(shí)點(diǎn)總結(jié)，需要的朋友們跟著操作下。2019-05-05
vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server err
前端使用axios 訪問后端接口時(shí)報(bào)錯(cuò),在瀏覽器中點(diǎn)擊紅色的報(bào)錯(cuò)數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue3使用ref的性能警告問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue監(jiān)聽某個(gè)元素以外的區(qū)域被點(diǎn)擊問題
這篇文章主要介紹了Vue監(jiān)聽某個(gè)元素以外的區(qū)域被點(diǎn)擊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
npm install -g @vue/cli安裝vue腳手架報(bào)錯(cuò)問題(一般都能解決)
這篇文章主要介紹了npm install -g @vue/cli安裝vue腳手架報(bào)錯(cuò)問題(一般都能解決),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在 Vue.js 應(yīng)用中使用 hash 模式是一種常見的路由配置方式,這種方式利用了 URL 的 hash（即 # 符號(hào)后面的部分）來實(shí)現(xiàn)頁面的跳轉(zhuǎn)和狀態(tài)管理,以下是使用 Vue 2 和 Vue Router 設(shè)置 hash 模式的步驟,需要的朋友可以參考下2024-10-10