微信小程序开发（一）：小程序代码构成

通过开发工具创建一个项目后，在项目目录中自动生成里四种不同类型的文件

JSON配置

1、JSON是一种数据格式，在小程序中的作用主要是保存一些静态配置
2、JSON文件中不能使用注释

小程序配置app.json

当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时事件，底部tab等：
1、pages字段用于描述当前小程序所有页面路径
2、window字段用于定义小程序所有页面的顶部背景颜色、字体颜色等
3、tabBar字段用于定义底部tab

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/index","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true
}

开发工具配置project.config.json

创建项目时会在根目录生成一个project.config.json文件，用来保存coder在开发工具上做的配置，比如界面颜色、编译配置等，coder需要重新安装开发工具或者更换电脑时，只需要导入同一个项目的代码包，开发工具就会自动回复项目开发时的个性化配置

页面配置page.json

1、小程序的每一个页面都有一个对应的JSON文件
2、用来表示同目录下的小程序页面的相关配置，独立定义每一个页面的一些属性
3、page.json文件中个性化设置优先级高于app.json中的设置

WXML文件

1、WXML充当网页开发中HMTL的角色，用来描述当前页面的结构
2、WXML中有一些特有的标签，如view、text等
3、小程序提倡渲染和逻辑分离，提供了MVVM的开发模式，不需要让js直接操作DOM，只需要管理状态，通过一种模板语法描述状态和界面结构的关系
4、通过{{}}数据绑定语法把变量绑定到界面上，并且通过wx:if / wx:else, wx:for等来控制属性的表达

<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 class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

WXSS样式

1、WXSS具有CSS大部分的特性
2、WXSS和CSS相比，增加了新的尺寸单位rpx(可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx)
3、WXSS只支持部分选择器（.class、#id、element、::after、::before）

JS逻辑脚本

js脚本用来处理用户的操作，如：响应用户的点击、获取用户的位置等.

<view>{{ msg }}</view>
<!-- 使用bindtap绑定鼠标点击事件 -->
<button bindtap="clickMe">点击我</button>

Page({clickMe: function() {this.setData({ msg: "Hello World" })}
})