小編給大家分享一下怎么使用vue完成微信公眾號網(wǎng)頁小記，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比惠城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式惠城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋惠城地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

前言：

公司最近有一個H5頁面的功能，比較簡單的一個調(diào)查表功能，嵌套在我們微信公眾號里面。選用的技術(shù)棧是Vue。同時用到了微信的登錄和分享接口。ps:本人小白，如果有問題希望大家能指出來，寫文章不止是為了記錄，還是為了發(fā)現(xiàn)自己的問題。謝謝大噶?。?！

主要功能以及遇到的問題：

1. 左右切換動畫

2. 路由帶參數(shù)跳轉(zhuǎn)

3. 移動端引入外部字體樣式

4. 使用htmtl2canvas截圖功能

5. 使用微信接口(前端部分)

6. 移動端屏幕適配

7. 移動端點擊一個頁面點擊多次只執(zhí)行一次問題

8. ios使用輸入框的時鍵盤彈起來掩蓋住按鈕問題

9. 打包項目遇到靜態(tài)資源加載問題

1.左右切換動畫

--首先我考慮到用vue的移動端動畫庫，看了好久，但是項目非常小，就放棄了這個選擇自己開始手寫。首先我考慮到的是過渡效果。并且找到了相關(guān)的文章參考。代碼如下：

`<template>
 <div id="app">
 <transition :name="'fade-'+(direction==='forward'?'last':'next')">
 <router-view></router-view>
 </transition>
 </div>
</template>
<script>
export default {
 name: "app",
 data: () => {
 return {
 direction: ""
 };
 },
 watch: {
 $route(to, from) {
 let toName = to.name;
 const toIndex = to.meta.index;
 const fromIndex = from.meta.index;
 this.direction = toIndex < fromIndex ? "forward" : "";
 }
 }
}
</script>
<style scoped>
.fade-last-enter-active {
 animation: bounce-in 0.6s;
}
.fade-next-enter-active {
 animation: bounce-out 0.6s;
}
@keyframes bounce-in {
 0% {
 transform: translateX(-100%);
 }
 100% {
 transform: translateX(0rem);
 }
}
@keyframes bounce-out {
 0% {
 transform: translateX(100%);
 }
 100% {
 transform: translateX(0rem);
 }
}
</style>

2.路由帶參數(shù)跳轉(zhuǎn)

這個就是記錄一下，有三種方法。

1.直接在route-link:to 中帶參數(shù)：

<router-link :to="{name:'home', query: {id:1}}">

2.在this.$router.push中帶參數(shù)：

使用query帶參數(shù): 類似于get傳參 參數(shù)會拼接到url上面

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

使用params帶參數(shù)： 只能用name 類似于post 參數(shù)不會拼接

this.$router.push({name:'home',params: {id:'1'}})

參考鏈接：https://www.jb51.net/article/160401.htm

3.移動端引入外部字體樣式

移動端引入外部樣式，我用的是直接把字體庫的字體下載下來，一般后綴為 .ttf/.otf等。在asset文件下創(chuàng)建 fonts文件，將字體文件全部放入。

再新建一個.css文件，相當(dāng)于注冊你下載的字體，可以自定義給字體們命名，不過一般還是按照以前的名字。src是文件所在的路徑。

在需要的地方使用就可以了：font-family："PingFang"

4.使用htmtl2canvas截圖功能，轉(zhuǎn)換成圖片

先下載html2canvas包： cnpm i html2canvas -S / import html2canvas from 'html2canvas';

查看文檔 ： 點擊進(jìn)來直接生成圖片 利用微信長按保存圖片功能來保存

setTimeout(() => { //這里用定時器是因為頁面一加載出來我就展示的是圖片 為了防止圖片還未生成 給點時間
 html2canvas(document.querySelector("#top"), {
 useCORS: true, //是否嘗試使用CORS從服務(wù)器加載圖像 
 logging: false,//刪除打印的日志 
 allowTaint: false //這個和第一個很像 但是不能同時使用 同時使用toDataURL會失效
 }).then(canvas => {
 let imageSrc = canvas.toDataURL("image/jpg"); // 轉(zhuǎn)行img的路徑 
 this.imageSrc = imageSrc; //定義一個動態(tài)的 ：src 現(xiàn)在是賦值給src 圖片就會展現(xiàn)
 this.$refs.top.style.display = "none"; // 讓頁面上其他元素消失 只顯示圖片
 });
 }, 1000);

題外話： 當(dāng)時做這個的時候真的有點懵。官網(wǎng)文檔太少了，當(dāng)時遇到圖片跨域問題，找了好久，可能是我沒有仔細(xì)Jan官網(wǎng)的參數(shù)配置文件。浪費了很多時間，哭哭。

5.使用微信接口(前端部分)

我們用微信SDK接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權(quán)限搞好之后后端配置。前端只需請求得到數(shù)據(jù)，在進(jìn)行一些配置就可以。這里主要介紹分享給朋友和分享到朋友圈功能：

this.code = location.href; //首先獲取code 
if (this.code.lastIndexOf("code=") != -1) {
 (this.code = this.code.substring(
 this.code.lastIndexOf("code=") + 5,
 this.code.lastIndexOf("&state")
 )),
 this.$axios
 .get("*******8?code=".concat(this.code))
 .then(function(t) { //獲取后端傳會來的參數(shù) 
 localStorage.setItem("unionid", t.data.unionid);
 localStorage.setItem("openid", t.data.openid);
 localStorage.setItem("nickname", t.data.nickname);
 localStorage.setItem("headimgurl", t.data.headimgurl);
 });
}
this.url = encodeURIComponent(location.href.split("#/")[0]);//獲取配置的路徑
this.$axios.get(`*********?url=${this.url}`).then(res => {
 this.res = res.data;
 wx.config({
 debug: false, // 開啟調(diào)試模式,
 appId: res.data.appId, // 必填，企業(yè)號的唯一標(biāo)識，此處填寫企業(yè)號corpid
 timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
 nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
 signature: res.data.signature, // 必填，簽名，見附錄1
 jsApiList: [
 "updateAppMessageShareData",
 "updateTimelineShareData",
 "showMenuItems",
 "hideAllNonBaseMenuItem"
 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
 });
 //參考公眾平臺寫的：
 wx.ready(function() {
 wx.hideAllNonBaseMenuItem();
 wx.showMenuItems({
 menuList: [
 "menuItem:share:appMessage",
 "menuItem:share:timeline",
 "menuItem:favorite"
 ] // 要顯示的菜單項，所有menu項見附錄3
 });
 wx.updateTimelineShareData({
 title: "******", // 分享標(biāo)題
 desc: "*********", // 分享描述
 link: "**********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
 imgUrl: "******", // 分享圖標(biāo)
 success: function() {
 ***** 執(zhí)行結(jié)束后執(zhí)行的回調(diào)
 }
 });
 wx.updateAppMessageShareData({
 title: "*******", // 分享標(biāo)題
 desc: "*********", // 分享描述
 link: "*********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
 imgUrl: "********, // 分享圖標(biāo)
 success: function() {
 *******
 }
 });
 });
 }

6.移動端屏幕適配

現(xiàn)在我們移動端屏幕適配，我用的是rem，之前也有看到說有一個felxable.js的庫，后來去查，說是有更好的作者放棄了，并且給我們提供了鏈接，哈哈哈哈真的太可愛了。準(zhǔn)備抽時間去仔細(xì)看看，公司下一個項目又來了，真的加班了好久，為了如期完成項目，完成之后立馬就新開項目，有點心累，這把應(yīng)該是APP了，完全沒有任何經(jīng)驗，嗷嗷只能硬著頭皮做，還是要恰飯的，可憐的應(yīng)屆狗不敢造次。

下面分享一下rem適配的代碼：

//默認(rèn)調(diào)用一次設(shè)置
 setHtmlFontSize();
 
 function setHtmlFontSize() {
 // 1. 獲取當(dāng)前屏幕的寬度
 var windowWidth = document.documentElement.offsetWidth;
 // console.log(windowWidth);
 // 2. 定義標(biāo)準(zhǔn)屏幕寬度 假設(shè)375
 var standardWidth = 375;
 // 3. 定義標(biāo)準(zhǔn)屏幕的根元素字體大小 假設(shè)100px 1rem=100px 10px = 0.1rem 1px 0.01rem
 var standardFontSize = 100;
 // 4. 計算當(dāng)前屏幕對應(yīng)的根元素字體大小
 var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px';
 // console.log(nowFontSize);
 // 5. 把當(dāng)前計算的根元素的字體大小設(shè)置到html上
 document.querySelector('html').style.fontSize = nowFontSize;
 }
 // 6. 添加一個屏幕寬度變化的事件 屏幕變化就觸發(fā)變化根元素字體大小計算的js 
 window.addEventListener('resize', setHtmlFontSize);

把這段代碼引入到main.js里面，然后使用轉(zhuǎn)換器把px轉(zhuǎn)成rem 就可以了。

7.其他問題匯總

點擊事件點擊多次只執(zhí)行一次：

可以使用.once修飾符 還有很多有用的修飾符，大家有時間可以去看看~~

使用ios輸入框的時候，鍵盤彈起來回遮擋下面的按鈕等元素的事件：

我們可以給input注冊一個失去焦點事件，當(dāng)失去焦點的時候設(shè)置document.body.scroolTop = 0;

打包項目遇到靜態(tài)資源不展示的現(xiàn)象或者是路徑錯誤：

我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文檔上面有介紹，如果需要修改配置，

就新建一個vue.config.js文件，他會自動的覆蓋之前的文件。主要是修改成： publicPath: "./"，

文檔已經(jīng)沒有baseUrl，現(xiàn)在全部使用publicPath,跟著文檔配置就ok了。

以上是“怎么使用vue完成微信公眾號網(wǎng)頁小記”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：怎么使用vue完成微信公眾號網(wǎng)頁小記
分享路徑：http://aaarwkj.com/article30/peispo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站營銷、App設(shè)計、靜態(tài)網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)