您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁(yè)面使用的是局部刷新,不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問(wèn)速度和用戶體驗(yàn)。
前言:
公司最近有一個(gè)H5頁(yè)面的功能,比較簡(jiǎn)單的一個(gè)調(diào)查表功能,嵌套在我們微信公眾號(hào)里面。選用的技術(shù)棧是Vue。同時(shí)用到了微信的登錄和分享接口。ps:本人小白,如果有問(wèn)題希望大家能指出來(lái),寫(xiě)文章不止是為了記錄,還是為了發(fā)現(xiàn)自己的問(wèn)題。謝謝大噶?。。?/p>
主要功能以及遇到的問(wèn)題:
左右切換動(dòng)畫(huà)
路由帶參數(shù)跳轉(zhuǎn)
移動(dòng)端引入外部字體樣式
使用htmtl2canvas截圖功能
使用微信接口(前端部分)
移動(dòng)端屏幕適配
移動(dòng)端點(diǎn)擊一個(gè)頁(yè)面點(diǎn)擊多次只執(zhí)行一次問(wèn)題
ios使用輸入框的時(shí)鍵盤(pán)彈起來(lái)掩蓋住按鈕問(wèn)題
打包項(xiàng)目遇到靜態(tài)資源加載問(wèn)題
1.左右切換動(dòng)畫(huà)
--首先我考慮到用vue的移動(dòng)端動(dòng)畫(huà)庫(kù),看了好久,但是項(xiàng)目非常小,就放棄了這個(gè)選擇自己開(kāi)始手寫(xiě)。首先我考慮到的是過(guò)渡效果。并且找到了相關(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)
這個(gè)就是記錄一下,有三種方法。
1.直接在route-link:to
中帶參數(shù):
<router-link :to="{name:'home', query: {id:1}}">
2.在this.$router.push
中帶參數(shù):
使用query帶參數(shù): 類似于get傳參 參數(shù)會(huì)拼接到url上面
this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}})
使用params帶參數(shù): 只能用name 類似于post 參數(shù)不會(huì)拼接
this.$router.push({name:'home',params: {id:'1'}})
參考鏈接:https://www.jb51.net/article/160401.htm
3.移動(dòng)端引入外部字體樣式
移動(dòng)端引入外部樣式,我用的是直接把字體庫(kù)的字體下載下來(lái),一般后綴為 .ttf/.otf等。在asset文件下創(chuàng)建 fonts文件,將字體文件全部放入。
再新建一個(gè).css文件,相當(dāng)于注冊(cè)你下載的字體,可以自定義給字體們命名,不過(guò)一般還是按照以前的名字。src是文件所在的路徑。
在需要的地方使用就可以了:font-family:"PingFang"
4.使用htmtl2canvas截圖功能,轉(zhuǎn)換成圖片
先下載html2canvas包: cnpm i html2canvas -S / import html2canvas from 'html2canvas';
查看文檔 : 點(diǎn)擊進(jìn)來(lái)直接生成圖片 利用微信長(zhǎng)按保存圖片功能來(lái)保存
setTimeout(() => { //這里用定時(shí)器是因?yàn)轫?yè)面一加載出來(lái)我就展示的是圖片 為了防止圖片還未生成 給點(diǎn)時(shí)間 html2canvas(document.querySelector("#top"), { useCORS: true, //是否嘗試使用CORS從服務(wù)器加載圖像 logging: false,//刪除打印的日志 allowTaint: false //這個(gè)和第一個(gè)很像 但是不能同時(shí)使用 同時(shí)使用toDataURL會(huì)失效 }).then(canvas => { let imageSrc = canvas.toDataURL("image/jpg"); // 轉(zhuǎn)行img的路徑 this.imageSrc = imageSrc; //定義一個(gè)動(dòng)態(tài)的 :src 現(xiàn)在是賦值給src 圖片就會(huì)展現(xiàn) this.$refs.top.style.display = "none"; // 讓頁(yè)面上其他元素消失 只顯示圖片 }); }, 1000);
題外話: 當(dāng)時(shí)做這個(gè)的時(shí)候真的有點(diǎn)懵。官網(wǎng)文檔太少了,當(dāng)時(shí)遇到圖片跨域問(wèn)題,找了好久,可能是我沒(méi)有仔細(xì)Jan官網(wǎng)的參數(shù)配置文件。浪費(fèi)了很多時(shí)間,哭哭。
5.使用微信接口(前端部分)
我們用微信SDK接口主要是做的登錄和分享功能,首先是上微信公眾平臺(tái)上邊看看,把權(quán)限搞好之后后端配置。前端只需請(qǐng)求得到數(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) { //獲取后端傳會(huì)來(lái)的參數(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, // 開(kāi)啟調(diào)試模式, appId: res.data.appId, // 必填,企業(yè)號(hào)的唯一標(biāo)識(shí),此處填寫(xiě)企業(yè)號(hào)corpid timestamp: res.data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: res.data.nonceStr, // 必填,生成簽名的隨機(jī)串 signature: res.data.signature, // 必填,簽名,見(jiàn)附錄1 jsApiList: [ "updateAppMessageShareData", "updateTimelineShareData", "showMenuItems", "hideAllNonBaseMenuItem" ] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2 }); //參考公眾平臺(tái)寫(xiě)的: wx.ready(function() { wx.hideAllNonBaseMenuItem(); wx.showMenuItems({ menuList: [ "menuItem:share:appMessage", "menuItem:share:timeline", "menuItem:favorite" ] // 要顯示的菜單項(xiàng),所有menu項(xiàng)見(jiàn)附錄3 }); wx.updateTimelineShareData({ title: "******", // 分享標(biāo)題 desc: "*********", // 分享描述 link: "**********", // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: "******", // 分享圖標(biāo) success: function() { ***** 執(zhí)行結(jié)束后執(zhí)行的回調(diào) } }); wx.updateAppMessageShareData({ title: "*******", // 分享標(biāo)題 desc: "*********", // 分享描述 link: "*********", // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 imgUrl: "********, // 分享圖標(biāo) success: function() { ******* } }); }); }
6.移動(dòng)端屏幕適配
現(xiàn)在我們移動(dòng)端屏幕適配,我用的是rem,之前也有看到說(shuō)有一個(gè)felxable.js的庫(kù),后來(lái)去查,說(shuō)是有更好的作者放棄了,并且給我們提供了鏈接,哈哈哈哈真的太可愛(ài)了。準(zhǔn)備抽時(shí)間去仔細(xì)看看,公司下一個(gè)項(xiàng)目又來(lái)了,真的加班了好久,為了如期完成項(xiàng)目,完成之后立馬就新開(kāi)項(xiàng)目,有點(diǎn)心累,這把應(yīng)該是APP了,完全沒(méi)有任何經(jīng)驗(yàn),嗷嗷只能硬著頭皮做,還是要恰飯的,可憐的應(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. 計(jì)算當(dāng)前屏幕對(duì)應(yīng)的根元素字體大小 var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px'; // console.log(nowFontSize); // 5. 把當(dāng)前計(jì)算的根元素的字體大小設(shè)置到html上 document.querySelector('html').style.fontSize = nowFontSize; } // 6. 添加一個(gè)屏幕寬度變化的事件 屏幕變化就觸發(fā)變化根元素字體大小計(jì)算的js window.addEventListener('resize', setHtmlFontSize);
把這段代碼引入到main.js里面,然后使用轉(zhuǎn)換器把px轉(zhuǎn)成rem 就可以了。
7.其他問(wèn)題匯總
點(diǎn)擊事件點(diǎn)擊多次只執(zhí)行一次:
可以使用.once修飾符 還有很多有用的修飾符,大家有時(shí)間可以去看看~~
使用ios輸入框的時(shí)候,鍵盤(pán)彈起來(lái)回遮擋下面的按鈕等元素的事件:
我們可以給input注冊(cè)一個(gè)失去焦點(diǎn)事件,當(dāng)失去焦點(diǎn)的時(shí)候設(shè)置document.body.scroolTop = 0;
打包項(xiàng)目遇到靜態(tài)資源不展示的現(xiàn)象或者是路徑錯(cuò)誤:
我用的是vue-cil3,他把配置文件都放在了node_modules中,官方文檔上面有介紹,如果需要修改配置,
就新建一個(gè)vue.config.js文件,他會(huì)自動(dòng)的覆蓋之前的文件。主要是修改成: publicPath: "./",
文檔已經(jīng)沒(méi)有baseUrl,現(xiàn)在全部使用publicPath,跟著文檔配置就ok了。
以上是“怎么使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。