小程序基础知识总结

基本配置

JSON配置

在项目的根目录中有一个app.json和project.config.json,在每个组件或页面的文件中还会有一个json文件.

app.json文件的作用

app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window这个键。

逻辑层

App函数

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

getApp(Object)函数

全局的 getApp() 函数可以用来获取到小程序App实例。

注意:

• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

注册页面

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

object重要参数

1. data参数

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

生命周期回调函数

1. onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

2. onShow()

页面显示/切入前台时触发。

3. onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

4. onHide()

页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

5. onUnload()

页面卸载时触发。如redirectTo或navigateBack到其他页面时。

setData函数

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）.

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

视图层

1. 数据绑定:

   数据绑定使用{{}}将变量包起来,里面的内容可以是js的语句.

2. 列表渲染:

   • 在组件上使用wx:for可以将列表中各个项的数据重复渲染到该组件中.
   • 默认数组中每一项的下标变量名默认为index,数组当前项的变量名默认为item.
   • 使用wx:for-item可以指定数组当前元素的变量名,使用wx:for-index可以指定当前下标的变量名.

wx:key,如果列表中的项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的状态,就必须要给列表指定一个唯一的wx:key,如果明确知道列表是静态的,或者不需要关注其顺序,可以选择忽略掉wx:key,不指定wx:key会报一个警告.

注意: 当wx:for的值为字符串时,会将字符串解析成字符串数组.

3. 条件渲染:

   • wx:if: 如果值为false的话元素不会被渲染到页面中,直到值为true时,元素才会被渲染到页面中,当值从true变成false时页面会将元素删除,所以一些切换不频繁的元素,或者是有大概率不会显示到页面上的元素可以使用wx:if
   • wx:hidden: 无论值为什么元素都会被渲染到页面上,只是单纯的控制元素的显示和隐藏.

4. 模板

可以在模板中定义代码片段,然后在不同的地方调用,在定义模板时使用name作为模板的名字,在使用模板时,使用is属性,声明需要使用的模板,然后将模板所需要的data传入.

模板拥有自己的作用域,只能使用data传入的数据以及模板定义文件中定义的<wxs />模块.

5. 事件

可以使用bind+事件名或者catch+事件名,bind事件绑定不会阻止事件冒泡,catch事件绑定可以阻止事件的冒泡,事件的函数会传递过来一个事件对象.

6. 引用

文件引用方式有两种import和include.\

• import可以在该文件中使用目标文件定义的template,import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template.
• include可以将目标文件除了<template> <wxs />外的整个代码引入,相当于拷贝到include位置.

WXS

WXS是小程序的一套脚本语言,结合WXML,可以构建出页面的结构.

注意

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

WXS模块

WXS 代码可以编写在 wxml 文件中的<wxs> 标签内，或以 .wxs 为后缀名的文件内。

模块

每一个.wxs文件和<wxs>标签都是一个独立的模块,每一个模块都有自己独立的作用域.即在一个模块里面定义的变量和函数都是私有的,如果想暴露内部变量与函数,只能够通过module.exports实现.

module对象

每个wxs模块都有一个内置的module对象,通过export属性可以对外暴露对象与函数.

require函数

在.wxs模块中引用其他wxs文件模块,可以使用require函数.

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

自定义组件

组件样式

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

• 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
• 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
• 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
• 继承样式，如 font 、 color ，会从组件外继承到组件内。
• 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

将组件构造器中的options.addGlobalClass字段设置为true.可以让组件外部的样式影响到组件内部.

Component构造器

在Component构造器中可以指定组件的属性,数据和方法等,具体参数看文档

组件事件与通信

组件之间通信

• WXML数据绑定: 用于父组件阿星子组件的指定属性设置数据,仅能设置JSON兼容数据.
• 事件:用于子组件向父组件传递数据,可以传递任意数据.
• 如果以上两种方式不足以满足需要,父组件还可以通过this.selectComponent方法获取子组件实例对象,可以访问到组件的任意数据和方法.

自定义事件

1. 组件发布自定义事件:

使用this.triggerEvent('事件名称', detail, option)这个方法第一个参数是自定义事件的事件名,第二个参数是要传给外部的数据对象,第三个参数是触发事件的选项.

2. 监听自定义事件

在使用组件时通过bind+事件名称来设置监听事件的函数,接受一个event参数,在event参数的detail属性中能够访问到组件中传递过来的数据.

behaviors

就是mixin可以将多个组件中重复的代码集中到一个文件中,然后组件在引用它时就会被合并到组件中,这样可以减少冗余代码.

behaviors需要使用Behavior()构造器定义,在使用的时候需要通过require()引入然后将其添加到Component或Page中的behaviors属性中去,这个属性是一个数组.

字段覆盖和组合的规则

组件或者和他引用的behavior中可以包含同名的字段,对这些同名字段的处理规则如下:

• 如果有同名的属性或方法,那么组件本身的属性或方法会覆盖behavior,如果同名的属性或方法出现在不同的behavior中那么后面的会覆盖前面的.
• 如果有同名的数据字段,如果数据字段是对象那么会进行对象合并,如果是其他的类型,会被覆盖.
• 如果在不同的behavior定义了同一个生命周期函数,那么生命周期函数会在对应的时机依次触发,如果是同一个behavior

• 作者简介：李成文，芦苇科技web前端开发工程师，擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。