如(rú)何在小程序中(zhōng)使用wxs模塊 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

如(rú)何在小程序中(zhōng)使用wxs模塊

發表時間:2021-1-5

發布人:葵宇科技

浏覽次數:29

一. 背景

  1. 在小程序 wxml 中(zhōng)的數據渲染,可(kě)以通(tōng)過雙花(huā)括号的形式,花(huā)括号裡面隻可(kě)以進行簡單的算術(shù)運算或者使用三元表達式:

     {{ count }} 
    
    <view> {{ count ? 1 : 0 }} view>
    複制代碼
  2. 假如(rú)需要對綁定的數據進行處理,在 wxml 進行數據渲染的時候,類比于vue可(kě)以使用 methods 的方法或者使用 computed 來處理數據,但是 wxml 并不支持這種寫法。所以引入了 wxs 語法。

二. WXS語法

1.模塊

  • wxs 代碼可(kě)以寫在 .wxs 文(wén)件内或者 标簽内;

  • 每一個(gè) .wxs 文(wén)件内或者 标簽都是一個(gè)獨立的模塊;

  • 一個(gè)模塊要想對外暴露其内部的私有變量與函數,隻能通(tōng)過 module.exports 實現。

    重要:在 wxs 模塊中(zhōng)編寫js代碼,但它不同于js,變量隻能使用 var 來定義。

2.使用标簽形式:

在 wxml 文(wén)件裡面直接使用wxs标簽:

module="m1">  // -- module是wxs模塊的名稱,導出時候在m1對象裡面
var msg = "hello world";

module.exports.message = msg;


<view> {{ m1.message }} view>
複制代碼

3. 使用 .wxs 文(wén)件形式:

在 example.wxs 文(wén)件中(zhōng):

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;
複制代碼

在 wxml 文(wén)件中(zhōng)引入 .wxs 文(wén)件并使用:

module="m1" src=http://www.wxapp-union.com/"../example.wxs">  // -- src是引入路(lù)勁,隻能是相對路(lù)徑

<view> {{ m1.getMax([1, 2, 3, 4, 5, 1, 2, 3, 4]) }} view>  // --  使用 wxs 模塊中(zhōng)的方法

作者:jackycai
來源:掘金
著作權歸作者所有。商(shāng)業(yè)轉載請聯系作者獲得授權,非商(shāng)業(yè)轉載請注明出處。

相關(guān)案例查看更多