前言

小程序出來也有一段時間了，不過好像并沒有預期的那樣激起千層浪。只是剛出來的時候熱了幾天就趨于平淡了。除了業內人員，吃瓜群眾似乎連看一眼的心思都沒有了，更別說體驗了。不過微信一定會有進一步動作的，應該是會放開一些權限，畢竟是花了大力氣搞的親兒子。

Mabe it's life

不作不會死

手癢的我自是要玩一玩這個小程序咯，不幸的是被老大看見了;老大就把公司產品小程序的開發工作交給我了。大哥，我是Android開發啊，這個應該交給前端吧!工作就是這樣，是沒有理由的。自己種的苦果，含著淚也要吃下去。自此開始了苦逼的開發(摸索)之旅，歷時七個工作日，萬幸不辱使命搞出來了。

準備

為了方便測試最好自己弄一個Appid，直接選擇政府類型，隨便填一個政府名稱就好。

知識積累

1.首先需要學習html，css，js。不需要很全面的學習。這個是html和css是必須要會的，否則你也界面都碼不出來。在w3c學習就可以了https://www.w3school.com.cn/

2.接下來梳理一下小程序的知識點:

組件：包含了微信封裝的一些組件，這部分只需要簡單的瀏覽，腦子中有個概念就行，用到的時候再細看

API：這部分根據需求去看，我這邊只用到了網絡請求和獲取系統信息，其他的我也沒仔細去看

框架：這部分需要仔仔細細的看，尤其是數據綁定，條件渲染，列表渲染，*模板，事件

開動

目錄結構.png

新建一個項目呈現的項目結構大概這樣子的，我會以Android的思路來講解這部分(了解頁面的生命周期很重要)

app.js 相當于Application，管理整個App的生命周期，這里還包含一些全局函數(如登錄)和全局變量(如Token,域名)

app.json 小程序全局配置，包括(pages頁面路徑配置;window窗口表現配置;tabBar 底部 tab 的表現;networkTimeout網絡超時時間配置;debug設置是否開啟debug模式)

images 相當于drawable里面是所有項目中需要用到的圖標，圖標不要太大太多，因為微信對于小程序的大小是有限制的。

pages 所有的頁面，每個頁面建一個文件夾，這邊有一個巧妙的方法(在app.js配置好page，那么這個頁面的所有文件自動生成了)

utils 封裝了一些公共的函數方法

外部框架搭建

這邊采用了大多數app的tab切換的方式，只需要在app.json中配置，整個外部框架就成型了

1. { 
2.  
3. "pages": [ 
4.  
5. "pages/homepage/homepage", 
6.  
7. "pages/trolley/trolley", 
8.  
9. "pages/mine/mine", 
10.  
11. "pages/order/order", 
12.  
13. "pages/address/address", 
14.  
15. "pages/detail/detail", 
16.  
17. "pages/blance/blance", 
18.  
19. "pages/comment/comment", 
20.  
21. "pages/remind/remind" 
22.  
23. ], 
24.  
25. "window": { 
26.  
27. "backgroundTextStyle": "light", 
28.  
29. "navigationBarBackgroundColor": "#ED5085", 
30.  
31. "navigationBarTitleText": "挑趣特賣商城", 
32.  
33. "navigationBarTextStyle": "white" 
34.  
35. }, 
36.  
37. "tabBar": { 
38.  
39. "backgroundColor": "#ffffff", 
40.  
41. "color": "#A3A3A2", 
42.  
43. "selectedColor": "#ED5085", 
44.  
45. "list": [ 
46.  
47. { 
48.  
49. "pagePath": "pages/homepage/homepage", 
50.  
51. "text": "爆款特賣", 
52.  
53. "iconPath": "images/homepage_nomal.png", 
54.  
55. "selectedIconPath": "images/homepage_select.png" 
56.  
57. }, 
58.  
59. { 
60.  
61. "pagePath": "pages/trolley/trolley", 
62.  
63. "text": "購物車", 
64.  
65. "iconPath": "images/trolley_nomal.png", 
66.  
67. "selectedIconPath": "images/trolley_select.png" 
68.  
69. }, 
70.  
71. { 
72.  
73. "pagePath": "pages/mine/mine", 
74.  
75. "text": "我的", 
76.  
77. "iconPath": "images/mine_nomal.png", 
78.  
79. "selectedIconPath": "images/mine_select.png" 
80.  
81. } 
82.  
83. ] 
84.  
85. }, 
86.  
87. "networkTimeout": { 
88.  
89. "request": 20000, 
90.  
91. "connectSocket": 20000, 
92.  
93. "uploadFile": 20000, 
94.  
95. "downloadFile": 20000 
96.  
97. }, 
98.  
99. "debug": true 
100.  
101. } 

接下來就是寫一個個界面了，每個界面包含.wxml,.wxss,.json,.js

.wxml+.wxss構成layout

.js相當于Activity

.json 重置頁面的window

下面我主要講一下遇到的問題和易錯點，僅供參考

布局模板需要在.wxml和.wxss導入@import "item.wxss";

因為我的小程序中有很多列表，所以列表的item我是用模板來寫的，這時候就出現item的下標傳不進去的情況

共用方法需要導出module.exports = {

showSuccess: showSuccess

}

page的.js中變量的值在頁面關閉后會保留，需要在onUnload初始化

提交審核

提交審核之前一定要測試完全，千萬不要把未測試的版本放上去，測試階段可以先設置為體驗版。有幸兩次提交都是第二天就通過了，并沒有遇到審核不過的問題。

部分截圖

首頁.jpg

收藏夾.jpg

我的.jpg

我的訂單.jpg

商品詳情.jpg

結算.jpg