微信小程序APP（商超營銷類）經驗總結

項目介紹

這是一款主打門店營銷的小程序。包括首頁、門店、營銷、我的設置、登陸、數據統計展現、營銷設置等。

原本要獨立完成整個項目，包括先後端一套的，有些意外因素，項目臨時收尾（說明：只完成了前端的部分，後端未完成）。

管理大師們說過：一個好的項目，必須有一個好的收尾，好的收尾，就必定要有好的經驗總結。

因而乎，我索性將成果拿出來給各位分享了，旨在總結經驗教訓，跟各位交流小程序開發。

整個項目23個獨立頁面（不算雷同的頁面），從資料準備到開發完成，歷史4.5個工做日，大約25小時。

今年多作的是Python與Java，霎時將思惟切換至移動端頁面開發，忽然有些不適應，竟然花費25個小時完成這些頁面，心理深感慚愧，項目歷程大致上主要是體力負擔重一些，不過還好，藉此機會三刷了CSS的教程，N刷了小程序文檔。老祖宗說過，熟能生巧嘛！

點擊跳轉至本人我的主頁

項目截圖

截圖1

截圖2

截圖3

項目經驗總結

第一步 收集項目需求

收集任務
按照原型圖，提取UI元素，上網找尋web UI組件。	信息來源：文檔3
根據UI元素提取組件/插件關鍵字及下載連接、組件demo、組件源碼	搜索引擎、 小程序開發文檔、 文檔一、文檔2

第二步小程序知識儲備

第二步：根據任務預備開發知識
知識點總結	連接
小程序開發文檔	小程序官方文檔
文檔連接1	Github 小程序開源組件庫：
文檔連接2	Github 小程序開源組件庫
文檔連接3	css教程
wxml	view、左右滑動、上下滑動、九宮格、複用
wxss	上下排列、左右排列、均分、內邊距、外邊距、
js	本地緩存、點擊事件、渲染事件、網絡請求
異步	worker組件 多線程
chart	echart小程序版介紹連接 備選方案 wx-chart
產品需求	餅圖 柱狀圖 折線圖 延遲加載 頁面不阻塞滾動 頁面建立多圖表
下拉選擇	相似文字識別底部action-sheet
多類型list	citySelect 備選方案 wx-alphabetical-listview
	https://github.com/zhongjie-chen/wx-scrollable-tab-view
下拉彈框	menudown 備選方案： 下拉1 下拉2
左滑刪除	minapp-slider-left
圖片預加載	img-loader
請求隊列管理庫	wx-promise-request
md5加密	wxmd5
base64	wxbase64
websocket	weapp.socket.io
富文本	wxparse
聯動等常見樣式	youzan-ui
時間+日期選擇器	http://www.javashuo.com/article/p-aovwxfpw-ha.html

參考歷史項目——商城小程序

參考歷史項目是一款商城類小程序，複用、借鑑了部分面細節和樣式設計

歷時時長總結

拿到UI，制定開發計劃	預計1天 實際0.5天
純頁面開發	預計7工做日 實際4工做日
小程序開發總時長	4.5工做日，實際25小時
總結：	23個頁面，若是能全力開發，應該能縮短至20個小時左右完成。