小程序04 小程序框架

小程序框架

基本概念

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

框架结构

WXML	WXSS
WXS	JavaScript

WXS：WeiXin Script是小程序的一套脚本语言，可以对请求到的数据进行过滤或者计算；结合 WXML，可以构建出页面的结构

WXML

概念

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、WXS、事件系统，可以构建出页面的结构。

语法结构

<标签名属性名1=”属性值1” 属性名2=”属性值2” …>

…内容（或者其他wxml标签）

</标签名>

标签内可以是内容文本，或者其他wxml标签。

注意：标签必须闭合；属性大小写敏感。

示例代码：

主要特性

包括：数据绑定、列表渲染、条件渲染、模板引用。

数据绑定

1) 简单数据绑定

数据来源于js文件，页面使用Mustache（”{{变量名}}”）绑定数据。例如：

2) 属性值的绑定

3) 运算符的绑定

hidden属性用于隐藏或者显示页面元素。

小程序标签属性

数据渲染

1) 列表渲染

把集合中的数据以列表的形式渲染到视图层。示例：

wxml视图代码：

<view>

<view>{{index}}:{{item.name}}</view>

</block>

</view>

js文件逻辑层数据：

data: {

items: [

{ name: "苹果" },

{ name: "菠萝" },

{ name: "香蕉" },

{ name: "芭乐" }

]

}

测试效果：

说明：

index变量：当前数组元素的索引。

item变量：数组当前元素。

wx:key：可以确保页面元素重新排序，而不是重新渲染，提高页面渲染效率。

block：包装元素。页面你不会渲染该标签。

2) 条件渲染

视图示例代码：

<view>抽奖小游戏</view>

<view wx:if="{{result==1}}">中奖一台iphoneX</view>

<view wx:elif="{{result==2}}">中奖一台ipad</view>

<view wx:elif="{{result==3}}">中奖一个U盘</view>

逻辑层示例代码：

// pages/index/index.js

data: {

result:Math.floor(Math.random()*4+1)

注意：

if和hidden的比较：if会选择性渲染元素，hidden会始终渲染元素。如果一个元素需要频繁在视图上显示和隐藏，建议使用hidden属性，提高渲染性能。

模板引用

1) 代码块的引用

WXML支持定义代码片段，在页面不同的地方进行引用。使用name属性定义模板名称。

视图示例代码：

<view>

</view>

</template>

is属性支持动态引入模板。“…”为扩展运算符，遍历对象属性。

逻辑层数据定义：

// pages/index/index.js

Page({

data: {

student:{

id:2018007,

name:"tom",

age:21

}

测试效果：

2) 文件的引用

WXML文件引用提供了import和include方法。

import：只能引用文件中的模板代码。

示例代码，定义模板文件tmp.wxml：

<view>

</view>

</template>

定义逻辑层数据：

data: {

student:{

id:2018007,

name:"tom",

age:21

}

视图层引用模板文件：

测试效果：

import作用域的问题：

定义a.wxml和b.wxml文件

修改a.wxml文件，引入b模板。

在index.wxml中引入模板a.wxml。

index.wxml中只渲染a模板中定义的代码片段。避免模板引用的死循环，import只引用文件中的模板代码块，忽略import递归。

include：引用文件的代码块，除了模板代码。

修改示例代码，使用include引入tmp.wxml文件：

测试输出效果：

WXSS

概述

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

尺寸单位
样式导入
内联样式
选择器

尺寸单位

css3中的rem表示根据html根下的font-size进行相对尺寸的计算。微信小程序中，rem失效，所以微信小程序定义rpx作为尺寸单位。最终rpx还是会转换为rem。

1) 基本概念

定义	说明
设备像素（device pixels）	显示设备显示信息的最小物理单位。显示器上的像素点。
CSS像素（CSS pixels）	CSS样式表中使用的逻辑像素。
PPI/DPI（pixel per inch）	显示器每英寸拥有的像素数量。
DPR（devicepixelRatio）	在手机某一方向上，设备像素和CSS像素的比例。

PPI/DPI计算方式：X、Y表示设备在横向和纵向上的设备像素。屏幕尺寸指对角线长度。

DPR说明：

在IDE中切换设备可以查看到设备的DPR信息。在手机上进行缩放操作的时候，元素设置的CSS像素(如300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的。DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值。

rpx：responsive pixel，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式倒入

1) 外部样式

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用“;”表示语句结束。通常用于提取公共样式，减少css代码冗余。

示例代码：

2) 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

class用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

选择器

选择器优先级。

选择器	权重
element	1
.class	10
#id	100
style	1000
!important	∞

示例代码：

Hello World

</view>

!important应用场景：在引入插件时，如果希望修改插件产生的样式，则可以在自定义的样式中添加该标识，覆盖插件中的样式。语法格式如下：

color:green !important;

JavaScript

小程序js

小程序中的JavaScript组成

ECMAScript：JavaScript语言标准。

小程序js运行环境

开发工具运行在nwjs上。nwjs集成了nodejs和webkit内核。

目前的ECMAScript版本为ES6和ES5，IOS8和IOS9不支持ES6。所以在IDE中需要将ES6降低为ES5。

WXS

概念

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

注意：

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

WXS一般用于过滤和计算处理。

组成

1) 模块

在同一wxml文件中定义模块和引用。

module.exports = {

message : "hello world!"

}

</wxs>

<view>{{m1.message}}</view>

exports表示将模块内的变量变为公有，以供被调用。默认模块变量为私有，作用域为模块内部。

不同文件中定义模块和引入：

定义微信脚本文件m2.wxs，并在其中定义和公开变量message：

/*pages/index/m2.wxs*/

module.exports = {

message: "hello world!"

}

定义微信脚本m1.wxs，并在其中引用m2.wxs脚本文件：

/*pages/index/m1.wxs*/

module.exports = require('m2.wxs')

视图文件index.wxml引入m1.wxs脚本文件，定义如下：

<view>{{m.message}}</view>

测试效果：

2) 变量和注释

变量的定义和ES5的标准是一至的。示例代码如下：

var message = 'hello world';

module.exports.value=message;

//单行注释

*多行注释

var a=1;

a+=1;

console.log(a);

</wxs>

<view>{{m.value}}</view>

测试效果：

3) 运算符

4) 语句

和ES5一致。区别是wxs模块内不支持try-catch语句。

5) 数据类型

注意和js用法区别的两种数据类型：

生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
生成 regexp 对象需要使用 getRegExp函数。

6) 基础类库

与ES5标准类似。

本博客文章未经许可，禁止转载和商业用途！

如有疑问，请联系： 2083967667@qq.com