微信小程序开发要点

 

基础文档地址：

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);

可结合起来，用于公用方法，公用常量等。