小程序开发（购物车页面）

1、小示例

主要实现的事件：（1）商品的加减  (2)单选和全选（3）合计

（视屏转换成GIF,想做表情包的可以尝试哦）

2、开发准备

---

（1）注册小程序帐号

        注册过程中可看到自己的appId后续开发需用到。（微信小程序账号注册（登录））

（2）开发工具下载

        注意选择合适自己电脑的版本（小程序开发工具）

（3）熟悉开发工具和开发文档

        文档中介绍一些关于逻辑层和视图层的开发方式，以及一些插件和组件，看懂开发文档是很有帮助的，基本就可以动手写写简单的页面了。（开发文档）

3、开发过程

---

（1）先看demo熟悉下，搭建开发环境并熟悉。

（2）了解怎么控制页面跳转和页面渲染、写事件。

（3）了解每个文件夹的作用

        pages内例如index就是一个页面，而index里面的.wxml类似于jsp，.wxss则是控制其样式（相当于css），index.js用于存放事件。所以在pages是存放页面的。而图片的存放我们可以再pages内或者外再建一个文件夹进行存储。

(4)分步进行

       页面+导航栏。页面如（3）介绍的。接下来介绍下导航栏。

        导航栏主要都写在app.json和app.wxss中，后者主要控制样式，前者决定导航栏有几项（有限制最多只能有几个），在list里面存放导航栏的名称以及矢量图标（阿里矢量图标），selectedIconPath表示被选中时的图标，iconPath未被选中时的图标，pagePath为对应的页面路径，同样必须加入顶部的pages(如果先做导航的可能会遇到新建了一个页面可是还报错，那是因为在pages底下的页面的.json内不允许空，可以先用“{}”花括号占着）。这就是导航栏的步骤，是不是很简单。

4、源码

源码地址（提取密码：gs5r）

5、参考资料

（1）小程序导航栏

（2）小程序简单页面编写

（3）小程序学习笔记