微信小程序搞起来（入门）

作为iOS程序狗中的一个小菜鸟，还是要多多学习一些技术才行。今天一时兴起，想要看看微信小程序的开发。虽然不是太精通，但是还是算入门了。借此文章记录一下（不喜勿喷，大神可绕道）。
先说小程序的工具，可去https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716下载安装，然后扫码登录，选择小程序项目，选右下角的加号，新建项目。

Snip20181101_1.png

点击1处的下拉符号，可以新建文件夹test即创建了项目test。既然是学习小程序，选择测试号即可。
点击确定，小程序就打开了。

Snip20181101_2.png

从图中可以很清晰的看到小程序的整体项目目录结构，下面就一一讲一下。
首先，pages文件夹里面，包含的就是小程序的页面。现在小程序里面有2个页面，index （欢迎页）和 logs（启动页）。而且，可以发现每一个页面都有.js , .json , .wxml , .wxss组成。

.js: 脚本文件，页面逻辑
.json: 配置文件
.wxml:页面结构
.wxss:页面样式，类似html。

其次 ，utils文件夹是公共脚本，存放的是工具脚本。

app.js :应用程序的逻辑，可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据

app.json : 应用程序的配置，可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释

注意：微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

app.wxss:应用程序公共样式，可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则

如果想要自己新建个页面，就要在pages文件夹下新建文件夹比如test文件夹，然后在hello 文件夹下，新建.js,.json,.wxml,.wxss文件。如下：

屏幕快照 2018-11-01 下午4.55.59.png

但是，在子目录下添加空白的json配置文件是会出现报错，其原因是因为文件内容空白.只需要在.json中添加{};

在hello.wxml编写代码

屏幕快照 2018-11-01 下午5.24.51.png

这时，我们可以把自己的页面添加到程序中,如下：

屏幕快照 2018-11-01 下午5.23.38.png

此时，程序会报如下错误。

屏幕快照 2018-11-01 下午5.37.06.png

解决办法，在hello.js中添加输入Page（会自动补全代码）

屏幕快照 2018-11-01 下午5.40.07.png

编译

屏幕快照 2018-11-01 下午5.25.25.png