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