《試用》--項目總結

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

  

------------------------------------------待續-------------------------------------------------

相關文章
相關標籤/搜索