初步认识
与前端开发比较类似，包含HTML、css、js相似的代码。但是，当然有不同之处。
原生项目结构
举例：一个最简单的示例项目，如下图：
项目里生成了不同类型的文件
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
》》以上4种文件的作用
.json文件
1、app.json
整个小程序的全局配置，包括所有页面路径、网络超时时间、底部 tab 等。如：
{
"pages":[ // 描述当前小程序所有页面路径。
"pages/index/index",
"pages/logs/logs"
],
// 以上说明，项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录
"window":{ // 所有页面的顶部背景颜色，文字颜色
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
2、project.config.json
工具的一些个性化配置，在工具上做的任何配置都会写入到这个文件，包括编辑器的颜色、代码上传时自动压缩等一系列选项。
.WXML文件
类似 HTML 的角色，用来描述当前页面的结构。文件的内容如下：
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
有标签、属性等构成。但是也有与HTML不一样的地方。如：
1、标签名字，小程序的 WXML 用的标签是 view, button, text 等，包装好了组件的基本能力。此外还有地图、视频、音频等等组件。
2、多了一些用 wx: 开头的属性和{{ }} 表达式，目的是把渲染和逻辑分离— —不再让 JS 直接操控 DOM，JS只需管理状态即可，然后再通过一种'模板语法'来描述状态和界面结构的关系。通过{{}}这种语法，把一个变量绑定到界面上。如<text class="info">{{normalTitle}}</text>
.WXSS文件
具有 CSS 大部分的特性，并有一些扩充和修改。
新的尺寸单位 rpx
提供了全局的样式和局部样式。如app.wxss 作为全局样式，会作用于小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
.js文件
和用户做交互，处理用户的操作：响应用户的点击、获取用户的位置等。
如：点击 button 按钮，把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
在 js 文件里声明 clickMe 方法来响应点击操作：
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
此外，还可以在 js 中调用小程序丰富的 API，可以方便调起微信提供的，如获取用户信息、本地存储、微信支付等功能。https://mp.weixin.qq.com/debug/wxadoc/dev/api/
PS：多数 API 的回调都是异步，需要处理好代码逻辑
小程序项目启动
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行：
App({
onLaunch: function () { // 小程序启动之后 触发
}
})
整个小程序只有一个 App 实例，是全部页面共享的
小程序的页面
一个页面包含上述的4种文件。客户端先根据.json 配置生成一个界面，接着装载WXML 结构、WXSS 样式，最后装载 .js文件。
/* Page 是一个页面构造器，这个构造器就生成了一个页面
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () { // 页面渲染后 执行
}
})
相关资料
https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html
