通过开发者工具快速创建了一个 QuickStart(即开发者工具替你快速生成一些必要文件) 项目,会发现
.json
后缀的 JSON
配置文件.wxml
后缀的 WXML
模板文件: 即是weixin的HTML类型文件.wxss
后缀的 WXSS
样式文件: 即是weixin的CSS类型文件.js
后缀的 JS
脚本逻辑文件
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
用来保存项目使用的工具的个性化配置如界面颜色、编译配置等等,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,载入同个项目的代码包,即可恢复但是开发项目的个性化配置。
小程序里边的每个页面特有的相关配置
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。
网页编程采用的是 HTML + CSS + JS 这样的组合,HTML
(超文本标记语言)是用来描述当前这个页面的结构,CSS(层叠样式表)描述的是页面的样式,JS(JavaScript)
通常是用来处理这个页面和用户的交互。
WXML
充当的就是类似 HTML
的角色
与HTML不同之处:
1.写 HTML 的时候,经常会用到的标签是 div
, p
, span
,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。小程序的 WXML
用的标签是 view
, button
, text
等等,这些标签就是小程序给开发者直接包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。
2.多了一些 wx:if
这样的属性以及 {{ }}
这样的表达式
在网页的一般开发流程中,我们通常会通过 JS
操作DOM(文档对象模型即对应 HTML
的描述产生的树),以引起界面的一些变化响应用户的行为。代码充斥界面交互逻辑和程序的各种状态变量,不是一个很好的开发模式。因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS
直接操控 DOM
,JS
只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
WXML 是这么写 :
{{msg}}
JS 只需要管理状态即可:
this.setData({msg: 'Hello World'})
其中
通过 {{ }}
的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if
/else
, for
等控制能力,在小程序里边,这些控制能力都用 wx:
开头的属性来表达。
WXSS
具有 CSS
大部分的特性,小程序在 WXSS
也做了一些扩充和修改。
1.新增了尺寸单位.考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS
在底层支持新的尺寸单位 rpx(responsive pixel 反应像素)
2.提供了全局的样式和局部样式。和前边 app.json
, page.json
的概念相同,你可以写一个 app.wxss
作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss
仅对当前页面生效。
3.此外 WXSS
仅支持部分 CSS
选择器
交互:响应用户的点击、获取用户的位置等等。 用JS
脚本文件来处理用户的操作。
点击 button
按钮的时候,我们希望把界面上 msg
显示成 "Hello World"
,于是我们在 button
上声明一个属性: bindtap
,在 JS 文件里边声明了 clickMe
方法来响应这次点击操作:
Page({
clickMe() {
this.setData({msg: 'Hello World'})
}
})
此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/index.js
就调用了 wx.getUserInfo
获取微信用户的头像和昵称,最后通过 setData
把获取到的信息显示到界面上。
查看自微信小程序开发文档。