小程序学习笔记-优快云博客

小程序项目搭建

最近李狗蛋很是忧愁啊，因为老板又给他新任务了，让他搞一个洋葱小督班的小程序出来。狗蛋当时就懵了，之前从来没搞过啊。于是乎，狗蛋就来向胖哥请教啦，胖哥说你得先把项目搭建起来，主要分为一下两步：

根据场景注册小程序
1> 打开微信公众平台(mp.weixin.qq.com/) 2> 在账号分类里面选择小程序 3> 前往注册根据需求选择是个人，企业，政府等
下载微信开发者工具，快速生成项目
经过第一步后，其实就会进入小程序管理界面，然后按照帮助文档(developers.weixin.qq.com/miniprogram…),开启你的第一个小程序吧。这里特别强调在选择模版的时候选择建立普通快速启动模版就好。

小程序开发

狗蛋经过胖哥的初步指导已经可以很溜的搭建小程序项目了，可是每次就是出现一个hello也没有什么卵用啊。狗蛋只好硬着头皮再次去找胖哥啦。胖哥说了一下几点：

JSON配置 JSON配置又分为全局配置和局部配置: JSON全局配置：app.json里面是当前小程序的全局配置，包括小程序的所以页面路径、界面表现、网络超时、底部tab等 JSON局部配置：pages目录下面每一个页面的配置，具体配置文档可以参考(developers.weixin.qq.com/miniprogram…)
WXML 小程序的wxml充当类似html的角色。区别：小程序中的标签只有：view, button, text等，这些标签已经是小程序包装好的。还提供了，地图，音频，视频等组件的能力小程序中多了wx:if 和 {{}} 的表达式
WXSS wxss具有css大部分特性区别：1> 新增了尺村单位rpx,省去了屏幕适配以及换算的麻烦。 2> 提供了全局样式app.wxss和pages/目录下的局部样式 3> 仅支持部分选择器详情(developers.weixin.qq.com/miniprogram…)
数据驱动视图前端编程属于GUI编程的范畴，这两年前端发生了很大的变化，一些后端的思想例如：mvvm,mvc等也被前端开发人员广泛的接受并在不同的工程项目中实现，小程序也是深受这些思想的启发，站在巨人的肩膀上。因此弄明白这些变化，对于我们开发小程序是很有必要的。上面说了这么多，其实本质伤的变化就是从时间驱动的思维转变到以数据驱动的思维上来。
- 事件驱动 GUI应用程序的特点是注重与用户的交互，因此程序的执行取决于与用户的实时交互情况，大部分的程序执行需要等到用户的交互动作发生之后。
- 事件驱动编程开发静态页面。添加事件监听，包括用户输入、http请求、定时器触发等事件。针对不同事件，编写不同的处理逻辑，包括获取事件状态/输入、计算并更新状态等。根据计算后的数据状态，重新渲染页面。通俗地说，事件驱动思维是从事件响应出发，来完成应用的设计和编程。典型的就是jquery
- 数据驱动数据驱动 vs 事件驱动：事件驱动：1> 构建页面：设计DOM => 生成DOM => 绑定事件 2> 监听事件：操作UI => 触发事件 => 响应处理 => 更新UI 数据驱动：1> 构建页面：设计数据结构 => 事件绑定逻辑 => 生成DOM 2> 监听事件：操作UI => 触发事件 => 响应处理 => 更新数据 => 更新UI 数据驱动思维: 其实最大的转变是，以前会把组件视为DOM，把事件/逻辑处理视为Javascript，把样式视为CSS。而当转换思维方式之后，组件、事件、逻辑处理、样式都是一份数据，我们只需要把数据的状态和转换设计好，剩下的实现则由具现方式（模版引擎、事件机制等）来实现。
路由路由其实可以看作小程序中每个页面的路径,这些路径都是在app.json中进行配置。换言之其实就是小程序定义的一套页面间如何跳转的问题。包括一下：
- 初始化
- 打开新页面
- 页面重定向
- 页面返回
- tab切换
- 重加载具体开发的时候可以参考(developers.weixin.qq.com/miniprogram…)
生命周期生命周期其实是跟路由相关的，说白了就是页面从加载到完全展示到离开这个页面这一系列的过程，对应的小程序给出了一系列相对应的回调
- 页面加载 onLoad(Object query)
- 页面显示 onShow()
- 页面初次渲染完成 onrReady()
- 页面隐藏 onHide()
- 页面卸载 onUnload()
三方组件开发微信小程序的过程中，选择一款好用的组件库，可以达到事半功倍的效果。
- WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。 GitHub地址：github.com/Tencent/weu…
- iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小程序版本。 GitHub地址：github.com/TalkingData…
- ZanUI WeApp ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。 GitHub地址：github.com/youzan/zanu…
- MinUI MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具。 GitHub地址：github.com/meili/minui