之前趁着下班的空闲时间自学了小程序开发，说实话，微信原生的小程序开发的难度并不高，语法也很简单，所以趁着有空学习一下还是有点价值的。
1.知识储备
（1）html + css +javascript，虽然不是直接用它们做开发，但这是最基本的技术要求了；
（2）vue or react，这两个前端最流行的技术学习一下也还是有必要的，因为现在比较优秀的两个小程序框架Taro和uni-app的语法规范分别是基于react和vue的，当然这两个只需要会一个就可以了。
2.小程序框架简介
由于现在市面上出现了很多的小程序，如：微信小程序，支付宝小程序，QQ小程序，百度小程序，头条小程序等等，所以就出现了这个跨端的问题，一套代码只能在一种开发环境下运行，Taro和uni-app就是在这样的背景下产生的。
（1）Taro官网：https://taro.aotu.io/，Taro 是一套遵循React语法规范的多端开发解决方案，使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码，下面是它的官网截图，一处代码，多出运行，真的是很熟悉的口号。
（2）uni-app官网：https://uniapp.dcloud.io/，uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
这两个框架各有千秋，不过对于比较喜欢Vue的我来讲，uni-app肯定是个比较好的选择。
3.开发准备
（1）注册一个微信开发账号，前往微信公众平台官网，选择小程序，进行账号注册，注册完成后微信会为我们生成一个AppId，创建小程序项目时会用到，如下图。
（2）下载安装微信开发者工具，安装过程省略，安装完成后启动，扫码登陆。
（3）创建一个小程序项目
项目名称可以随意，指定目录时需要指定一个空的目录，AppId小程序注册后都会有，第一次先不使用云开发创建项目。
4.开始
微信会生成一个hello world示例模板，上图中箭头分别对应的是模拟器，编辑器和调试器，中间是项目的目录结构。
pages目录：存放页面文件，每个页面都由js，wxss，wxml，json这四个文件组成，其中js编写页面逻辑，wxml编写页面结构，wxss编写页面样式。
app.json文件：小程序的全局配置，如页面文件的路径（pages），窗口表现（window），网络超时时间（networkTimeout）等。
app.js文件：定义整个应用的逻辑。
app.wxss文件：配置小程序的全局样式。
以上是hello world模板的项目结构，后面基于这个模板做一些修改。
5.基本语法
（1）小程序中的wxml，打开index.wxml，删掉所有代码，重新写。
<view class="container"> <!-- view相当于html中的div-->
<view class= "title-text">
卖小二的蘑菇的小程序
</view>
</view>
（2）小程序中的wxss，具有css大部分的特性，打开index.wxss，删掉所有代码，为刚刚的view配置一个简单的样式。
.title-text { /**同样支持类选择器**/
color: pink; /**颜色:粉色**/
font-size: 50px; /**字体大小:50px**/
}
（3）小程序里的js，语法类似于vue和react的结合，不仅有vue的data和{{}}，也有setState，还有小程序特有的生命周期函数，同样删除原本的代码，重新写。
//获取应用实例
//const app = getApp()
Page({ //Page：当前的页面对象
/**
* 页面的初始数据
*/
data: {
name: '蘑菇',
like: ['卖小二','卖小二','还卖小二']
},
})
在index.wxml中将data中的数据渲染到页面上
<view wx:for = "{{like}}"> <!-- wx：for：遍历like数组中的数据-->
<view>{{name}}最喜欢的事情是{{item}}</view> <!-- item获取数组中的每个元素-->
</view>
（4）小程序的事件绑定
index.wxml中
<input value="{{valList}}" bindinput="handleInput" placeholder="请输入"></input> <!-- 添加一个input输入框，绑定handleInput事件-->
<button bindtap="saveData">添加数据</button> <!-- 添加一个按钮，绑定saveData事件-->
<view wx:for = "{{like}}">
<view>{{name}}最喜欢的事情是{{item}}</view>
index.js中定义绑定的事件
data: {
name:'蘑菇',
valList: "", //定义一个空字符串用来存放输入的数据
like:['卖小二','卖小二','还卖小二']
},
//定义input输入框绑定的事件
handleInput(e) {
this.setData({
valList:e.detail.value, //将输入的数据放入之前定义的valList字符串中
})
},
//定义button按钮绑定的点击事件
saveData(){
this.setData({
valList:"", //按钮点击后将valList字符串置空
like:[...this.data.like,this.data.valList] //将valList字符串中数据存入like数组中
})
}
最后将数据渲染在页面上
。。。。。
