小程序内容（补）

最新推荐文章于 2024-12-24 21:55:56 发布

原创最新推荐文章于 2024-12-24 21:55:56 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了小程序组件的复用、分类（内置与第三方）、npm支持、自定义组件创建、父子组件通信、第三方库vant的使用，以及上拉加载优化。重点讲解了组件间的三种通信方式：父传子、子传父和兄弟组件间协作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序内容
一、小程序组件复用
组件是什么
组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块
插件：通常是为了完成某项具体的业务功能而开发的js文件例如：swiper.js,弹框.js，。。。。
类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！例如：jQuery,lodash.js
框架:framework,分是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架
UI框架：boostStrap,Element UI,vant UI,iview,and Design…
javaScript框架：vue.js,React.js,Angular.js
1
2
3
4
5
6
小程序组件分类

内置组件：小程序内置的组件，直接拿来就可以使用，无需安装

例如：view,text,image,button,swiper,switch…

第三方组件:需要安装，引入，再使用

推荐基于小程序的UI框架：vant UI

官方文档地址：https://vant-contrib.gitee.io/vant-weapp/#/intro
1
2
3
如何让小程序支持npm:

生成package.json:npm init -y

安装vant: npm i @vant/weapp -S --production

将 app.json 中的 “style”: “v2” 去除

勾选开发者工具-详情–本地设置-npm模块

选择微信开发者工具-工具-构建npm

使用第三方vant组件

第一步：在app.json或当前页面的json文件中的usingComponents引入

第二步：在wxml页面上引入标签

自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

快速创建一个组件的步骤：
新建的组件构造器：
Component({

})

1
2
3
4
2. 文件类型也有4个:wxml,json,js,wxss

	3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件，例如：cate.json

1
2
3
{
“usingComponents”: {
“Dialog”:"/components/dialog/dialog"
}
}
1
2
3
4
5
将Dialog显示到wxml视图上例如：cate.wxml

1 组件之间如何通讯：

思考一下：在Vue中，如何通过父级组件改变子组件中的值？？？

A.vue

import …
components:{B}

template

mehtods:{
change() {
this.$refs.b.hello()
}
}
1
2
3
4
5
6
7
8
9
10
11
B.vue

methods:{
hello() {…}
}
1
2
3
小程序如何获取子组件的实例呢

this.selectComponent(‘选择器名称’)

例如： this.dialog=this.selectComponent(’#dialog’) //通常写在onLoad
1
2
3
小程序组件通讯实现方式

第一种：父传子

如何传

1
2
3
4
5
如何接
Component({
…
properties: {
//要接收的属性
title:{
//接收的类型
type:String,
//接收的默认值
value:“此处应该有一个标题”
},
content:{
type:String,
value:“此处应该是内容”
}
},
…
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
第二种：子传父

主要通过事件派发，监听模式
Vue：this.$emit(‘自定义的事件名’,要传递的值)
小程序：this.triggerEvent(‘自定义的事件名’,要传递的值,事件选项)

子派发事件：triggerEvent
//确定逻辑
confirm_btn() {
//向父级派发confirm事件
this.triggerEvent(‘confirm’,‘您点击确定啦’)
},

父监听：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
第三种：兄弟之间
vue兄弟组件传值:bus,vuex

小程序：主要通过利用父级组件当桥梁，来实现兄弟组件通讯

A：父组件：cate

B传给C兄弟

B传A:

wxml:

我是A组件-{{ num }}
把A的数据发送给B组件

JS:
goToParent() {
this.triggerEvent(‘A’,this.data.num)
}
}
A传C

myA(e) { this.setData({ num:e.detail })

}

C再将A接的值再接收:

//父级代码：cate

C内部的代码：
Component({
properties: {
mynum:{
type:Number,
value:99
}
},
})
我是B组件--{{ mynum }} ~~删除线格式~~ **微信小程序上拉加载**
产品角度：提升用户体验

技术角度：后台接口支持分页

返台接口：{page:当前页码，pageSize:每页显示几条,start:起始偏移量}
1
实现方式:

使用onReachBottom实现
//触底生命周期
onReachBottom() {
console.log(‘onReachBottom’);
if(!this.data.flag) {
this.data.page++;
this.getGoods()
}
}

//加载商品列表
getGoods() {
let {categoryId,page,pageSize}=this.data;
let tempArr=[];
getGoodsList({categoryId,page,pageSize})
.then(res=>{
console.log(‘商品列表结果：’,res);

if(res.code===0) { tempArr=this.data.goodsArr.concat(res.data) this.setData({ goodsArr:tempArr }) }else if(res.code===700) { this.setData({ flag:true }) } })

}

onShow() {
//自动加载商品列表
this.getGoods()
}