WXS常用方法

微信小程序框架分為邏輯層和視圖層，而wxs就是運行在視圖層的，只能通過wxml節點來觸發方法，能做的事件一般是比較少的，所以，掌握了wxs常用的方法就是掌握了wxs

 

selectComponent(selector對象)

描述：通過樣式規則返回組件的 ComponentDescriptor 實例。

實例：

wxml:

 

<wxs module="mr" >
   
   module.exports={
     sc:function(e,ins){
        var nihao=ins.selectComponent('.nihao');
        console.log(JSON.stringify(nihao));
     }
   }
</wxs> 
<view>


<button bindtap="{{mr.sc}}">搜索節點</button>
<view style="padding:20rpx;" class="nihao" data-ok="找到了">
  <rich-text nodes="<h1>這杯酒喝下，停止所有牽掛！"></rich-text>
</view>
</view>

 

效果：

 

 

setStyle(Object/string)

描述：設置組件樣式，支持rpx。設置的樣式優先級比組件 wxml 里面定義的樣式高。不能設置最頂層頁面的樣式。

實例：

上面例子加上這一行

 

nihao.setStyle({
     color:"red"
})

 

 

 

效果：

 

 

 

 

addClass(string)

描述：為匹配的組件加上“select”類。

實例：

 

ins.selectComponent('.selectN').addClass('blue')

 

效果：

 

 

removeClass(string)

描述：為匹配的組件移除“select”類。

實例：

ins.selectComponent('.selectN').removeClass('blue')

 

 

hasClass(string)

描述：為匹配的組件判斷是否有該“select”類。返回boolean值

實例：

ins.selectComponent('.selectN').hasClass('blue')

 

getDataset()

描述：返回當前或匹配組件/頁面的 dataset 對象

實例：

console.log(JSON.stringify(ins.selectComponent('.nihao').getDataset()));

console.log(JSON.stringify(e.instance.getDataset()));

 

 效果：

 

callMethod(fn:string, args:object)

描述：調用當前或匹配組件/頁面在邏輯層定義的函數。fn表示函數名稱，args表示函數的參數。

實例：

wxs

 

  callfn:function(e,ins){

　　ins.callMethod("callJS",{content:"來自wxs的問候"})

  } 

 

js

callJS:function(obj){
  wx.showModal({
     title:"通訊提示",
     content:obj.content,
     showCancel:false
  })
}

 

 

效果：

 

getState()

描述：返回一個object對象，當有局部變量需要存儲起來后續使用的時候用這個方法。

實例：

     addstate:function(e,ins){
     
       var gs=ins.selectComponent('.gs').getState();
       if(!gs.count){
         gs.count=0;
       }
       gs.count++;
     },
     getstate:function(e,ins){
        console.log(JSON.stringify(ins.selectComponent('.gs').getState()));
     }

 

 效果：

 

triggerEvent(eventName, detail)

描述：自定義組件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項：

所有實例的源碼：

wxml

<wxs module="mr" >
   module.exports={
     sc:function(e,ins){
        var nihao=ins.selectComponent('.nihao');
        console.log(JSON.stringify(nihao));
        nihao.setStyle({
          color:"red"
        })
        
     },
     sclass:function(e,ins){
        ins.selectComponent('.selectN').addClass('blue')
     },
     dclass:function(e,ins){
        ins.selectComponent('.selectN').removeClass('blue')
     },
     pclass:function(e,ins){
        console.log(ins.selectComponent('.selectN').hasClass('blue'))
     },
     sdata:function(e,ins){
        console.log(JSON.stringify(ins.selectComponent('.nihao').getDataset()));

        console.log(JSON.stringify(e.instance.getDataset()));
     },
     callfn:function(e,ins){
        ins.callMethod("callJS",{content:"來自wxs的問候"})
     },
     addstate:function(e,ins){
     
       var gs=ins.selectComponent('.gs').getState();
       if(!gs.count){
         gs.count=0;
       }
       gs.count++;
     },
     getstate:function(e,ins){
        console.log(JSON.stringify(ins.selectComponent('.gs').getState()));
     },
     tcfn:function(new,old,e,ins){
        console.log("new",JSON.stringify(new));
        console.log("old",JSON.stringify(old));
        console.log("e",JSON.stringify(e));
        console.log("ins",JSON.stringify(ins));
     }
   }
</wxs> 
<view>
<button bindtap="appfn">triggerEvent</button>
<button bindtap="{{mr.addstate}}">增加state</button>
<button bindtap="{{mr.getstate}}" class="gs">getState</button>
<button bindtap="{{mr.callfn}}">wxs與page的聯系</button>
<button bindtap="{{mr.sdata}}" data-name="murenziwei" data-age="23">查看當前dataset屬性</button>
<button bindtap="{{mr.sclass}}">設置樣式blue</button>
<button bindtap="{{mr.dclass}}">移除樣式blue</button>
<button bindtap="{{mr.pclass}}">判斷樣式blue</button>
<button bindtap="{{mr.sc}}">搜索節點</button>
<view style="padding:20rpx;" class="nihao" data-ok="找到了">
  <rich-text change:nodes="{{mr.tcfn}}" nodes="{{node}}" class="selectN" data-name="liwei"></rich-text>
</view>
</view>

 

wxss

/* pages/test/test.wxss */
.blue{
  color:blue;
}

 

js

Page({
  ...{
    //trigger
    appfn:function(){
      this.setData({node:`<h1 style="color:red">這么多年到底混的好不好？</h1>`})
    },
    callJS:function(obj){
      wx.showModal({
        title:"通訊提示",
        content:obj.content,
        showCancel:false
      })
    }
  },
  /**
   * 頁面的初始數據
   */
  data: {
    node:`<h1>這杯酒喝下，停止所有牽掛！</h1>`
  }
})

 

效果：

 

 

小程序文檔有相關wxs的示例，可以下載來學學=>實例鏈接