各种微信小程序demo

#一、前言 - 2016年11月初，微信公众平台发布公告，宣布微信小程序正式开放公测。允许开发者将产品提交至微信公众平台审核，但是暂时不支持发布。 - 作者本人是从事iOS 开发的，但从小程序出来到开放公测，一直都想去研究研究，奈何各种"因素"没有去试（*上班有公司项目，下班就去夜跑，哈哈，反正就是借口*）到 2016.12.11日，公司也有意做小程序开发，终于定下心来研究一番，在此分享一下。 - 学习首先肯定去看 [官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161122) ，当然只看不行，起码敲一个Demo出来嘛，看着文档还比较详细，结构层级还是很清晰的，而且官方也有一个[Demo](https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html?t=20161122)做部分功能演示,扫码就行，既然功能不是很完善，那就自己写一个 完整的小程序版 的 小程序官方文档吧！也算是个人项目！当然，**代码都是自己写的，没任何抄袭官方的Demo。** - 本来打算把功能完善了再开文章分享，但考虑到功能点比较多，遇到的坑肯定很多，而且作者也是新手，短时间内是不可能完成，所以先分享文章，方便记录 **[开发小程序中遇到的各种问题](http://www.jianshu.com/p/1052b4f7eb5b) **，功能也能持续更新，经历两天时间，目前已经完成文档的目录搭建，看图：  #二、通过本文你能了解什么 - 1、本文会简单介绍一下小程序，有个大概了解，什么是小程序 - 2、可以大概知道小程序开发需要准备什么东西，并简单说明开发的流程 - 3、可以先知道小程序开发过程中有什么哪些要注意的问题（我在前面踩坑呢） - 4、有个持续更新的Demo，并有对应的注释，看不懂代码，还看不懂文字么 #三、小程序 - 1、什么是小程序 >其实小程序就是类似之前的服务号，公众号的存在，看下图，引用Allen Zhang 的话：“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。”  - 2、小程序的影响 >现在流量越来越来，手机网络也是越来越好，网页端现在确实越来越火了，原生移动端的小伙伴都开始不淡定了，我也是一直从事iOS 开发，说实话，我一点都不担心，没有为什么的，出来就学嘛！编程的东西，原理思路都一样，只不过实现代码换了而已，到现在为止，小程序的开发工具一个大版本都没有（最新版本是0.11.112301），发展还需要一段时间，这段时间够你去学的啦 - 3、小程序究竟是用什么语言 >个人认为是**修改版的HTML、CSS、JS**，因为它跟前端的很像，只是变了些东西，例如没有HTML 的 `div` 容器，现在可以用 `view` 、`scroll-view` ，等下再分析；如果你是接触过前端开发一段时间，那你上手估计只需要几个小时，或者更短，如果你是做其他开发，没接触过前端开发，那你就需要去熟悉一下HTML、CSS、JS 的语法了，推荐几个网站：(不分先后) >- **[菜鸟教程](http://www.runoob.com/)** ，作者也是在这学习的喔 >- **[1纳米学习](http://1nami.com/)** ， 这个网站比较全面，总有你需要的 >- **[简书](http://www.jianshu.com/)** ，程序员很多都在简书开源，我也是其中之一 >- **[Github](https://github.com/)** ， 这个不解释 >- **[sololearn](https://www.sololearn.com/)**，这个是纯英文的，不过挺好的，一步一步学习 #四、开发前的准备 - 1、熟悉HTML、CSS、JS 的语法（这点最重要） - 2、下载专门的 [小程序开发工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122) ，然后安装 - 3、开发工具的使用 - 点击打开，需要扫二维码，界面就是这样  - 添加新项目，填写基本信息就进入开发界面了，如果是点击历史项目，直接进入开发界面，当然如果无 AppID 部分功能受限，例如跳转效果就会很难受（这里就不作演示）  - 进入开发界面   #五、小程序的文件格式 [文档](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161122)  - **1、js 文件是 数据获取（其中Page必须是首字段，不能修改，数据都放data里面，自定义事件同级）** ``` //获取应用实例 var app = getApp() Page({ // 数据，在 WXML 中 通过 {{motto}} 就可以拿到对应 data 中的 motto 字段的值 data: { motto: 'MiHome_Store', userInfo: {}, indicatorDots: true, autoplay: true, interval: 3000, duration: 100 }, //事件处理函数，可以通过 bindViewTap: function () { wx.navigateTo({ url: 'http://222.178.203.72:19005/whst/63/=cnvmknZczbrcmzmds///download/logs/logs' }) } }) ``` - **2、wxml 文件是 数据界面展示 ，跟HTML 一样，只是标签不一样了，可参考官方文档**  - **3、wxss 文件是 界面样式修改，更CSS 差不多，貌似暂时不能完美兼容CSS3**  - **4、json 文件是 基本配置（导航栏、tabBar创建什么的）（如果是在app.json 中写的就是全局配置；如果在对应页面中写就指定页面的配置（比如设置子页面的导航栏`navigationBarTitleText`），但是pages只能写在app.json 中）注意：app.json 中的pages 中一定要配置路径，对应你项目的文件真实路径** ``` 不设置全局窗口window { "pages":[ "pages/index/index", "pages/logs/logs" ] } ``` ``` 设置全局窗口window，在app.json 中设置 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } } ``` ``` 单独页面中设置窗口配置信息，不需要添加window标签 { "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "gitkong", "navigationBarTextStyle":"black" } ```  #六、我是怎么写出来的（代码比