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种最常见的代码，，，，，若是有其他问题，，，，，可以在本网站咨询。。