1、前言javascript
臨時來了一個需求,作一個試用(只支持微信打開)的項目。就是咱們提供爲商家提供一個試用的平臺,商家把淘寶上賣的商品放到咱們的平臺免費給用戶試用,用戶能夠在咱們商城去尋找的合適的產品進行申請試用,按照任務流程申請,得到領取資格後, 去指定平臺完成下單購買, 待完成收貨肯定評價等任務以後,平臺將會將你墊付的資金返還。vue
2、項目概述java
一、該項目基於微信公衆號中h5單頁面應用(只作了微信受權登陸)webpack
二、包括內容:首頁 + 試用進度 + 我的中心ios
三、技術棧:vue + vuex +vux + vue-router+ webpack + es6 + lesses6
3、項目結構web
該項目是基於咱們腳手架搭建的項目,目錄結構大體爲:vue-router
4、項目技術點補充說明vuex
一、一些公共組件主要有:axios
手機號綁定、淘寶包號綁定、圖片上傳、圖片預覽、通用模態框、通用button、加載更多
二、全局混入mixins全局方法,如微信簽名、微信自定義分享、設備信息收集、添加統計埋點等
三、採用vuex作狀態管理,結合路由攔截器,axios攔截、對數據進行暫存,減小請求數量,且保證用戶刷新時候能獲取最新數據
5、遇到的問題及解決過程
一、處理每一個路由頁面自定義的分享內容;
處理辦法:watch路由的變化,從新設置share的方法
二、上傳圖片時候,axios沒法監聽到上傳進度,沒法展現進度條。降級方案是用loading代替。
三、在作接口攔截的時候,應該針對不一樣接口特殊處理,避免不必的請求;
四、引進第三方ui庫-vux;由於wepack配置使用的px2rem方案,致使引入組件也被靜態編譯成rem。
由於項目是基於750px的設計稿,vux是基於375px的設計稿,致使編譯以後ui樣式小一輩;降級方案是,保存本來方案,在編寫樣式的時候,定義樣式/2px;
五、http向https作遷移的時候,後天須要從新配置公衆號綁定域名,否則微信前面失效,沒法正常使用js-sdk的功能;
六、注意使用js-sdk的debug模式,方便調試,由於當初蒂定義微信簽名失效這個問題花了很多時間;
七、合做開發、採用統一的eslint規則方式統一代碼風格,可是window和mac開發環境致使出現爲題。處理辦法是,再window系統上的eslintrc.js作降級處理;
八、儘可能少用watch事件,會致使vue從新渲染過於頻繁。
九、新用戶受權登陸的時候,出現兩次受權登陸頁面,應該是後臺少加了一個字段:connect_redirect=1 這個參數
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=xxx&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
------------------------------------------待續-------------------------------------------------