基础文档地址:
https://www.w3cschool.cn/weixinapp/
本文把一些需要注意的,和一些容易忽视的问题总结起来,便于以后查阅。
一,条件渲染 wx:if
详情地址:
https://www.w3cschool.cn/weixinapp/weixinapp-conditional.html
使用block wx:if
因为wx:if是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx:if控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意:<block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
二,import和include引用方式
详情地址:
https://www.w3cschool.cn/weixinapp/weixinapp-import.html
import
import可以在该文件中使用目标文件定义的template,如:
在item.wxml中定义了一个叫item的template,在index.wxml中引用了item.wxml,就可以使用item模板:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
个人觉得可以用于导航、分页、页脚等场景。
关于模板定义:
https://www.w3cschool.cn/weixinapp/weixinapp-template.html
include
include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置。
三,WXS模块
参考:
https://www.w3cschool.cn/weixinapp/weixinapp-nvg32czm.html
每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
exports:
通过该属性,可以对外共享本模块的私有变量与函数。
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
require:
在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
引用的时候,要注意如下几点:
只能引用 .wxs 文件模块,且必须使用相对路径。
wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
如果一个 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");
console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
可结合起来,用于公用方法,公用常量等。