【微信小程序】学习拾遗三（WXS脚本、自定义组件的事件、参数、slot节点、传参、NPM的安装）

原创

已于 2022-12-21 16:44:29 修改 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #学习 #小程序

于 2022-12-18 18:10:42 首次发布

本文介绍了微信小程序中WXS脚本的使用，包括在页面内定义和外部引用。深入讲解了自定义组件的创建、引用、事件、参数属性、监听器、纯数字字段及slot插槽的应用。此外，还讨论了自定义组件间如何传递参数，以及如何获取子组件实例。最后，探讨了 vant 组件库的引入，包括微信官方NPM提示、安装步骤和自定义样式方法。

WXS脚本

链接：官方文档对wxs脚本的说明

在页面内定义：

<!--pages/message/message.wxml-->
<view>当前舰名：{
  
  {m1.sname}}</view>
<wxs module="m1">
var sship = "奋斗号";
module.exports = {
  sname : sship,
}
</wxs>

通过外部定义后在页面引用

// /utils/shipt.wxs
var swork = "舰队人员";
var snumb = 10;
module.exports = {
   
   
  swork : swork,
  snumb: snumb,
};

<!--pages/message/message.wxml-->
<wxs module="m2" src="/utils/shipt.wxs"></wxs>
<view>本级舰船配置 {
  
  {m2.swork}}:{
  
  {m2.snumb}}人</view>

自定义组件

链接：官方文档对自定义事件的说明

新建自定义组件

根目录新建“components”文件夹，并新建组件文件夹。

局部引用

在需要引用组件的页面JSON文件中启用。

"usingComponents": {
    "my-test1":"/components/test1/test"
  },

全局引用

在app.json目录中，引入上方代码，即可全局启用。

自定义组件的事件与方法

自定义组件的事件与方法需要定义在methods中。

methods: {
   
   
    addCount(){
   
   
      this.setData({
   
   
        count: this.data.count +1
      })
      this._showCount()
    },
    _showCount(){
   
   
      wx.showToast({
   
   
        title: '当前价格是' + this.data.count,
         icon:'none'
      })