微信小程序框架分为逻辑层和视图层，而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的示例，可以下载来学学=>实例链接
