微信小程序中的wxs 使用总结

目前接触到的wxs有两种方式：

1，单独的文件形式，引入到页面的结构当中wxml，引入方式可以

对应的页面功能代码写入对应的wxs文件当中，通过引用的方式应用到页面当中

• 标签引入<wxs src="./../handleSrc.wxs" module="handleSrc" />
• require引入 var handleSrc = require("./handleSrc.wxs"); 相对路径
  上代码：

2，直接在页面中使用：

wxml页面格式的######标签

<wxs module="handleSrc">

function getSrc(oldSrc, size) {

var arr = oldSrc.split('.');

if ('.png.jpg.jpeg'.indexOf(arr[arr.length - 1]) !== -1)

arr[arr.length - 2] = arr[arr.length - 2] + '_' + size + 'x10000';

return arr.join('.');

}

 

function setViewTime(oldViewTime) {

return oldViewTime.slice(0, oldViewTime.length - 4) + '万';

}

module.exports.getSrc = getSrc;

module.exports.setViewTime = setViewTime;

</wxs>

不管是哪一种都需要通过module.exports暴露出去，才能被页面应用到

注意事项：

• <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。仅限当前wxml页面使用。

<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

页面中读取对应方法的方式是：

<cp-loadingAnimation src='{{handleSrc.getSrc(item.surface_plot, 750)}}' imageHeight="460rpx" imageWidth="100%" mode="aspectFill" style='border-radius: 12rpx; overflow: hidden; display: block;' />

通过对应的module下面对应的名称读取下面的方法，例如：

src='{{handleSrc.getSrc(item.surface_plot, 750)}}'