0
点赞
收藏
分享

微信扫一扫

2022/4/6

小a草 2022-04-06 阅读 88

60-94

自定义组件

组件的创建与引用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据、方法和属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
此实验证明data和properties指向同一对象
在这里插入图片描述

数据监听器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

纯数据字段

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件的生命周期

在这里插入图片描述
执行时机和表的顺序相同
在这里插入图片描述
在这里插入图片描述

组件所在页面的生命周期

在这里插入图片描述

用于监听组件所在页面的生命周期

插槽

在这里插入图片描述

根据使用情况的不同,可以向内填充不同的组件。
如图中,第一次调用组件,插槽就为view组件,第二次调用组件,插槽就为text组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

父子组件之间的通信

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
推荐使用第一种方法,因为结构更清晰,bind:事件名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

behaviors

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用npm包

在这里插入图片描述

vant weapp

在这里插入图片描述

在这里插入图片描述
自动初始化包管理配置文件:npm init -y
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改后,危险按钮的颜色发生变化
page:小程序页面的根节点
关于变量名见:配置文件
在这里插入图片描述

API Promise化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将wx中所有回调函数promise化,并将其挂载到wxp下,后续即可以通过wx.p调用promise化的回调函数

全局数据共享

在这里插入图片描述
在这里插入图片描述

Mobx

在这里插入图片描述

在这里插入图片描述
创建:文件夹store->js文件store.js
计算属性:get——只读
修改数据属性:定义action方法,通过action方法进行修改。action方法包住一个function函数

在这里插入图片描述
第一步:导入需要的包和文件
第二步:在onLoad中的绑定数据:createStoreBindings(this,{store,…})
this:页面示例,表示当前页面
store:数据源
…:fields为导入的属性数组,actions(s不能少)为导入的方法数组
第三步:在onUnload中解绑数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注:不论哪里使用了store中的数据,当数据改变时,所有地方的store数据都会改变。

分包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用分包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

独立分包\

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

分包预下载

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自定义tabBar

在这里插入图片描述
在这里插入图片描述
自定义tabBar文档
在这里插入图片描述
如上图所示,尽管设置了"custom": true后tarBar不会显示,但list中的内容仍需写完整。
在这里插入图片描述
以组件形式添加上图文件,命名方式必须完全相同

可以将app.json中的list数组放置到index.js的data中,在index.wxml中以wx:for 的形式循环渲染出自定义的tabBar

<van-tabbar-item wx:for="{{list}}"  wx:key="index" >
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>

在这里插入图片描述
通过info属性可以为tabBar添加数字徽标

按需渲染info:在需要渲染数字徽标的list的元素中定义一个info变量,在渲染时判断info是否定义,以实现按需渲染。当info为0时则不会渲染数字徽标

<van-tabbar-item wx:for="{{list}}"  wx:key="index" info="{{item.info?item.info:''}}" >

在这里插入图片描述

使数字徽标显示需要的数字

  1. 将store中的数据映射到tabBar中
    使用文档
    方法与将store绑定到components的方法相同
  2. 定义数字监听器
observers:{
    'sum':function(sum){
      this.setData({
        'list[4].info':sum
      })
    }
  },

tabBar页面切换

注:页面切换的url要求完整路径,list中的url应以/开头

"pagePath": "/pages/test-npm/test-npm",

 onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

选择项显示问题:点击到对应的选择项,但是图标并没有跟随点击变化。
解决方法:将active从data中定义到store中,同时定义一个更新active的方法,让其代替this.setData({ active: event.detail });

onChange(event) {
      // event.detail 的值为当前选中项的索引
      //this.setData({ active: event.detail });
      this.updatastore_active(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

具体过程见:过程

举报

相关推荐

2022/4/4

2022/4/9-2022/4/10

2022/4/4偷懒

2022-6

2022/6/3

2022/4/13

2022/4/2

2022/4/1

0 条评论