1WXML 模板

开发过网页的人知道，，，网页开发编程接纳的是HTML+ CSS+JS这样的框架组合，，，其中HTML是用来制作目今这个页面的整体框架结构，，，CSS 用来提供结构样式，，，JS 则是举行逻辑处理以及这个页面和用户的交互。。。。。。

JS 只需要治理状态即可:

this.setData({msg: Hello World })通过 {{ }} 的语法把一个变量绑定到界面上，，，我们称为数据绑定。。。。。。仅仅通过数据绑定还不敷完整的形貌状态和界面的关系，，，还需要 if/else, for等控制能力，，，在小程序里边，，，这些控制能力都用 wx: 开头的属性来表达。。。。。。

2WXSS 样式

WXSS就是小程序版的CSS，，，它具有CSS 大部分的特征，，，小程序在 WXSS 也做了一些扩充和修改。。。。。。

3JS 交互逻辑

一个服务仅仅只有界面展示是不敷的，，，还需要和用户做交互：响应用户的点击、获取用户的位置等等。。。。。。在小程序里边，，，我们就通过编写 JS 剧本文件来处理用户的操作。。。。。。

{{ msg }}点击我

点击 button 按钮的时间，，，我们希望把界面上 msg 显示成 Hello World，，，于是我们在 button 上声明一个属性: bindtap ，，，在 JS 文件里边声明晰 clickMe 要领来响应这次点击操作：

Page({

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

  }

})

别的你还可以在 JS 中挪用小程序提供的富厚的 API，，，使用这些 API 可以很利便的调起微信提供的能力，，，例如获取外地存储、用户信息、微信支付等。。。。。。

4JSON 设置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，，，别的在 pages/logs 目录下尚有一个 logs.json，，，我们依次来说明一下他们的用途。。。。。。

小程序设置 app.json

app.json 是对目今小程序的全局设置，，，包括了小程序的所有页面路径、界面体现、网络超时时间、底部 tab 等。。。。。。QuickStart 项目里边的 app.json 设置内容如下：

{  pages:[    pages/index/index,    pages/logs/logs

  ], window:{   backgroundTextStyle:light,    navigationBarBackgroundColor:#fff,   navigationBarTitleText: WeChat,   navigationBarTextStyle:black

  }

}

这个设置各个项的寄义如下:

pages字段 —— 用于形貌目今小程序所有页面路径，，，这是为了让微信客户端知道目今你的小程序页面界说在哪个目录。。。。。。

window字段 —— 小程序所有页面的顶部配景颜色，，，文字颜色界说在这里的。。。。。。

工具设置 project.config.json

通常各人在使用一个工具的时间，，，都会针对各自喜欢做一些个性化设置，，，例如界面颜色、编译设置等等，，，当你换了另外一台电脑重新装置工具的时间，，，你还要重新设置。。。。。。

思量到这点，，，小程序开发者工具在每个项目的根目录都会天生一个 project.config.json，，，你在工具上做的任何设置都会写入到这个文件，，，当你重新装置工具或者换电脑事情时，，，你只要载入统一个项目的代码包，，，开发者工具就自动会帮你恢复到其时你开发项目时的个性化设置，，，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。。。。。。

页面设置 page.json

这里的 page.json 着适用来体现 pages/logs 目录下的 logs.json 这类和小程序页面相关的设置。。。。。。

若是你整个小程序的气概是蓝色调，，，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。。。。。。现真相形可能不是这样，，，可能你小程序里边的每个页面都有纷歧样的色调来区分差别功效？？，，，因此我们提供了 page.json，，，闪开发者可以自力界说每个页面的一些属性，，，例如刚刚说的顶部颜色、是否允许下拉刷新等等。。。。。。

以上就是这篇微信小程序开发文档中4种最常见的代码，，，若是有其他问题，，，可以在本网站咨询。。。。。。