草庐IT

微信小程序day04基础加强

Heymar-10 2023-03-28 原文

一.自定义组件

1.1 组件的创建与引用

首先创建组件

然后我们组件的引用分为局部和全局引用

局部引用就是在当前页面能使用,在当前页面的json文件里面配置

全局引用同样的道理,注意跟page等是同级的

组件与页面的不同:

虽然都有相应的四个文件

1.2 组件样式

首先,默认情况下 组件的样式就是隔离的==,组件之间不会相互影响,小程序也不会影响到组件,组件也影响不到小程序

注意:

虽然默认情况下是隔离的,但是也可以一些设置让其不隔离

styleIsolation的属性:

1.3 数据、方法和属性

数据就是组件js里面的data节点里面的数据

方法就是组件js文件里面methods方法,区别于其他页面js的函数是直接写在里面的,组件的函数都需要写在methods里面

主要注意一点,如果不是事件的处理函数,不是由事件来触发,一般这样的函数前面都为一个_下划线

属性:properties

是组件用来接收外部传进来的一些数据

两者区别是上一种不用传值也有默认值

data和properties区别:

都是可读可写的,data倾向于存储私有数据,properties倾向于存储外部传进来的数据

properties也是通过setData来修改

1.4 数据监听器

类似于watch 这里面是 observers

要监听多个字段,直接写在一起通过,分割

同样还支持监听对象里面单个或多个属性的变化

如果是要监听对象里面所有的属性,通过两个通配符 **

而且对应的新值也是整个对象

1.5 纯数据字段

不用于界面渲染的data字段就是纯数据字段

对于这类数据用纯数据来定义更性能会更快

1.6 生命周期

组件的生命周期函数一共六个:

第一个还没有放入到页面节点树中,类似于beforeCreate

第二是放入了页面节点树,但是还没有渲染出来类似于beforeMount

最重要的一共三个:

要定义组件的生命周期,需要用到 lifetimes对象里面来写生命周期函数

还有一个就是组件所在页面的生命周期

就是当组件的行为需要依赖页面的变化的时候,但是组件能访问到页面的生命周期也不多就三个

同样的也需要写到一个对象里面, pageLifetimes

1.7 组件插槽

  • 单个插槽

    首先在组件里面通过slot来占位,然后页面使用组件这里直接写你自己的组件,注意是直接写,因为是单个插槽也不需要指定什么

  • 多个插槽

    如果要启用多个插槽,就需要配置一下,现在组件js配置options里面为multipleSlots为true

    然后定义slot的时候需要指定name

    使用的时候用 slot来指明name

1.8 父子组件通信

有三种方式:

  • 属性绑定: 仅能设置json兼容数据也就是仅能传一些简单数据,不能传方法等

    注意页面也可以当做父组件

    在页面的data定义自己的数据

    直接通过属性绑定给到子组件

    子组件通过properties来接受

  • 事件绑定

    子组件给父组件传数据的时候

    首先父组件要在js定义这个自定义函数

    然后给到子组件,给的时候就通过bind语法加你的事件名,这里最好用第二种形式,可以跟原生事件做一个区别

    子组件这边通过 this.triggerEvent里面是事件名,和你要带的参数(对象形式)

    最后父组件这边通过 e.detail获取参数

  • 获取组件实例

    也是父给子传,类似于ref,需要给子组件设置 class或者id,通过 this.selectComponent来获取到子组件从而可以去修改他的一些data、properties或者调用它的一些方法

1.9 behaviors

behaviors就是mixin,组件中属性、数据、方法、生命周期函数等有共同的都可以通过behaviors来共享

每个组件可以引用多个behavior,behavior也可以引用其他behavior

创建:一般在根目录创建一个behavior文件夹,里面放一个js来专门存放behavior

导入并使用:

此时你的组件已经有这些属性、数据等了,直接用即可

behavior可以存放的属性有哪些:

当behavior与组件里面的一些属性、数据等同名时

有一些规则,还是比较多的,可以通过微信官方文档来看具体

二.使用npm包

虽然能使用npm包,但并不是所有包都能使用

依赖node(如:fs)、依赖浏览器内置对象(如:jQuery)、依赖c++

2.1 Vant Weapp

是有赞前端团队专门用于小程序的一套ui结构

首先安装,参考官网文档https://vant-contrib.gitee.io/vant-weapp/#/quickstart

在自己终端窗口打开,首先要先初始化

直接npm开始安装

接下来的两步查看官方文档配置

然后构建npm就完成安装了

使用

需要在app.json的usingComponents注册

2.2 使用css变量定制vant主题样式

首先css变量怎么用,类似于less变量,可以起到一个方便修改的作用

带有前缀--的属性名,比如--example--name,表示的是带有值的自定义属性,其可以通过 var 函数在全文档范围内复用的。

怎么来定制vant主题

首先是需要在app.wxss里面修改page的样式

在小程序里面page就相当于html是整个页面的根节点

那么怎么来修改呢:

可以在官网文档找到

在这里面找到你要修改的那个组件的什么样式

将前面改成--

2.3 API promise化

小程序官方提供的很多api是基于回调来执行的,就比如发请求的request里面就有成功失败完成等回调,像这样回调一多了就容易产生一个问题,就是造成回调地狱的问题,代码的可读性、维护性差

要将官方api promise化需要用到一个包 miniprogram-api-promise

需要知道的是,我们微信小程序是不能直接识别这些npm包的,之所以能够使用完全是因为构建了npm包,所以这个时候一般下了一个包之后还需要构建一次npm

然后是使用需要在app.js里面顶级先注册调用

将wx上的方法都promise化给到了空对象wxp

中间一定要有个wx.p过渡,后面用也是用这个

怎么来用:

比如发起一个请求

所以现在就可以用async,await了

三.全局数据共享

类似于vuex实现各个组件间数据共享

需要两个包来实现:

  • 下载

  • 创建store

    创建一个store文件夹专门来做仓库,里面导入observable,向外导出他,他就像new store一样,里面就可以放一些需要存放的数据

    state

    计算属性

    直接在下面定义一个函数即可,依赖的数据产生变化,他也会跟着变

    action

    要修改store里面的数据也是需要action来修改的,需要先引入

    然后直接在里面写action的函数,注意方法需要用action包起来

    而且他会接受参数,也就是外部action传进来的参数

    怎么来在page页面中来使用mobx中的数据或者actions

    先引入上面这个方法和我们的store数据源

    首先在我们onLoad钩子中用到这个方法来创建,第一个参数为this也就是这个页面的实例,第二个参数一个对象有我们的数据源,有我们的data、getters、还有actions里面的函数

    创建之后就有了这个实例对象,就可以在onUnload钩子清理这些数据

    绑定好之后,直接在页面中使用即可

    注意我要修改numA的值,需要action接受参数,同时这边只能传进store里面去改

    在组件中使用:

    主要注意他有三种引入数据的方法,引入action前面是你自定义的名字,后面才是actions里面定义的函数名

四.分包

就是将一个完整的小程序划分为不同的子包,用户在使用时按需加载

如果不分包的话那就是所有页面以及资源融合在一起

分包后一般分为一个主包多个分包

注意:主包里面的公共资源所有人包可访问,但是分包里面的私有资源只有自己能访问,tabBar页面需要放在主包中

整个小程序分包大小不能超过16MB,单个分包不能超过2MB

4.1 使用分包

首先了解一下分包的树结构

就是和pages同级再来分包的文件夹,里面又放一些pages

但是还没完还要在app.json配置 subpackages

查看分包体积

4.2 独立分包

独立分包本质上也是分包,只是普通分包要进入必须依赖主包进入,而独立分包则不依赖主包,可以通过其他渠道直接进入小程序

创建时候独立分包和普通分包的区别就是,json文件有无 independent

注意独立分包和普通分包以及主包之间是相互隔离的,无法相互引用彼此资源,包括主分包公共资源

4.3 分包预下载

进入某个小程序时,由框架预下载可能需要的分包,从而提升进入分包的启动速度

预下载是进入一些指定的页面时触发

包名除了root还可以通过name指定

分包预下载限制:

分包预下载限额2MB

五.案例自定义tabBar

tabBar数字和我们的store数字保持同步

首先官方文档是有自定义tabBar教程的

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

首先需要开启自定义模式 custom改为true

注意原先定义的tabBar最好不删除

一个是保证低版本可以看到tabBar,一个是可以用来区分哪些是tabBar

创建文件夹

先实现一个基本的tabBar结构,这里我们用vant组件实现

先引用

将数据改成我们自己的数据,注意怎么换成我们自己的icon图标

然后说一下怎么来修改我们组件的一个样式

之前已经说过了,但那是直接在app.wxss里面改,而现在是在组件里面的wxss里面改,就需要一个新的配置项

这样才能修改成功

但是我们的info应该是人手一个

这个时候就要考虑怎么讲mobx的值给到我们的tabBar里面来了,这里的自定义tabBar实际上是组件,所以要用组建的引用方法

然后就是怎么将自定义的tabBar info值和我们的数据连动起来,这里要用到监听器

到目前为止还差最后一步,切换效果

通过 wx.switchTap这个api来实现跳转

但是这个时候icon又出现了问题,这个时候应该去store定义一个active作为索引值

修改选中项文本颜色

参考vant组件api

有关微信小程序day04基础加强的更多相关文章

  1. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  2. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug,发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则:20%的主要功能要重点测(eg:支付宝的支付功能,其他功能都是次要的)80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  3. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求:要创建虚拟机,就需要给他提供一个虚拟的磁盘,我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式:qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令,基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机,另外在创建虚拟机之前,提前打开vnc客户端,在创建虚拟机的时候,通过vnc

  7. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  8. ruby - 在 Ubuntu 14.04 中使用 Curl 安装 RVM 时出错 - 2

    我试图在Ubuntu14.04中使用Curl安装RVM。我运行了以下命令:\curl-sSLhttps://get.rvm.io|bash-sstable出现如下错误:curl:(7)Failedtoconnecttoget.rvm.ioport80:Networkisunreachable非常感谢解决此问题的任何帮助。谢谢 最佳答案 在执行curl之前尝试这个:echoipv4>>~/.curlrc 关于ruby-在Ubuntu14.04中使用Curl安装RVM时出错,我们在Stack

  9. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at),我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束),以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

  10. ruby-on-rails - Ubuntu 14.04 Rails 丢失文件 - 2

    安装Rails时,一切都很好,但后来,我写道:rails-v和输出:/home/toshiba/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in`require':cannotloadsuchfile--rails/cli(LoadError)from/home/toshiba/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in`r

随机推荐