微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条

发布时间:2024年01月10日

WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。

wsx 在IOS设备上性能是JavaScript的2-20倍

内嵌式

<view>
  <view>{{m1.toUpper(message)}}</view>
</view>
<wxs module="m1">
  module.exports.toUpper = function(str){
    return str.toUpperCase();
  }
</wxs>

module=“属性值”

关联式

<view>
  <view>{{m2.toLower(message)}}</view>
</view>
<wxs src="/utils/tools.wxs" module="m2"/>

在utils下创建文件tools.wxs

// wxs
function toLower(str){
  return str.toLowerCase();
}

module.exports = {
  toLower : toLower
  // 起别名 : 方法名
}

在wxs文件中直接写方法,最后通过module.exports暴露出来

组件Components

组件相当于是自定义标签

组件创建:创建文件夹 – > 右键文件夹创建component

局部

局部配置只能在配置的页面上使用,单独在页面的JS文件中配置

在需要引用组件的页面的JSON文件中配置

{
  "usingComponents": {
    "my-com" : "/components/test1/test1"
  }
}

wxml文件中引用

<view>
  <my-com></my-com>
</view>

引用组件的页面会显示组件的wxml文件中的内容

全局

全局配置所有页面都可以用,在App.js中配置:

在windows同级下编写一下代码

"usingComponents": {
  "my-com" : "/components/test1/test1"
}

组件的样式隔离

app.wxss 中的全局样式 对组件无效的

只有class选择器会有样式的隔离效果 id选择器 属性选择器 标签选择器 不受样式隔离限制

  1. 方式一:

    在组件中的json文件下配置

    {
      "component": true,
      "usingComponents": {},
      "styleIsolation": "isolated"
    }
    
  2. 方式二:

    在组件的js文件中配置

    options:{
      styleIsolation : "isolated"
    }
    

属性值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-sharedshared 的自定义组件。(这个选项在插件中不可用。)

组件传值

组件要接收调用者传来的值,并显示到页面上,实现步骤:

在组件的js文件properties属性列表中定义参数名

properties: {
  max : {
    type : Number,      // 定义参数类型
      value : 20				// 默认值,若页面上没传参数,默认值为20
  }
}

组件的wxml文件

<view class="classA">
  <view>接收到的参数是:{{max+1}}</view>
</view>

引用组件的页面(组件的调用者)

<view>
  <my-com max="10" ></my-com>   //  传参的参数名="参数值"
</view>

调用页面上显示11,如果没传,则显示默认值 20 +1 = 21

组件的properties

在小程序 properties 和 data 的数据用法相同 都是可以读写的 但是

  • data更倾向于私有数据

  • properties 更倾向于存储对外接收到的数据

  • 本质上没有区别

组件方法

组件方法与页面方法不同在于组件方法都需要定义在methods中

组件数据监听器

数据的监听 用于监听和响应任何的属性和数据字段的变化 ,从而执行特定的操作

eg:sum = a + b ; sum随着a和b的变化而发生改变

组件的wxml文件

<view>
  {{a}} + {{b}}  = {{sum}}
</view>
<button type="default" size="mini" bind:tap="addA" >A++</button>
<button type="default" size="mini" bind:tap="addB" >B++</button>

组件的js文件

	/**
   * 组件的初始数据
   */
  data: {
    sum : 0,
    a : 0,
    b : 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addA(){
      this.setData({
        a : this.data.a +1
      });
    },
      addB(){
        this.setData({
          b : this.data.b +1
        });
      }
  },
    // 监听器
    observers:{
      'a,b':function(a,b){
        this.setData({
          sum : a + b
        })
      }
    }

监听器使用observers定义,与methods同级,写需要监听的数据'a,b',函数中写需要执行的操作;如果需要监听对象的属性,写对象名.属性名

纯数据字段

不需要渲染到页面的data字段;纯数据字段 有助于提升页面的更新性能

实现步骤:

  1. 定义纯数据字段规则

    options与data同级

    options:{
      // 定义纯数据字段规则
      pureDataPattern : /^_/ ,   // 指定所有以_开头的为纯数据字段
    },
    

    如果初始化数据以下划线开头,就是纯数据字段

  2. 定义初始化数据

    // js
    data: {
      _n : true,
      m : false
    }
    
  3. 组件引用

    组件的wxml文件

    <rich-text nodes="<h1>{{_n}}</h1>"/>
    <rich-text nodes="<h1>{{m}}</h1>"/>
    

    页面上会显示false,不会显示纯数据字段true

组件的生命周期函数

组件的生命周期

生命周期参数描述最低版本
created在组件实例刚刚被创建时执行1.6.3
attached在组件实例进入页面节点树时执行1.6.3
ready在组件在视图层布局完成后执行1.6.3
moved在组件实例被移动到节点树另一个位置时执行1.6.3
detached在组件实例被从页面节点树移除时执行1.6.3
errorObject Error每当组件方法抛出错误时执行2.4.1

组件所在页面的生命周期函数

生命周期参数描述最低版本
show组件所在的页面被展示时执行2.2.3
hide组件所在的页面被隐藏时执行2.2.3
resizeObject Size组件所在的页面尺寸变化时执行2.4.0
routeDone组件所在页面路由动画完成时执行2.31.2

注意:自定义 tabBar 的 pageLifetime 不会触发。

eg:组件的js文件

  lifetimes:{
    attached:function(){
      console.log("在组件实例进入页面节点树时执行");
    },
      detached : function(){
        console.log("在组件实例被从页面节点树移除时执行");
      }
  },
  pageLifetimes:{
    show: function() {
      // 页面被展示
      console.log("页面被展示");
    },
      hide: function() {
        // 页面被隐藏
        console.log("页面被隐藏");
      },
        resize: function(size) {
          // 页面尺寸变化
          console.log("页面尺寸变化");
        }
  }

组件插槽

与Vue中的插槽相似

单插槽

实现步骤:

在组建的wxml文件中定义插槽

<view>
  <slot></slot>
</view>

调用组件的页面中

<my-com>
  <component-tag-name>
    <view>这是插槽的内容</view>
  </component-tag-name>
</my-com>

多插槽

实现步骤:

  1. 在组件的配置文件中开启多插槽支持

    组件的js文件

    options:{
      multipleSlots: true  // 在组件定义时的选项中启用多slot支持
    }
    
  2. 定义插槽

    组件的wxml文件,需要给<slot></slot>标签name属性

    <view>
        <slot name="before"></slot>
        <view>------分割线---------</view>
        <slot name="after"></slot>	
    </view>
    
  3. 调用页面

    使用时需要使用slot=""说明是那个插槽

    <my-test2>
      <view slot="after">after</view>
      <view slot="before">before</view>
    </my-test2>
    

弹窗

页面提示

icon的合法值:

合法值说明
success显示成功图标,此时 title 文本最多显示 7 个汉字长度
error显示失败图标,此时 title 文本最多显示 7 个汉字长度
loading显示加载图标,此时 title 文本最多显示 7 个汉字长度
none不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持
wx.showToast({
  title: '提示',
  icon: "success",
  mask: true,       // 不允许点击页面
  duration : 5000   // 持续时间
})

模态对话框

带有取消和确定按钮的弹窗

wx.showModal({
  title: '提示',
  content: '确认要取消么',
  complete: (res) => {
    if (res.cancel) {
      // 取消执行
    }
    if (res.confirm) {
      // 确认执行
    }
  }
})

加载提示

属性类型默认值必填说明
titlestring提示的内容
maskbooleanfalse是否显示透明蒙层,防止触摸穿透
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

eg:

wx.showLoading({
  title: '加载中',
})
setTimeout(function () {
  wx.hideLoading()
},2000)

注意:需要手动关闭

选项对话框

属性类型默认值必填说明
alertTextstring警示文案
itemListArray.<string>按钮的文字数组,数组长度最大为 6
itemColorstring#000000按钮的文字颜色
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    // 输出选择的下标
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

滚动条

onPageScroll:页面滚动触发事件的处理函数

属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)

wx.pageScrollTo:将页面滚动到目标位置,支持选择器和滚动距离两种方式定位

属性类型默认值必填说明
scrollTopnumber滚动到页面的目标位置,单位 px
durationnumber300滚动动画的时长,单位 ms
selectorstring选择器
offsetTopnumber偏移距离,需要和 selector 参数搭配使用,可以滚动到 selector 加偏移距离的位置,单位 px
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

案例:回到顶部按钮的实现

js文件:定义方法

data: {
  no_scroll: true
},
goTop() {
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  }
},
  onPageScroll(e){
    if(e.scrollTop > 300){
      this.setData({
        no_scroll:false
      })
    }else{
      this.setData({
        no_scroll:true
      })
    }
  }

wxml文件:

<view hidden="{{no_scroll}}" bind:tap="goTop" class="fix_bo"></view>

wxss文件:

.fix_bo{
  width: 77rpx;
  height: 77rpx;
  opacity: .4;
  border-radius: 100%;
  background-color: black;
  position: sticky;
  bottom: 80rpx;
  left: 87%;
  color: white;
  font-size: larger;
  text-align: center;
  line-height: 77rpx;
}
文章来源:https://blog.csdn.net/HakerDONG/article/details/135513640
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。