微信小程序文件类型解析-CSDN博客

本文链接：https://blog.csdn.net/wk_dream/article/details/103585573

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

四种文件类型：

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

JSON配置：

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

特殊文件

	所在目录	用途	参考
app.json	根目录	全局配置页面路径、界面表现、网络超时时间、底部 tab 等	小程序的配置 app.json
project.config.json	根目录	工具个性化的配置，可以copy到新环境还原个性化	开发者工具的配置
page.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 。