今天有时间和大家分享下鄙人这段时间对微信小程序的开发心得。
首先，微信小程序对于小白来说，也没有想象的那么难。只要你有JS、HTML、CSS基础，上手真的不难，但是肯定要度娘不离手了，但至少咱可以搞啊，是吧，啊哈~
此处提供本人的电商类的处女作，希望能对猿友们起到帮助~
我呢就是从一个小白开始的，所以刚开始上手的时候，真的是一脸懵逼啊。那怎么办呢？我先分享下学习历程及一点经验：
1.要有H5基础，没有或者不懂，那真的玩不来。`先去补补吧，推荐imooc，有很多不错的全套的基础学习资源。`
2.先安装好编译器。然后到官方网上，仔细的阅读官方文档，真的是很详细，很全面的文档。`（PS：开发中各种不论是网络请求，还是数据存储，亦或者是UI方面的API全都在文档里了，而且都有demo）`
3.搜集一些与你要开发的小程序类别相同的开源项目，先备着。`最好找一些比较新的，旧一些的你看起来会比较吃力，因为很多东西都过时了`
4.开始准备上手，开撸！！！撸的时候就直接撸项目就好，不要去撸个button啊或者image啊什么的这种控件级的demo了。果断撸项目，遇到问题就直接去看你准备好的开源项目，去参考人家的写法。
5.这个时候呢，大体上，一些常规的UI是都可以的了。但是呢，肯定会有一些特别的UI需要实现。这个时候就需要自定义了，对~自定义。可以先百度下`<template>`包裹的相当于一个组件。后面用就可以直接`<template name='xxx' data='{xxx}'></template>`就好啦。
6.UI布局方面呢。说实话之前写OC代码，搭一个普通的页面UI部分的代码也要近百行~~，但是用HTML+CSS真的是爽到爆！一个页面下来可能就十几行的代码，UI创建+布局就搞定了。真的是爽。
7.JS方面，就是放逻辑代码的。和平时的开发代码没太大差别，主要就是一些API的不同而已。看下官方文档，就都懂了，比较简单~
再分享下项目里的一些代码片段，及一些心得吧：
1.先明确小程序的几个文件(.js .json .wxml .wxss)
.js 就是写js代码的文件了
.json 就是负责控制navigation的一些属性的，比如title, color, 等，查看文档会有相关的说明
.wxml 类似HTML。主要写UI代码
.wxss 类似于CSS。主要写布局代码
2.熟悉.js文件中的Page()函数内的生命周期的相关方法。
data:{} 是用来存放成员变量的
onLoad:{} 相当于 iOS的ViewDidLoad
onReady:{} 相当于 ViewWillAppear
onShow:{} 相当于 ViewDidAppear
onHide:{} 相当于 ViewDidDisappear
通过介绍，猿友们应该知道各个方法内，写什么样的代码了吧哈。
基本上，网络请求，成员变量的赋值，或者接收上一级页面传递的值，都是在onLoad方法内做的。
其他文件就没什么需要特别说明的了
3.还有比如上拉加载，下拉刷新，官方也都有提供相应的方法。不需要自定义，除非有特殊需求，一般是够用的了。再有比较难一些的就是数据传递了。
`比如说网络数据的展示流程`
`.js(网络请求->赋值到成员变量)->.wxml(<view>{{成员变量}}</view>)`
如果是涉及到布局相关的数据的话，那是不能传递到.wxss文件内的。这样就只能将css代码写到.wxml文件内了，
比如：`demo中personal文件下的.wxml文件中的login类及unlogin类的替换`
就用到保存状态的变量来update页面状态。
可以参考Demo中personal中.wxml的第10行代码
4.搭建UI的时候经常会使用到for循环来遍历数据。
微信也很友好的为我们提供了相应的函数。
比如我们想展示商城中的所有鞋子，那么该数据的json格式大概是shopping_list=[{"id":1, "name":"男鞋", "size":40}, {"id":2, "name":"女鞋", "size":40}, {"id":3, "name":"童鞋", "size":40}, ...]这样。
我们可以这样写<block wx:for="{{shopping_list}}" wx:key="your_key">此处写你的控件</block>
以上可以参考Demo中cart中.wxml第45行处的代码
最后分享下编译器的一些常规使用
1.每次写完代码后，编译的话，直接使用快捷键command+s。
2.写项目如果用的服务器还是使用的http的话，记得点击编译器右上角的详情，勾选上不校验合法域名...这一栏。
3.当项目的页面层级较深时，每次想要编译新写的代码，就要从头进入一次。每次都很浪费时间。这时，你可以点击编译器正上方的普通编译-->添加编译模式-->名称自定义、启动页就设置成你要编译的那个页面;剩余的启动参数及进入场景根据实际需求来设置就好
4.说下下方的控制台console就是输出一些错误警告及打印；sources是用来断点调试用的；network可以查看到网络请求获取的数据；storage查看本地缓存的数据；appdata见名知意；wxml查看UI层级，更可以动态调试(修改数据，修改css样式，增加css样式等等，自己体会哈)
5.真机调试的话就需要到微信开发后台去配置应用的id才可以。配置之后必须使用https域名才可以获取数据。
最后最后！！！
谢谢猿友的阅读哈~ 也希望这篇文章能帮到想要学习微信小程序开发的朋友们。可能由于鄙人第一次写小程序，Demo中写满了注释。编码格式也很规范，看起来会很清晰，如果大家喜欢或者对你有帮助，请留下您的喜欢❤️~
谢谢！！！
