需求場景
這個微信網(wǎng)頁是一個用戶測試的活動。開始測試之前需授權(quán)獲取用戶信息，所以新建一個firstPage頁面作為/頁面來判斷需不需要授權(quán)。如果測試完成分享給用戶，用戶看到的是分享人的結(jié)果頁面，這個頁面是不需要授權(quán)的。掃描其中的二維碼開始測試才需要授權(quán)。所以在前端路由里傳一個query 的參數(shù)。根據(jù)這個參數(shù)(this.$route.query.xxx)判斷，用戶打開的是結(jié)果頁（不需授權(quán)）還是測試頁（需授權(quán)）。
流程
綁定域名
引入JS文件
import wx from 'wx-sdk-ts'
- vue-cli2.0 引入的是
import wx from'weixin-js-sdk'
通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用）
- 所以獲取微信配置的代碼寫在App.vue文件里。created鉤子函數(shù)里調(diào)用一次。watch到route變化時也調(diào)用一次。
- 分享給好友的結(jié)果頁，里面動態(tài)生成的二維碼url需攜帶當前用戶的信息。以便在授權(quán)頁面拿到分享人的信息。為了方便，授權(quán)頁面最好獨立寫到一個文件里 page_relation.vue
記錄開發(fā)過程中幾個坑
- 如果項目采用非history模式(vue-router默認 hash 模式 )，則需要去掉url上#后的部分傳給后端換取微信簽名.
- 授權(quán)這里由后端處理。授權(quán)完成后由后端將頁面重定向到指定頁面.
let url = encodeURIComponent(
" http://xxx.cn/h5/migrationQuiz/auth?router_path=home&fromwxuser="
);
url = url + userId;
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6e8235ac81ee7570&redirect_uri=" +
url +
"&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
這里注意：因為前端路由是帶#的。比如重定向后跳轉(zhuǎn)的頁面是：http://xxx.cn?id=xxx#/home 這個時候如果直接給后端這個地址，發(fā)現(xiàn)這個頁面是找不到的。在這個項目中后端在路由里傳入了一個router_path的參數(shù)。我要重定向到#/home頁面，就在地址中加上router_path=home即可。另外附上后端nodejs代碼?？吹竭@個，大家應該不難懂了。
- 另外，為了方便前端測試，我們可愛的后端還兼容了本地配置的域名，參照如下代碼
let debug_redirect_url = encodeURIComponent("www.example.com");
let url = encodeURIComponent(
" http://xxx.cn/h5/migrationQuiz/auth?debug_redirect_url=" +
debug_redirect_url +
"&router_path=home&fromwxuser="
);
如上，本地開發(fā)配置的域名為：www.example.com
這里注意：為了能夠正常使用開發(fā)者工具調(diào)試，配置的域名應在公眾號JS接口安全域名下。
- 分享給好友、分享到朋友圈時，發(fā)現(xiàn)左小角的圖標找不到。正確做法時將這些圖片放到服務器上。url使用服務器的鏈接。
- 分享的link，根據(jù)分享后用戶需要看到的內(nèi)容而定，需要在子組件將link，emit到App.vue里進行獲取。
本項目中用戶測試完成的結(jié)果頁result.vue頁面里，需將分享鏈接發(fā)送給 App.vue。其他情況下sharelink默認為網(wǎng)站的初始頁。 - 打包到服務器時發(fā)現(xiàn)文件都404，在vue-cli2.0的處理方式是：
build -> config -> index.js -> build{} -> assetsPublicPath: './'
由于本項目中用到了vuecli3+typescript: 所以相應的配置如下：
-
由于本項目最后生成的結(jié)果頁是一個html頁面。而產(chǎn)品的需求是，在最終的結(jié)果頁面，可以長按保存成圖片，也就是要在前端將h5頁面生成一張圖片。用到了html2canvas。具體使用方式參見代碼。在處理這個功能的時候，也遇到了一個大坑。參照如圖所示:
canvas.png
就是因為最終要生成的圖片有用戶的微信頭像，跨域了，不得不說，微信還是很坑的。最終后端給的解決方案是：
將用戶的微信頭像改成通過我們這邊h5的服務器來獲取,然后再發(fā)給前端頭像地址,改成用我們的服務器的地址。
至此，這個項目就算完工了。
最后
由于本項目使用微信開發(fā)者工具進行本地測試，需配置本地域名（www.example.com），且配置的域名應在公眾號JS接口安全域名下。測試過程中使用到了nginx，所以附上nginx的配置代碼。
- 找到本地host文件
windows系統(tǒng)：C:\Windows\System32\drivers\etc
127.0.0.1 localhost
127.0.0.1 www.example.com
- nginx開機：
start nginx
- 重啟nginx
nginx -s reload
- 配置nginx: D:\nginx-1.14.0\nginx-1.14.0\conf\nginx.conf
server {
listen 80;
server_name www.example.com;
// 跨域配置
location ^~ /h5/ {
proxy_pass http://xxx.cn;
}
// 代理到本地
location / {
proxy_pass http://localhost:52152;
}
# location / {
# root html;
# index index.html index.htm;
# }
}
其他情況請參考幾篇不錯的文章：
https://juejin.im/post/5aef2db3f265da0b9c10899e
http://www.itdecent.cn/p/1a35e1dbe1ad
另附本項目github地址：https://github.com/clara222/wxh5
