微信小程序wxs模块及模板引用丨技术开发分享录

一、wxs模块

切忌：wxs有自己的语法，不要和javascript混为一谈，因为wxs支持的方法或写法有些不欠缺和不同。

字符串示例

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

函数示例

<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<view> {{m1.getMax(list)}} </view>

Page({
  data: {
    list: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
});

脚本分离示例

// /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" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

在wxs文件中引入其他wxs脚本

// /pages/logic.wxs

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

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

如果在模板渲染的时候需要使用函数方法，可以接入wxs实现

二、模板引用

import示例

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

include示例

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

参考链接：

微信小程序wxs模块及模板引用

一、wxs模块

二、模板引用

猜你想看