小程序 四种文件类型简介

四种文件类型简介"/>

小程序 四种文件类型简介

本文主要对微信小程序的四种文件类型做了大概介绍，更快的了解功能。

四种文件类型：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

JSON配置：

             一种数据格式，不是编程语言，在小程序中，JSON扮演的静态配置的角色。

             特殊文件

JSON文件中无法使用注释。

看到这里可以看出json主要配置页面的展示效果，有点像页面工具。

WXML模板

类似于 网页（HTML+CSS+JS） 中的HTML。

1.有和html一样功能的标签，比较方便的是有好多类似于日历、弹窗等等已经包装好的标签。参考小程序的能力

 2. wx:if 这样的属性以及 {{ }} 这样的表达式 

      WXML 是这么写 :

<text>{{msg}}</text>

     JS 只需要管理状态即可:

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

通过{{ }}的语法绑定变量到界面，称为数据绑定。

 JS 只需要管理状态，WXML调用模板。

if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

详细参考： WXML

WXSS 样式

具有CSS大部分特性，小程序在 WXSS 也做了一些扩充和修改。

1.新增了尺寸单位，rpx。开发者可以免去换算的烦恼。

2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3.此外 WXSS 仅支持部分 CSS 选择器

详细参考： WXSS 

JS 逻辑交互

  用作和用户交互：响应用户的点击、获取用户的位置等等。

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

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

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

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

 响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 

还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。