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

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

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" })
  }
})