从第一个微信小程序实战中学到了什么？

1.小程序的基本文件配置

新建小程序项目，选择目录后，在本地的目录下会自动生成以下几个文件：

 

├─ pages/ ······································ 页面目录
│ ├─ index/ ··································· index页面
│ │ ├─ index.js ······························ index页面逻辑
│ │ ├─ index.wxml ···························· index页面结构
│ │ └─ index.wxss ···························· index页面样式
│ │ └─ index.json ···························· index页面配置(局部)
│ └─ logs/ ···································· logs页面
│ ├─ logs.js ······························· logs页面逻辑
│ ├─ logs.wxml ····························· logs页面结构
│ └─ logs.wxss ····························· logs页面样式
├─ utils/ ······································ 公共脚本目录
│ └─ util.js ·································· 工具脚本
├─ app.js ······································ 应用程序逻辑  用于定义整个应用的逻辑
用来监听并处理小程序的生命周期函数、声明全局变量
├─ app.json ································ 应用程序配置(全局)   对整个小程序的全局配置
配置小程序是由哪些页面组成，配置小程序的窗口背景色等
└─ app.wxss ······························· 应用程序公共样式 用来设置整个应用的公共样式

2.小程序开发的基本步骤

（1）进入微信开发者工具后，首先看到的界面如下图所示，点击app.jison：

（2）删掉index.wxml中的默认代码，头像昵称等就成功地消失了。

（3）写index.wxml、index.js文件，实现index页面草图框架。可先做静态的页面，将一些动态的效果先用静态的数据替换掉，以方便自己观察与调整。注意：index.wxss同css类似，是做样式的，当然考虑到页面的美观，index.wxss也是要适当写写的。

（4）页面中需要动态调用的数据一般写在js文件中，根据实现逻辑规则在js文件中写入相应的方法，最终利用wxml中的{{}}在页面中显示出来。

注意：小程序中的setData非常重要。setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

 

3.最后，需要注意的是：

（1）变量命名或方法命名时，最好能用英文单词表示出变量所代表的意思，如用winNum表示“获胜次数这一变量”。且当用两个或更多个英文单词才能表示出变量名时，第二个及以后的单词首字母可以大写，以方便自己辨认，如winNum比winnum更易辨认。

（2）点击控制台的Wxml，可以进行调试。

（3）一定要做好注释，不仅方便别人，也方便自己以后查看。

（4）不懂的地方除了上网查以外，学会看小程序的官方文档也非常重要（大多时候也有源代码，还可以在开发者工具中预览效果)。