微信小程序中的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)}}'