代码规范:
变量与方法使用尽量使用驼峰式命名,避免使用$开头。
以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请参考文档
入口,页面,组件的命名后缀为.。外链的文件可以是其它后缀。
请参考文件说明
使用6语法。
框架在6下,因此也需要使用6小程序,6中有大量的语法糖可以让我们的代码更加简洁高效。
使用
框架默认对小程序提供的全都进行了 处理,甚至可以直接使用/等新特性进行。
项目创建与使用
首先安装
以下安装都通过安装
安装 命令行工具
- -
在目录生成
实时编译
--
项目目录结构
_
_.
_.
.
2.
.
.
使用说明
使用微信者工具新建项目,本地选择目录。
微信者工具 –> 项目 –> 关闭6转5。
本地项目根目录运行 --,开启实时编译。
主要解决问题:
1
模式转换
在原有的小程序的模式下进行再次封装,更贴近于现有框架模式。框架在过程中参考了一些现在框架的一些特性,并且融入其中,以下是使用前后的代码对比图。
官方代码:
//.
//获取应用实例
= ()
({
: {
: ' ',
: {}
},
//事件处理函数
: () {
.(' ')
},
: () {
.('')
}
})
基于的实现:
'';
. {
= {
: ' ',
: {}
};
= {
() {
.(' ');
}
};
() {
.('');
};
}
2
支持组件化
参见章节:组件
示例代码:
// .
></p>
></p>
></p>
></p>
></>
'';
'://..//';
'://..//';
'://..//';
. {
= { "": ""
};
= {
: ,
1: ,
2: ,
:
};
}></p>
3
支持加载外部包
在编译过程当中,会递归遍历代码中的然后将对应依赖文件从_当中拷贝出来,并且修改为相对路径,从而实现对外部包的支持。
4
单文件模式,使得目录结构更加清晰
官方目录结构要求必须有三个文件.,.,.,页面有4个文件.,.,.,.。而且文件必须同名。
所以使用前后目录对比如下:
官方:
.
.
.
.
.
.
.
.
.
.
.
使用框架后目录结构:
.
.
.
5
默认使用编译,支持6/7的一些新特性
用户可以通过修改.配置文件,配置自己熟悉的环境进行。默认开启使用了一些新的特性如,/等等。
示例代码:
'';
. {
() {
((, ) => {
(() => {
({: 123});
}, 3000);
});
};
() {
= .();
.(.);
};
}
6
针对原生进行优化
对现在进行处理,同时修复一些现有的缺陷,比如:.并发问题等。
原有代码:
= () {
= ;
.({
: () {
.({
: () {
.({: });
}
});
}
});
}
基于实现代码:
() {
.();
. = .();
}
进阶说明:
. 配置文件说明
执行 后,会生成类似配置文件。
{
"": ".",
"": {},
"": {},
"": {}
}
: 缺省值为’.’,默认情况下不会对此文件类型高亮,此时可以修改所有文件为.后缀(因为与高亮规则一样),然后将此选项修改为.,就能解决部分代码高亮问题。
一个.文件分为三个部分:
样式>对应原有。</p>
模板>对应原有。</p>
代码>对应原有。</p>
其中入口文件.不需要,所以编译时会被忽略。这三个标签都支持和属性,决定了其代码编译过程,决定是否外联代码,存在属性且有效时,忽略内联代码,示例如下:
></p>
></p>
//
></p>
标签对应 值如下表所示:
标签 默认值 支持值
,,(待完成)
,,(待完成)
,(待完成)
说明
程序入口.
/ /
></p>
'';
. {
= {
"":[
"//"
],
"":{
"": "",
"": "#",
"": "",
"": ""
}
};
() {
.();
}
}
></p>
入口.继承自.,包含一个属性和其全局属性、方法、事件。其中属性对应原有的.,编译时会根据生成.文件,如果需要修改中的内容,请使用系统提供。
页面.
/ /
></p>
></p>
></p>
></p>
'';
'://..//';
. {
= {};
= {1: };
= {};
= {};
= {};
() {};
//
}
></p>
页面入口继承自.,主要属性说明如下:
属性 说明
页面,相当于原来的.,同.中的
页面引入的组件列表
页面需要渲染的数据
的事件捕捉,如,
组件之间通过,传递的事件
其它 如,等小程序事件以及其它自定义方法与属性
组件.
/ /
></p>
></p>
></p>
'';
. {
= {};
= {};
= {};
= {};
// }
></p>
页面入口继承自.,属性与页面属性一样,除了不需要以及页面特有的一些小程序事件等等。
组件
在小程序中,可以利用模块化 和模板 ,对业务模块进行划分,实现如下效果:
但实际上不同的模块代码与事件交互都是在同一个页面空间处理的,比如说 和 中同时存在一个 响应事件时,就需要在 和 中分别定义为 _,_。业务模块复杂之后就不利于和维护。
在中,利用组件化的特性可以解决此类问题,如下图:
和 中间的数据与事件相互隔离,可以分别拥有自己的事件。
组件引用
当页面或者组件需要引入子组件时,需要在页面或者中的给组件分配唯一,并且在中添加标签,如.。
页面和组件都可以引入子组件,引入若干组件后,如下图:
页面引入,,三个组件,同时组件和又有自己的子组件,,,,。
组件通信与交互
.基类提供三个方法$,$,$,因此任一页面或任一组件都可以调用上述三种方法实现通信与交互,如:
$.$('-', 1, 2, 3, 4);
组件的事件监听需要写在属性下,如:
'';
. {
= {};
= {};
= {};
= {
'-': ($, ...) {
.(`${.} ${$.} ${$..}`);
}
};
//
}
$
$事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果_发起一个$事件,那么接收到事件的先后顺序为:, , , , , , , 。如下图:
$
$与$正好相反,事件发起组件的父组件会依次接收到$事件,如上图,如果发起一个$事件,那么接收到事件的先后顺序为:, _。如下图:
$
$是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。
如果想在_中调用组件的某个方法:
.$('', '', '');
如果想在组件中调用组件的某个方法:
.$('://..//://..//', '', '');
数据绑定
小程序数据绑定方式
小程序通过提供的方法去绑定数据,如:
.({: ' '});
因为小程序架构本身原因,页面渲染层和逻辑层分开的,操作实际就是逻辑层与页面渲染层之间的通信,那么如果在同一次运行周期内多次执行操作时,那么通信的次数是一次还是多次呢?在经过与小程序的同事求证后得知,确实会通信多次。
数据绑定方式
使用脏数据检查对进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写方法。代码如下:
. = ' ';
但需注意,在函数运行周期之外的函数里去修改数据需要手动调用$方法。如:
(() => {
. = ' ';
.$();
}, 3000);