小程序开发入门实例分享之新建一个商城项目

前言

小程序出来也有一段时间了，不过好像并没有预期的那样激起千层浪。只是刚出来的时候热了几天就趋于平淡了。除了业内人员，吃瓜群众似乎连看一眼的心思都没有了，更别说体验了。不过微信一定会有进一步动作的，应该是会放开一些权限，毕竟是花了大力气搞的亲儿子。

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