溫州舥艚鎮(zhèn)如何使用vue完成微信公眾號網(wǎng)頁

閱讀 35332  ·  發(fā)布日期 2020-08-24 17:26  ·  溫州優(yōu)光網(wǎng)絡科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】 有一個H5頁面的功能，比較簡單的一個調(diào)查表功能，嵌套在我們微信公眾號里面。選用的技術(shù)棧是Vue。同時用到了微信的登錄和分享接口。主要功能以及遇到的問題：左右切換動畫路由帶參數(shù)跳轉(zhuǎn)移動端引入外部字體樣式使用htmtl2canvas截圖功能使用微信接口(前端部分)移動端屏幕適配移動端點擊一個頁面點擊多次只執(zhí)行一次問題ios... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡網(wǎng)店服務,政采云網(wǎng)店管理服務】...

如何使用vue完成微信公眾號網(wǎng)頁

有一個H5頁面的功能，比較簡單的一個調(diào)查表功能，嵌套在我們微信公眾號里面。
選用的技術(shù)棧是Vue。
同時用到了微信的登錄和分享接口。
主要功能以及遇到的問題：
左右切換動畫路由帶參數(shù)跳轉(zhuǎn)移動端引入外部字體樣式使用htmtl2canvas截圖功能使用微信接口(前端部分)移動端屏幕適配移動端點擊一個頁面點擊多次只執(zhí)行一次問題ios使用輸入框的時鍵盤彈起來掩蓋住按鈕問題打包項目遇到靜態(tài)資源加載問題1.左右切換動畫--首先我考慮到用vue的移動端動畫庫，看了好久，但是項目非常小，就放棄了這個選擇自己開始手寫。
首先我考慮到的是過渡效果。
并且找到了相關的文章參考。
代碼如下：
``參考：
https://yq.aliyun.com/article...2.路由帶參數(shù)跳轉(zhuǎn)這個就是記錄一下，有三種方法。
1.直接在route-link:to 中帶參數(shù)：
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://blog.csdn.net/jiandan...3.移動端引入外部字體樣式移動端引入外部樣式，我用的是直接把字體庫的字體下載下來，一般后綴為 .ttf/.otf等。
在asset文件下創(chuàng)建 fonts文件，將字體文件全部放入。
再新建一個.css文件，相當于注冊你下載的字體，可以自定義給字體們命名，不過一般還是按照以前的名字。
src是文件所在的路徑。
在需要的地方使用就可以了：
font-family：
"PingFang"4.使用htmtl2canvas截圖功能，轉(zhuǎn)換成圖片先下載html2canvas包：
cnpm i html2canvas -S / import html2canvas from '
html2canvas'
;
查看文檔 ：
點擊進來直接生成圖片 利用微信長按保存圖片功能來保存setTimeout(() => {
//這里用定時器是因為頁面一加載出來我就展示的是圖片 為了防止圖片還未生成 給點時間 html2canvas(document.querySelector("#top"), {
useCORS: true, //是否嘗試使用CORS從服務器加載圖像 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);
題外話：
當時做這個的時候真的有點懵。
官網(wǎng)文檔太少了，當時遇到圖片跨域問題，找了好久，可能是我沒有仔細Jan官網(wǎng)的參數(shù)配置文件。
浪費了很多時間，哭哭。
參考鏈接：
http://html2canvas.hertzen.com/5.使用微信接口(前端部分)我們用微信SDK接口主要是做的登錄和分享功能，首先是上微信公眾平臺上邊看看，把權(quán)限搞好之后后端配置。
前端只需請求得到數(shù)據(jù)，在進行一些配置就可以。
這里主要介紹分享給朋友和分享到朋友圈功能：
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è)號的唯一標識，此處填寫企業(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: "******", // 分享標題 desc: "*********", // 分享描述 link: "**********", // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: "******", // 分享圖標 success: function() {
***** 執(zhí)行結(jié)束后執(zhí)行的回調(diào) }
}
);
wx.updateAppMessageShareData({
title: "*******", // 分享標題 desc: "*********", // 分享描述 link: "*********", // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: "********, // 分享圖標 success: function() {
******* }
}
);
}
);
}
6.移動端屏幕適配現(xiàn)在我們移動端屏幕適配，我用的是rem，之前也有看到說有一個felxable.js的庫，后來去查，說是有更好的作者放棄了，并且給我們提供了鏈接，哈哈哈哈真的太可愛了。
準備抽時間去仔細看看，公司下一個項目又來了，真的加班了好久，為了如期完成項目，完成之后立馬就新開項目，有點心累，這把應該是APP了，完全沒有任何經(jīng)驗，嗷嗷只能硬著頭皮做，還是要恰飯的，可憐的應屆狗不敢造次。
下面分享一下rem適配的代碼：
//默認調(diào)用一次設置 setHtmlFontSize();
function setHtmlFontSize() {
// 1. 獲取當前屏幕的寬度 var windowWidth = document.documentElement.offsetWidth;
// console.log(windowWidth);
// 2. 定義標準屏幕寬度 假設375 var standardWidth = 375;
// 3. 定義標準屏幕的根元素字體大小 假設100px 1rem=100px 10px = 0.1rem 1px 0.01rem var standardFontSize = 100;
// 4. 計算當前屏幕對應的根元素字體大小 var nowFontSize = windowWidth / standardWidth * standardFontSize + '
px'
;
// console.log(nowFontSize);
// 5. 把當前計算的根元素的字體大小設置到html上 document.querySelector('
html'
).style.fontSize = nowFontSize;
}
// 6. 添加一個屏幕寬度變化的事件 屏幕變化就觸發(fā)變化根元素字體大小計算的js window.addEventListener('
resize'
, setHtmlFontSize);
把這段代碼引入到main.js里面，然后使用轉(zhuǎn)換器把px轉(zhuǎn)成rem 就可以了。
7.其他問題匯總1.點擊事件點擊多次只執(zhí)行一次：
可以使用.once修飾符 還有很多有用的修飾符，大家有時間可以去看看~~2.使用ios輸入框的時候，鍵盤彈起來回遮擋下面的按鈕等元素的事件：
我們可以給input注冊一個失去焦點事件，當失去焦點的時候設置document.body.scroolTop = 0;
3.打包項目遇到靜態(tài)資源不展示的現(xiàn)象或者是路徑錯誤：
我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文檔上面有介紹，如果需要修改配置，就新建一個vue.config.js文件，他會自動的覆蓋之前的文件。
主要是修改成：
publicPath: "./"，文檔已經(jīng)沒有baseUrl，現(xiàn)在全部使用publicPath,跟著文檔配置就ok了。
相關教程：
Vue框架視頻教程以上就是如何使用vue完成微信公眾號網(wǎng)頁的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
vue.js html5 html css javascript本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信公眾號的二次開發(fā)框架--微擎基本介紹
下一篇：
微信公眾號網(wǎng)頁授權(quán)詳解相關文章相關視頻如何理解vue數(shù)據(jù)雙向綁定原理vue.js計算屬性是什么？（代碼示例）vue3.0什么時候發(fā)布的vuex是什么如何使用vue完成微信公眾號網(wǎng)頁VUE基本的路由結(jié)構(gòu)深入vue組件初始化vue項目 [溫州做微信公眾號]