微信小程序基础学习(一)
JSON 配置
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json
和 project.config.json
,此外在 pages/logs
目录下还有一个 logs.json
,我们依次来说明一下它们的用途。
小程序配置 app.json
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json
配置内容如下:
pages
字段:用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在那个目录window
字段:定义小程序所有页面的顶部背景颜色,文字颜色等
工具配置 project.config.json
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json
,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
页面配置 page.json
这里的 page.json
其实用来表示 pages/logs 目录下的 logs.json
这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调,那么你可以在 app.json
里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json
,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。
JSON 语法
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
- 数字,包含浮点数和整数
- 字符串,需要包裹在双引号中
- Bool值,true 或者 false
- 数组,需要包裹在方括号中 []
- 对象,需要包裹在大括号中 {}
- Null
WXML 模板
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML
是用来描述当前这个页面的结构,CSS
用来描述页面的样子,JS
通常是用来处理这个页面和用户的交互。wxml
充当的就是类似的html
角色
-
wxml
:是框架设计的一套标签语言,结合组件、wxs
和事件系统,可以构建出页面的结构 -
语法:
<标签名 属性名='属性名1' 属性名='属性名1'></标签名>
-
wxml
:数据绑定、列表渲染、条件渲染、模板引用 -
属性名 类型 描述 注解 data-* Any 自定义属性 组件上触发的事件,会发送给事件处理函数 bind*/catch* EventHandler 组件事件 hidden Boolean 组件是否显示 所有组件默认显示 -
列表渲染 <block wx:for="{{items}}" wx:for-item="item" wx:key="index"></block>
-
条件渲染 <view wx:if=""></view> <view wx:elif=""></view> <view wx:else></view> 如果频繁的切换显示 使用 hidden 更好
-
<template name="tempItem"> <view> <view>喜欢:{{color}}</view> </view> </template> 引用 <template is="tempItem" data="{{...item}}"></template> Page({ data:{ item:{ color:"red" } } })
-
文件引用
import
import
有作用域的概念,即只会import
目标文件中定义的import
,而不会import
目标文件import
的import
- 简单的来说就是值包含下一层,不会迭代
- C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
include
include
可以将目标文件除了<template/>
<wxs/>
外的整个代码引入,相当于拷贝到include
位置
- 总结来说,
import
用来导入静态块,include
用来导入页面结构
WXSS 样式
WXSS
具有 CSS
大部分的特性,小程序在 WXSS
也做了一些扩充和修改。
- 新增了尺寸单位。在写
CSS
样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS
在底层支持新的尺寸单位rpx
,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。 - 提供了全局的样式和局部样式。和前边
app.json
,page.json
的概念相同,你可以写一个app.wxss
作为全局样式,会作用于当前小程序的所有页面,局部页面样式page.wxss
仅对当前页面生效。 - 此外
WXSS
仅支持部分CSS
选择器
wxss
:是一套样式语言,用于描述wxml
的组件样式
css
:是一套样式语言,是一种样式表语言,用来描述html
或xml
文档的呈现
屏
幕
分
辨
率
:
x
∗
y
P
P
I
=
根
号
(
x
2
+
y
2
)
/
屏
幕
尺
寸
i
p
h
o
n
e
6
为
例
根
号
75
0
2
+
133
4
2
/
4.7
=
325.6
屏幕分辨率: x * y PPI = 根号(x^2 + y^2)/ 屏幕尺寸 iphone6 为例 根号750^2 + 1334^2 / 4.7 = 325.6
屏幕分辨率:x∗yPPI=根号(x2+y2)/屏幕尺寸iphone6为例根号7502+13342/4.7=325.6
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class=“intro” 的组件 |
#id | #firstname | 选择拥有 id=“firstname” 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
WXS
-
模块、变量、注释、运算符、语句、数据类型、基础类库
-
模块分析:
-
.wxs
文件和<wxs>
标签都是一个单独的模块,就像是block。 -
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
-
一个模块要想对外暴露其内部的私有变量与函数,只能通过
module.exports
实现。 -
require
函数- 只能引用 .wxs 文件模块,且必须使用相对路径
- wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
- 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
-
<wxs module="m1"> module.exports = { message:"heoll world" } </wxs> <view>{{m1.message}}</view> -----------------------------------------------------
-
JS 逻辑交互
浏览器中的JavaScript
中:
ECMAScript
Dom
:浏览器的文档对象模型Bom
:浏览器对象模型
IOS
==>JavaScriptCore
android
==>X5内核
IDE
==>newjs
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。