前言

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

Mabe it's life

不作不會(huì)死

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

準(zhǔn)備

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

知識(shí)積累

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

2.接下來梳理一下小程序的知識(shí)點(diǎn):

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

API：這部分根據(jù)需求去看，我這邊只用到了網(wǎng)絡(luò)請(qǐng)求和獲取系統(tǒng)信息，其他的我也沒仔細(xì)去看

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

開動(dòng)

目錄結(jié)構(gòu).png

新建一個(gè)項(xiàng)目呈現(xiàn)的項(xiàng)目結(jié)構(gòu)大概這樣子的，我會(huì)以Android的思路來講解這部分(了解頁面的生命周期很重要)

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

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

images 相當(dāng)于drawable里面是所有項(xiàng)目中需要用到的圖標(biāo)，圖標(biāo)不要太大太多，因?yàn)槲⑿艑?duì)于小程序的大小是有限制的。

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

utils 封裝了一些公共的函數(shù)方法

外部框架搭建

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

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. } 

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

.wxml+.wxss構(gòu)成layout

.js相當(dāng)于Activity

.json 重置頁面的window

下面我主要講一下遇到的問題和易錯(cuò)點(diǎn)，僅供參考

布局模板需要在.wxml和.wxss導(dǎo)入@import "item.wxss";

因?yàn)槲业男〕绦蛑杏泻芏嗔斜?，所以列表的item我是用模板來寫的，這時(shí)候就出現(xiàn)item的下標(biāo)傳不進(jìn)去的情況

共用方法需要導(dǎo)出module.exports = {

showSuccess: showSuccess

}

page的.js中變量的值在頁面關(guān)閉后會(huì)保留，需要在onUnload初始化

提交審核

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

部分截圖

首頁.jpg

收藏夾.jpg

我的.jpg

我的訂單.jpg

商品詳情.jpg

結(jié)算.jpg