- 综合排序
- 最热优先
- 最新优先
- 来自专栏陶然同学博客
【小程序】组件
小程序中组件的分类 2. 常用的视图容器类组件 3. view 组件的基本使用 4. scroll-view 组件的基本使用 5. swiper 和 swiper-item 组件的基本使用 6. swiper 组件的常用属性 7 常用的基础内容组件 8. text 组件的基本使用 9. rich-text 组件的基本使用 10. 小程序中组件的分类 小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。 官方把 小程序的组件分为了 9 大类，分别是： 视图容器 基础内容 表单组件 导航组件 媒体组件 map 地图组件 canvas 画布组件 开放能力 无障碍访问 2.
73320编辑于 2023-02-24 - 来自专栏全栈程序员必看
小程序子组件向父组件传值_小程序组件通信
父组件页面是carts.wxml 子页面是product.html 子组件wxml代码 <view class='cartAllSel' bindtap="bindSelectAll" > iconDel' wx:else type="circle" size="20"></icon> <text class='product-title'>全选</text> </view> 子组件 productList: carts, selectedAllStatus: allChecked, }) }, } 父页面 carts.wxml 需要在子组件处添加 {cartList}}" listType="{ {'cart'}}"></ProductList> 父页面 carts.js 注意checkNum方法是不能写在Methods中不然小程序会报找不到该组件
53430编辑于 2022-10-04 - 来自专栏柠檬先生
小程序 组件 Component
一.组件模板和样式 类似于页面，自定义组件拥有自己的 wxml 和模板 wxss 样式。 1.组件模板 组件的写法和页面的写法相同，组件模板与组件数据结合后生成的数节点， 将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点，用于承载组件 引用时候提供的子节点。 页面中引用 如下： <v-component> <view>这里是插入到组件slot中的内容</view> </v-component> 2.组件中的模板数据绑定 与普通的模板数据绑定相同，动态像子组件传递数据 (2) 组件和引用组件的页面中使用后代选择器(.a .b) 在极端情况下会有非预期的表现。 { color:red; } 6.使用组件接收全局样式 默认情况下，自定义组件的样式只受到wxss 的影响 (1) app.wxss 中使用了标签名选择器，影响到页面和全部组件， (2) 在自定义的组件中激活了
1.3K40发布于 2019-05-25 - 来自专栏达达前端
小程序基础-组件
file 作者 | Jeskson 来源 | 达达前端小酒馆 ⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件，表示链接的<navigator>组件 组件的属性 公共属性是指⼩程序所有的组件都有的属性，⽐如id、class、style 轮播效果 ⼩程序有专⻔的轮播组件swiper <view class="home-top"> <view class= audio组件是⾳频组件 <audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{music info.name}}" latitude: 22.540503, longitude: 113.934528, title: '深圳腾讯⼤厦' }, { id: 2, { id: 4, latitude: 22.547400, longitude: 113.944370, title: '腾讯C2'
71320发布于 2019-11-29 - 来自专栏陶然同学博客
【小程序】组件通信
目录 自定义组件 - 父子组件之间的通信 1. 父子组件之间通信的 3 种方式 2. 属性绑定 3. 事件绑定 编辑 4. 获取组件实例 自定义组件 - behaviors 1. () 获取子组件实例对象 这样就可以直接访问子组件的任意 数据和方法 2. 步骤2：在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组 件。 自定义组件 - behaviors 1. 什么是 behaviors behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。 (methods) 同名的生命周期函数 关于详细的覆盖和组合规则，大家可以参考微信小程序官方文档给出的说明： https://developers.weixin.qq.com/miniprogram/
2.7K10编辑于 2023-02-24 - 来自专栏全栈程序员必看
小程序弹框组件_小程序怎么创建
微信小程序提供的弹框模版就3种： 1、消息提示框 对应的效果是这样的 这一种ui我们可以改变的额只有icon、image、title 2、模拟对话框 对应的效果是这样的： 这一种做一些危险操作的提示之类等 忽略部分未调整样式 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/107017.html原文链接：https://javaforall.cn
3.4K10编辑于 2022-08-04 - 来自专栏IT架构圈
「小程序JAVA实战」小程序导航组件（26）
来说下 ，小程序的导航组件。 /page2/page2'>跳转到第二页</navigator> <navigator url='.. /page<em>2</em>/page<em>2</em>' open-type='redirect'>redirect方式跳转到第二页</navigator> <navigator url='../page<em>2</em>/page<em>2</em>? name1=个人主页：idig.com&name<em>2</em>=公众号:编程坑太多'> 传递参数的跳转到第二页</navigator> page2.wxml <! --pages/page2/page2.wxml--> <text>pages/page2/page2.wxml</text> <navigator url='..
1.3K30发布于 2018-12-26 - 来自专栏夏天的前端笔记
小程序：组件篇（三）
1.源代码：listItem.vue 2.listitem.vue子组件这段代码，点击不同的图标它是会跳转到一个内容详情页，但是内容里面全是文字，我就把它放在一个data.js文件夹里面。
17410编辑于 2024-01-18 - 来自专栏极乐技术社区
小程序搜索组件wxSearch
一、功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二、使用 1、将wxSearch文件夹整个拷贝到根目录下 2、引入 3、使用3.1 wxml文件这里有两种模板 搜索框效果图2.png 3.1.3 自定义搜索框如果上面两种搜索样式都不喜欢，你也可以自己定义，只需要保证事件的触发即可。 初始化了wxSearchData的内容 initMindKeys 初始化mindKeys // mindKeys即为所要检索内容的集合 var mindKeys = ['weappdev.com','微信小程序开发 ','微信开发','微信小程序']; WxSearch.initMindKeys(mindKeys); 其他事件函数不再赘述，可能会有一些bug，可以根据情况自己进行修改。
1.9K80发布于 2018-02-05 - 来自专栏跟铭哥学音视频技术
小程序 组件采坑
小程序<mlvb-live-room>是使用了live-pusher、live-player标签和IM sdk组成的一个适用于连麦互动的小程序直播组件。 使用这个组件可以很简单的实现一个直播互动的小程序。虽然功能很好用，但是里面也有不少坑，今天我就来盘点一下。 官方文档介绍 第一个坑：没法试用连麦 这个问题是怎么表现的呢？ 假如你是第一次使用这个组件，想自己本地跑一下连麦效果，那么你大概率是会失败的，你发现你成功上麦之后，主播右下角会出现黑屏小画面，然后上麦的观众出现多次拉流失败的报错，之后上麦的这位观众就会推出直播间，如图下 image.png 2. 其实上麦之后，在这个组件内部是有做混流的，未上麦的观众，看的是混流的画面，因为他们不需要追求超低延时，而上麦的观众对延迟要求比较高，所以他们的通道是查看的超低延时画面。 image.png 顺着代码找，我们可以找到小主播的混流信息构建的位置。 image.png 目前，mlvb这个组件里面使用的混流接口还是v3.0的，所以我们需要去查看v3.0的接口。
2K20发布于 2020-09-10 - 来自专栏前端专栏
小程序转盘抽奖组件
项目地址 码云 效果图 image.png 使用方式 引入组件 .json { "usingComponents": { "turnplate-lottery": "/components /turnplate-lottery/index" } } 使用组件 .wxml <turnplate-lottery id="turnplate" list="{{prizeList}}"></turnplate-lottery
3.5K40编辑于 2022-06-09 - 来自专栏前端笔记ing
小程序组件页面通信
本文将讲解一些小程序中常用的几种通信方式，以及在什么场景中使用哪种方式通信。 获取页面栈信息 getCurrentPages()let pages = getCurrentPages();2. 拿到要目标页面的实例数据信息let prevPage = pages[pages.length - 2];3.设置要修改的值这块可以直接修改目标页面中data定义的属性值prevPage.setData })完整代码 let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData 父组件监听子组件触发的方法父组件通过在 子组件上 绑定子组件定义的事件名然后指定一个事件，来接收子组件传递过来的数据bind:子组件定义的事件名= “接收数据的方法”<detail-form bind
1.5K11编辑于 2023-11-13 - 来自专栏IT架构圈
「小程序JAVA实战」小程序的表单组件（25）
来说下 ，小程序的基础组件。 演示用例 开发能力和api本次不在讲述，等后续跟其他组件结合讲解。 演示用例 在web开发中，表单提交很重要，在小程序里面也有对应的表单提交。 里面很多的效果需要通过在手机端看到，建议远程小程序看看效果很cool！ PS：小程序视图基本就是这样，最后我在myform做了个简单的例子。虽然做了几个例子，但是说实话还是没官网详细。大家一定要记住：学习小程序最好的方式就是通过官网，我也是通过这样学习的。
1.9K70发布于 2018-12-26 - 来自专栏IT架构圈
「小程序JAVA实战」小程序开源搜索组件（53）
介绍开源框架 这是一款搜索插件，该搜索框组件基于开源项目wxSearch 进行了改进，主要有以下几个修改点： 增加了注释，修改了一些bug，项目可以跑起来。 为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。 修改了界面样式，更加美观。 减少了暴露接口，复杂性更低。 在你的wxss文件里导入组件的样式（文件位置为相对位置）： @import "../.. /wxSearchView/wxSearchView.js'); Page({ data: {}, onLoad: function () { // 2 搜索栏初始化 PS：本次主要对插件进行了一次集成，其实不太负责，也是第一次在小程序里面使用插件，之前听同事说过，有了插件搬砖的工作发现可以轻松很多。
1.1K20发布于 2019-01-24 - 来自专栏IT架构圈
「小程序JAVA实战」小程序多媒体组件（27）
来说下 ，小程序的多媒体组件。 源码：https://github.com/limingios/wxProgram.git 中的No.14 媒体组件 audio 可以在小程序嵌入一些音乐，歌曲，mp3什么的 image 任何小程序中必然会使用图片组件 video 视频组件，主要视频播放类的 camera 摄像头组件，新版才提供的 live-player 直播相关的，跟自媒体有关系，在线直播什么的。 重点说说image组件，其他大家看下官网就行 懒加载比较常用。 <!
1K20发布于 2018-12-26 - 来自专栏IT架构圈
「小程序JAVA实战」小程序的视图组件（23）
开始了解下小程序的组件。 源码：https://github.com/limingios/wxProgram.git 中的No.10 视图组件 多个组件构成一张视图页面 经过样式和布局，页面其实理解成html 组件包含<开始标签 view视图组件 view 组件 用的最多的，也是之前的样例也讲过。 --手机按住1秒变成灰色，手指松开后2秒变回原来的红色--> <view class="container" hover-class='hover-class' hover-start-time="10000 PS：跟老铁一起过了一遍wx<em>小</em><em>程序</em>关于视图的api，感觉还是<em>组件</em>很丰富，很好用！
1.2K20发布于 2018-12-25 - 来自专栏IT架构圈
「小程序JAVA实战」小程序的基础组件（24）
来说下 ，小程序的基础组件。 源码：https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 text 文本组件 progress 进度条组件 icon图标组件 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html ? text组件 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/text.html ? 演示用例 text.html <! PS：关于基础组件部分就是这4块，从下次开始咱们一起了解下表单组件
1.1K20发布于 2018-12-25 - 来自专栏大福的FinClip
小程序插件≠小程序组件
说起小程序，大家一定都不陌生。但是许多人不知道的是小程序组件和插件却并不是一码事。虽然只是细微的词语变化，但是这两者之间的关系千丝万缕。 具体可以参考支付宝小程序的官方流程构造：和普通组件不同的是，插件是一种独立封装的软件模块。 一个小程序页面可以分解成很多部分，而组件就是这个页面的基本组成单元。 ---- 常见的一些组件 1.基础内容 2.视图容器 3.表单 4.多媒体 5.导航 怎么去开发并引入小程序插件? 文章的结尾我们来总结一下小程序插件可以帮助开发者解决哪几种问题： 1.因为插件运行时框架提供上下文隔离机制，插件内部的数据安全性更有保障 2.因为插件是独立封装的业务功能和服务，宿主小程序集成和使用插件更为方便快捷
1.7K30编辑于 2022-12-03 - 来自专栏友儿
微信小程序组件如何嵌套组件
组件嵌套组件其实和页面嵌套组件使用大差不差,也是分为注册定义和调用 组件所在目录位置 组件wxml <view> 自定义组件 </view> 组件panel 组件所在目录位置 /compontents /panel/panel 在json文件中注册定义组件tabBar { "component": true, "usingComponents": { "tabBar":"/compontents /tabBar/tabBar" } } 组件wxml 在panel中使用tabBar组件 <view> <tabBar/> </view>
1.5K20编辑于 2022-09-13 - 来自专栏前端笔记ing
小程序系列- 2.小程序环境
程序的生命周期 进入小程序----------微信客户端加载时候，就会给Page 实例 触发 onLoad 事件，它就会被调用， onLoad 在页面销毁之前只会触发1次，在onLoad 回调中，可以获取当前页面的打开参数 2.由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。 eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } }) 组件 complete: function() { // 成功或者失败后触发 } 官方API文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 事件写法 事件绑定的写法和组件属性一致 #2.value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。
4.7K00发布于 2021-10-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号