小程序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>   <block wx:for="{{items}}" wx:for-item="item" wx:key="index">     <view>{{index}}:{{item.name}}</view>   </block> </view>

js文件逻辑层数据：

data: {     items: [       { name: "苹果" },       { name: "菠萝" },       { name: "香蕉" },       { name: "芭乐" }     ]   }

测试效果：

 

 

说明：

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

item变量：数组当前元素。

wx:key：能够确保页面元素从新排序，而不是从新渲染，提升页面渲染效率。

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

 

2)         条件渲染

视图示例代码：

<!--pages/index/index.wxml--> <view>抽奖小游戏</view> <view wx:if="{{result==1}}">中奖一台iphoneX</view> <view wx:elif="{{result==2}}">中奖一台ipad</view> <view wx:elif="{{result==3}}">中奖一个U盘</view> <view wx:else>再接再励</view>

逻辑层示例代码：

// pages/index/index.js  data: {     result:Math.floor(Math.random()*4+1)   },

注意：

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

 

 

 

 模板引用

1)         代码块的引用

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

视图示例代码：

<!--pages/index/index.wxml--> <!--定义代码片断--> <template name="tmp">   <view>     <view>学号:{{id}}</view>     <view>姓名:{{name}}</view>     <view>年龄:{{age}}</view>   </view> </template> <!--引用代码片断--> <template is="tmp" data="{{...student}}"></template>

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

逻辑层数据定义：

// pages/index/index.js Page({   data: {     student:{       id:2018007,       name:"tom",       age:21     }   },

测试效果：

 

 

2)         文件的引用

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

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

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

<!--pages/index/tmp.wxml--> <view>this is tmp.wxml</view> <!--定义模板代码--> <template name="tmp_a">   <view>     <view>学号:{{id}}</view>     <view>姓名:{{name}}</view>     <view>年龄:{{age}}</view>   </view> </template>

定义逻辑层数据：

data: {     student:{       id:2018007,       name:"tom",       age:21     }   },

 

视图层引用模板文件：

<!--pages/index/index.wxml--> <!--引入模板文件--> <import src="tmp.wxml"></import> <!--使用模板--> <template is="tmp_a" data="{{...student}}"></template>

测试效果：

 

 

import做用域的问题：

定义a.wxml和b.wxml文件

 

 

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

 

 

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

 

 

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

 

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

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

<!--pages/index/index.wxml--> <!--引入模板文件--> <include src="tmp.wxml"></include> <!--使用模板--> <template is="tmp_a" data="{{...student}}"></template>

测试输出效果：

 

 

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像素(如width: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	∞

示例代码：

<!--pages/index/index.wxml--> <view id='test' class='content' style='color:green;width:500rpx;height:60rpx;'>   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文件中定义模块和引用。

<!--pages/index/index.wxml--> <wxs module="m1">   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脚本文件，定义以下：

<!--pages/index/index.wxml--> <wxs src='m1.wxs' module="m"></wxs> <view>{{m.message}}</view>

测试效果：

 

 

 

2)         变量和注释

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

<!--pages/index/index.wxml--> <wxs module="m">   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标准相似。