一、工欲善其事，必先利其器——搭建开发环境
首先，到官方网站上下载一个开发工具，根据自己电脑的操作系统平台下载相应的版本。安装完成后运行开发工具，此时，需要用微信扫描上面的二维码才能继续后面的操作……
开发工具下载地址
二、创建工程项目——Hello World
具体操作步骤如下图所示，很简单，在此就不在赘述了。
创建项目.png
三、开始写代码
1、点击开发工具左侧的菜单项“编辑”，我们就可以看到我们刚刚创建的工程目录结构
2、在"pages"目录下创建一个目录“hello”。然后在“hello”目录下创建如下几个文件：hello.js，hello.json，hello.wxml，hello.wxss。最终效果图如下：
目录结构.png
3、终于可以写代码了
hello.js文件代码如下（注册页面）：
Page({
data:{
hello:"我的第一个微信小程序……"
}
})
hello.json文件代码如下：
{
"navigationBarTitleText":"首页"
}
hello.wxml文件代码如下：
<view>
<view class="hello">{{hello}}</view>
</view>
hello.wxss文件代码如下：
.hello{
color:blue;
font-size:28rpx;
margin-left: 20rpx;
margin-top: 20rpx;
}
4、在app.json文件里“pages”数组下添加JSON代码“pages/hello/hello”，也就是我们创建的hello页面的路径；并修改“navigationBarBackgroundColor”键的值为：“#13b7f6”，“navigationBarTextStyle”的值修改为：“white”。app.json文件里最终代码如下：
{
"pages":[
"pages/hello/hello",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#13b7f6",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white"
},
"debug":true
}
5、点击左侧菜单“编译”即可运行我们的程序了，运行效果图如下：
结果.png
四、总结：
尽管我们已经成功运行了我们的“Hello World”程序，但我相信大家还是一头雾水，比如：我们创建的那几个文件和其他文件是什么关系，为什么要那样修改代码……接下来，我们就总结下吧
1、微信小程序系统分为两块：视图层（View）和逻辑层（App Service）
视图层描述语言是WXML和WXSS，逻辑层框架语言是基于 JavaScript 的。在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。文件关系图如下：
关系图.png
2、WXML 中的动态数据均来自对应.js文件里 Page()函数里 的 data，如下图：
bind.png
3、app.json是小程序的全局配置文件，在此配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如下图：
appjson.png
4、当创建好工程后我们可以按如下步骤模式 来完成编码：
（1）在pages目录下新建页面目录，如上面的hello目录
（2）在新建好的目录下（如hello目录）新建.js，.wxml，.wxss，.json四个文件，如上面的hello.js，hello.wxml，hello.wxss，hello.json
（3）在全局配置文件app.json里添加刚刚新建的页面路由信息，即在JSON数组“pages”里添加刚刚新建页面的路径，如上面的“pages/hello/hello”。如要添加更多设置则继续添加其他JSON信息，如网络请求，tab窗口等，详细配置信息指南请自行查看官方文档
（4）在.wxml文件里面编写视图布局代码，如上面的hello.wxml；在.wxss文件里编写CSS样式代码，这里的样式代码将作用于.wxml里面视图的显示样式
（5）用App()函数注册程序，该函数接受一个 object 参数，其指定小程序的生命周期函数等。如开发工具自动生成的app.js文件
（6）用Page()函数注册页面，该函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。也就是在.js文件里编写代码，如上面的hello.js
（7）在.json文件里编写JSON数据，如当前页面的标题，标题栏背景等
其实，只要理清楚.wxml，.wxss，.js，.json这4个文件彼此之间的逻辑关系，及其与app.js，app.json，app.wxss之间的关系就容易得多了
【欢迎各位大神批评指正，转载请保留链接……谢谢！】
网友评论