微信小程序源码demo环境的搭建

代码规范:

变量与方法使用尽量使用驼峰式命名,避免使用$开头。

以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请参考文档

入口,页面,组件的命名后缀为.。外链的文件可以是其它后缀。

请参考文件说明

使用6语法。

框架在6下,因此也需要使用6小程序,6中有大量的语法糖可以让我们的代码更加简洁高效。

使用

框架默认对小程序提供的全都进行了 处理,甚至可以直接使用/等新特性进行。

项目创建与使用

首先安装

以下安装都通过安装

安装 命令行工具

- -

在目录生成

实时编译

--

项目目录结构

_

_.

_.

.

2.

.

.

使用说明

使用微信者工具新建项目,本地选择目录。

微信者工具 –> 项目 –> 关闭6转5。

本地项目根目录运行 --,开启实时编译。

主要解决问题:

1

模式转换

在原有的小程序的模式下进行再次封装,更贴近于现有框架模式。框架在过程中参考了一些现在框架的一些特性,并且融入其中,以下是使用前后的代码对比图。

官方代码:

//.

//获取应用实例

= ()

({

: {

: ' ',

: {}

},

//事件处理函数

: () {

.(' ')

},

: () {

.('')

}

})

基于的实现:

'';

. {

= {

: ' ',

: {}

};

= {

() {

.(' ');

}

};

() {

.('');

};

}

2

支持组件化

参见章节:组件

示例代码:

// .

'';

'://..//';

'://..//';

'://..//';

. {

= { "": ""

};

= {

: ,

1: ,

2: ,

:

};

}

3

支持加载外部包

在编译过程当中,会递归遍历代码中的然后将对应依赖文件从_当中拷贝出来,并且修改为相对路径,从而实现对外部包的支持。

4

单文件模式,使得目录结构更加清晰

官方目录结构要求必须有三个文件.,.,.,页面有4个文件.,.,.,.。而且文件必须同名。

所以使用前后目录对比如下:

官方:

.

.

.

.

.

.

.

.

.

.

.

使用框架后目录结构:

.

.

.

5

默认使用编译,支持6/7的一些新特性

用户可以通过修改.配置文件,配置自己熟悉的环境进行。默认开启使用了一些新的特性如,/等等。

示例代码:

'';

. {

() {

((, ) => {

(() => {

({: 123});

}, 3000);

});

};

() {

= .();

.(.);

};

}

6

针对原生进行优化

对现在进行处理,同时修复一些现有的缺陷,比如:.并发问题等。

原有代码:

= () {

= ;

.({

: () {

.({

: () {

.({: });

}

});

}

});

}

基于实现代码:

() {

.();

. = .();

}

进阶说明:

. 配置文件说明

执行 后,会生成类似配置文件。

{

"": ".",

"": {},

"": {},

"": {}

}

: 缺省值为’.’,默认情况下不会对此文件类型高亮,此时可以修改所有文件为.后缀(因为与高亮规则一样),然后将此选项修改为.,就能解决部分代码高亮问题。

一个.文件分为三个部分:

样式

模板

代码

其中入口文件.不需要,所以编译时会被忽略。这三个标签都支持和属性,决定了其代码编译过程,决定是否外联代码,存在属性且有效时,忽略内联代码,示例如下:

//

标签对应 值如下表所示:

标签 默认值 支持值

,,(待完成)

,,(待完成)

,(待完成)

说明

程序入口.

/ /

'';

. {

= {

"":[

"//"

],

"":{

"": "",

"": "#",

"": "",

"": ""

}

};

() {

.();

}

}

入口.继承自.,包含一个属性和其全局属性、方法、事件。其中属性对应原有的.,编译时会根据生成.文件,如果需要修改中的内容,请使用系统提供。

页面.

/ /

'';

'://..//';

. {

= {};

= {1: };

= {};

= {};

= {};

() {};

//

}

页面入口继承自.,主要属性说明如下:

属性 说明

页面,相当于原来的.,同.中的

页面引入的组件列表

页面需要渲染的数据

的事件捕捉,如,

组件之间通过,传递的事件

其它 如,等小程序事件以及其它自定义方法与属性

组件.

/ /

'';

. {

= {};

= {};

= {};

= {};

// }

页面入口继承自.,属性与页面属性一样,除了不需要以及页面特有的一些小程序事件等等。

组件

在小程序中,可以利用模块化 和模板 ,对业务模块进行划分,实现如下效果:

但实际上不同的模块代码与事件交互都是在同一个页面空间处理的,比如说 和 中同时存在一个 响应事件时,就需要在 和 中分别定义为 _,_。业务模块复杂之后就不利于和维护。

在中,利用组件化的特性可以解决此类问题,如下图:

和 中间的数据与事件相互隔离,可以分别拥有自己的事件。

组件引用

当页面或者组件需要引入子组件时,需要在页面或者中的给组件分配唯一,并且在中添加标签,如.。

页面和组件都可以引入子组件,引入若干组件后,如下图:

页面引入,,三个组件,同时组件和又有自己的子组件,,,,。

组件通信与交互

.基类提供三个方法$,$,$,因此任一页面或任一组件都可以调用上述三种方法实现通信与交互,如:

$.$('-', 1, 2, 3, 4);

组件的事件监听需要写在属性下,如:

'';

. {

= {};

= {};

= {};

= {

'-': ($, ...) {

.(`${.} ${$.} ${$..}`);

}

};

//

}

$

$事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序,如上图,如果_发起一个$事件,那么接收到事件的先后顺序为:, , , , , , , 。如下图:

$

$与$正好相反,事件发起组件的父组件会依次接收到$事件,如上图,如果发起一个$事件,那么接收到事件的先后顺序为:, _。如下图:

$

$是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法。

如果想在_中调用组件的某个方法:

.$('', '', '');

如果想在组件中调用组件的某个方法:

.$('://..//://..//', '', '');

数据绑定

小程序数据绑定方式

小程序通过提供的方法去绑定数据,如:

.({: ' '});

因为小程序架构本身原因,页面渲染层和逻辑层分开的,操作实际就是逻辑层与页面渲染层之间的通信,那么如果在同一次运行周期内多次执行操作时,那么通信的次数是一次还是多次呢?在经过与小程序的同事求证后得知,确实会通信多次。

数据绑定方式

使用脏数据检查对进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写方法。代码如下:

. = ' ';

但需注意,在函数运行周期之外的函数里去修改数据需要手动调用$方法。如:

(() => {

. = ' ';

.$();

}, 3000);

© 版权声明
THE END
分享