微信小程序

339 阅读3分钟

wxs

  • 模块
    WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内 每一个 .wxs 文件和 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

module 对象

  • exports: 通过该属性,可以对外共享本模块的私有变量与函数。
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";


<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />

require函数

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

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// /pages/logic.wxs
var tools = require("./tools.wxs");

<!-- /page/index/index.wxml -->
<wxs src="./../logic.wxs" module="logic" />

标签

属性名 类型 说明
module String 当前 标签的模块名。必填字段
src String 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效
src 属性
  • 只能引用 .wxs 文件模块,且必须使用相对路径
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象
  • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
    // /pages/index/index.js
Page({
  data: {
    msg: "'hello wrold' from js",
  }
})


<!-- /pages/index/index.wxml -->
<wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- 也可以直接使用单标签闭合的写法
<wxs src="./../comm.wxs" module="some_comms" />
-->
<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

微信小程序的数据渲染

注意点:

  • 1 列表渲染中 在wxml中都是需要用{{}}来包裹的。

组件的生命周期

生命周期 参数 描述
created 在组件实例刚刚被创建时执行
attached 在组件实例进入页面节点树时执行
ready 在组件在视图层布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行
error Object Error 每当组件方法抛出错误时执行

自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明

组件所在页面的生命周期

生命周期 参数 描述
show 组件所在的页面被展示时执行
hide 组件所在的页面被隐藏时执行
resize Object Size 组件所在的页面尺寸变化时执行

还有一些特殊的生命周期,它们并非与组件有很强的关联,但有时组件需要获知,以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”,在 pageLifetimes 定义段中定义

路由

wx.switchTab(Object object)

作用:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: '/index'
})

cover-view

作用:覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher