微信小程序开发文档 第3页

tabs 选项卡组件。 <view class="page"> <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick" bindchange="onChange" activeClass="tab-bar-title__selected"> <block wx:for="{{tabs}}" wx:key="title"> <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" > <image src="{{item.img}}" mode="widthFix"></image> <view class="item-title"> {{item.title2}} </view> <view class="item-desc"> {{item.desc}} </view> </view> </block> </mp-tabs> </view> Page({ onShareAppMessage() { return { title: 'tabs', path: 'page/weui/example/tabs/tabs' } }, data: { tabs: [], activeTab: 0, }, onLoad() { const tabs = [ { title: '技术开发', title2: '小程序开发进阶', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg', desc: '本视频系列课程，由腾讯课堂NEXT学院与微信团队联合出品，通过实战案例，深入浅出地进行讲解。', }, { title: '产品解析', title2: '微信小程序直播', img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png', desc: '微信小程序直播系列课程持续更新中，帮助大家更好地理解、应用微信小程序直播功能。', }, { title: '运营规范', title2: '常见问题和解决方案', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg', desc: '提高审核质量', }, { title: '营销经验', title2: '流量主小程序', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg', desc: '本课程共四节，将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议，以及如何通过工具调优小程序变现效率。', }, { title: '高校大赛', title2:'2020中国高校计算机大赛', img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg', desc: '微信小程序应用开发赛', }, ] this.setData({ tabs }) }, onTabClick(e) { const index = e.detail.index this.setData({...

sticky 粘性布局组件。Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。 属性列表 属性 类型 默认值 必填 说明 offset-top Number 0 否 吸顶时与顶部的距离，单位px z-index Number 99 否 吸顶时的 z-index container function null 否 一个函数，返回容器对应的 NodesRef 节点 disabled Boolean false 否 是否禁用 bindscroll eventhandle 否 滚动时触发，{scrollTop: 距离顶部位置, isFixed: 是否吸顶 } 代码演示 吸顶距离 通过 offset-top 属性可以设置组件在吸顶时与顶部的距离 <mp-sticky offset-top="32"> <button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button> </mp-sticky> 指定容器 通过 container 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 <view id="container" style="height: 250px; background-color: #E0E0E0;"> <view style="height: 100px; background-color: #FFFF99;"></view> <mp-sticky container="{{container}}" offset-top="64"> <button size="mini" type="primary" style="margin-left: 215px; background-color: #ff976a">指定容器</button> </mp-sticky> </view> Page({ data: { container: null }, onReady() { this.setData({ container: () => wx.createSelectorQuery().select('#container') }) } })

recycle-view 小程序长列表组件 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 背景 ​目前小程序会有不少的应用场景里会用到无限长列表的交互，当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点： 列表数据很大，首次 setData 的时候耗时高 渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高 渲染出来的列表 DOM 结构多，占用的内存高，造成页面被系统回收的概率变大。 因此就有长列表组件来解决这些问题。 实现思路 ​核心的思路是只渲染显示在屏幕的数据，基本实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 div 占位元素。 假设列表数据有100个 item，知道了滚动的位置，怎么知道哪些 item 必须显示在页面？因为 item 还没渲染出来，不能通过 getComputedStyle 等 DOM 操作得到每个 item 的位置，所以无法知道哪些 item 需要渲染。为了解决这个问题，需要每个 item 固定宽高。item 的宽高的定义见下面的 API 的createRecycleContext()的参数 itemSize 的介绍。 滚动过程中，重新渲染数据的同时，需要设置当前数据的前后的 div 占位元素高度，同时是指在同一个渲染周期内。页面渲染是通过 setData 触发的，列表数据和 div 占位高度在2个组件内进行 setData 的，为了把这2个 setData 放在同一个渲染周期，用了一个 hack 方法，所以定义 recycle-view 的 batch 属性固定为 batch=”{{batchSetRecycleData}}”。 在滚动过程中，为了避免频繁出现白屏，会多渲染当前屏幕的前后2个屏幕的内容。 包结构 长列表组件由2个自定义组件 recycle-view、recycle-item 和一组 API 组成，对应的代码结构如下 ├── miniprogram-recycle-view/ └── recycle-view 组件 └── recycle-item 组件 └── index.js 包结构详细描述如下： 目录/文件 描述 recycle-view 组件 长列表组件 recycle-item 组件 长列表每一项 item 组件 index.js 提供操作长列表数据的API 使用方法： 1.安装组件 npm install --save miniprogram-recycle-view 2.在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置 { "usingComponents": { "recycle-view": "miniprogram-recycle-view/recycle-view", "recycle-item": "miniprogram-recycle-view/recycle-item" }...

emoji 仿微信表情组件。使用前需将文档下方提供的表情雪碧图上传 CDN，再传入表情组件。为提升首次加载表情图片的性能，可通过 image 组件提前触发雪碧图的下载，利用浏览器的缓存机制。在不使用表情面板的页面，可将 emoji 组件隐藏或移出屏幕外，仅使用 parseEmoji 的功能。 属性列表 属性 类型 默认值 必填 说明 source string 是 表情雪碧图地址 height number 300 否 表情盘高度 background-color string #EDEDED 否 表情盘背景色 show-send boolean true 否 是否显示发送按钮 show-del boolean true 否 是否显示删除按钮 show-history boolean true 否 是否显示最近使用 bindinsertemoji eventhandle 否 插入表情，e.detail={emotionName} binddelemoji eventhandle 否 点击删除按钮 bindsend eventhandle 否 点击发送按钮 示例代码： { "disableScroll": true, "navigationBarTitleText": "", "usingComponents": { "mp-emoji": "../components/emoji/emoji" } } <scroll-view scroll-y style="height: {{layoutHeight}}px" scroll-into-view="{{historyList[historyList.length - 1].id}}"> <block wx:for="{{historyList}}" wx:for-index="idx" wx:for-item="historyItem"> <view class="record" hidden="{{historyItem.length === 0}}" id="{{historyItem.id}}"> <view class="avator"></view> <view class="comment"> <block wx:for="{{historyItem.emoji}}" wx:key="*this"> <block wx:if="{{item.type === 1}}">{{item.content}}</block> <view wx:if="{{item.type === 2}}" style="display: inline-block; width: {{lineHeight}}px; height: {{lineHeight}}px"> <view class="{{item.imageClass}}" style="background-image: url({{emojiSource}});transform-origin: 0 0; transform: scale({{lineHeight / 64}});"></view> </view> </block> </view> </view> </block></scroll-view> <view class="reply_wrp" style="bottom: {{keyboardHeight}}px"> <view class="reply_tool">...

Searchbar 搜索组件Searchbar提供搜索的功能，并展示搜索的结果。 示例代码： { "usingComponents": { "mp-searchbar": "../components/searchbar/searchbar" }, "navigationBarTitleText": "UI组件库" } <view class="page"> <view class="page__hd"> <view class="page__title">SearchBar</view> <view class="page__desc">搜索栏</view> </view> <view class="page__bd"> <mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar> </view> </view> Page({ data: { inputShowed: false, inputVal: "" }, onLoad() { this.setData({ search: this.search.bind(this) }) }, search: function (value) { return new Promise((resolve, reject) => { setTimeout(() => { resolve([{text: '搜索结果', value: 1}, {text: '搜索结果2', value: 2}]) }, 200) }) }, selectResult: function (e) { console.log('select result', e.detail) }, }); 属性列表 属性 类型 默认值 必填 说明 ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式 focus boolean false 否 是否在组件开始创建的时候focus搜索输入框 placeholder string 搜索 否 搜索输入框的placeholder value string 否 搜索输入框的默认值 search function 是 输入过程不断调用此函数得到新的搜索结果，参数是输入框的值value，返回Promise实例 throttle number 500 否 调用search函数的间隔，单位ms cancelText string 取消 否 取消按钮的文本 cancel boolean true 否 是否显示取消按钮...

Navigation Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。 示例代码： { "usingComponents": { "mp-navigation-bar": "../components/navigation-bar/navigation-bar" }, "navigationStyle": "custom", "navigationBarTitleText": "UI组件库" } <mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="UI组件库" back="{{true}}"></mp-navigation-bar> <view class="page"> <view class="page__hd"> <view class="page__title">Navigation</view> <view class="page__desc">小程序自定义导航栏</view> </view> <view class="page__bd page__bd_spacing"> <button class="weui-btn" type="primary" bindtap="toggleLoading">触发loading</button> <button class="weui-btn" type="primary" bindtap="changeColor">修改文字颜色</button> <button class="weui-btn" type="primary" bindtap="changeBgColor">修改背景颜色</button> <button class="weui-btn" type="primary" bindtap="toggleShow">显示 / 隐藏</button> <button class="weui-btn" type="primary" bindtap="toggleAnimated">设置显示 / 隐藏opacity动画</button> </view> </view> Page({ data: { loading: false, color: '#000', background: '#f8f8f8', show: true, animated: false }, toggleLoading() { this.setData({ loading: !this.data.loading }) }, changeColor() { this.setData({ color: '#07C160' }) }, changeBgColor() { this.setData({ background: '#ededed' }) }, toggleShow() { this.setData({ show: !this.data.show }) }, toggleAnimated() { this.setData({ animated: !this.data.animated, show: !this.data.show }) } }) 属性列表 属性 类型 默认值 必填 说明 ext-class string...

ActionSheet 底部弹起的操作按钮组件 代码引入 在 page.json 中引入组件 { "usingComponents": { "mp-actionSheet": "../../components/actionsheet/actionsheet" } } 示例代码 <!--WXML示例代码--> <mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{groups}}" title="这是一个标题，可以为一行或者两行。"> </mp-actionSheet> Page({ data: { showActionsheet: false, groups: [ { text: '示例菜单', value: 1 }, { text: '示例菜单', value: 2 }, { text: '负向菜单', type: 'warn', value: 3 } ] }, close: function () { this.setData({ showActionsheet: false }) }, btnClick(e) { console.log(e) this.close() } }) 效果展示 属性列表 属性 类型 默认值 必填 说明 title string 否 标题 show-cancel boolean true 否 是否显示取消按钮 cancel-text string 否 取消按钮的文本 mask-class string 否 背景蒙层的class ext-class string 否 ActionSheet额外的class mask-closable boolean true 否 点击背景蒙层是否可以关闭ActionSheet mask boolean true 否 是否显示背景蒙层 show boolean false 否 是否显示ActionSheet actions Array false 是 ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式 bindclose eventhandler 否 点击背后的mask关闭掉ActionSheet触发的事件 bindactiontap eventhandler 否...

Half Screen Dialog 半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时。 代码引入 在 page.json 中引入组件 { "usingComponents": { "mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog" } } 示例代码 <!--WXML示例代码--> <mp-halfScreenDialog bindbuttontap="buttontap" show="{{show}}" maskClosable="{{false}}" title="测试标题B" subTitle="测试标题B的副标题" desc="辅助描述内容，可根据实际需要安排" tips="辅助提示内容，可根据实际需要安排" buttons="{{buttons}}" ></mp-halfScreenDialog> <button class="weui-btn" type="primary" bindtap="open">Open</button> // page.js示例代码 Page({ data: { show: false, buttons: [ { type: 'default', className: '', text: '辅助操作', value: 0 }, { type: 'primary', className: '', text: '主操作', value: 1 } ] }, open: function () { this.setData({ show: true }) }, buttontap(e) { console.log(e.detail) } }); 效果展示 属性列表 属性 类型 默认值 说明 extClass string 组件类名 closabled boolean true 是否展示关闭按钮 title string 组件标题，可通过slot自定义 subTitle string 组件副标题，可通过slot自定义 desc string 辅助操作描述内容 tips string 辅助操作提示内容 maskClosable boolean true 点击遮罩是否关闭改组件 mask boolean true 是否需要遮罩层 show boolean true 是否开启弹窗 buttons array [] 辅助操作按钮列表 自定义事件 事件名称 说明...

Toptips Toptips顶部错误提示组件，常用于表单校验或提交请求到后台成功或失败的错误提示，如下图所示。 引入组件 在 page.json 中引入组件 { "usingComponents": { "mp-toptips": "../../components/toptips/toptips" } } 示例代码 <!--WXML示例代码--> <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips> // page.js示例代码 Page({ data: { error: '' }, onShow() { this.setData({ error: '这是一个错误提示' }) } }); 属性列表 属性 类型 默认值 必填 说明 ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式 type string 否 提示类型，可以为info、error、success，表示三种提示颜色 show boolean false 否 是否显示Toptips msg string 是 提示内容 delay number 2000 否 提示内容显示后隐藏的ms值 bindhide eventhandler 否 顶部提示隐藏的时候触发的事件

Dialog Dialog弹窗组件。 示例代码： { "usingComponents": { "mp-dialog": "../components/dialog/dialog" } } <view class="page"> <view class="page__hd"> <view class="page__title">Dialog</view> <view class="page__desc">对话框</view> </view> <view class="page__bd"> <view class="weui-btn-area"> <button class="weui-btn" type="default" bindtap="openConfirm">确认取消按钮</button> <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有确认按钮</button> </view> </view> <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"> <view>test content</view> </mp-dialog> <mp-dialog title="test1" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}"> <view>test content1</view> </mp-dialog> </view> Page({ data: { dialogShow: false, showOneButtonDialog: false, buttons: [{text: '取消'}, {text: '确定'}], oneButton: [{text: '确定'}], }, openConfirm: function () { this.setData({ dialogShow: true }) }, tapDialogButton(e) { this.setData({ dialogShow: false, showOneButtonDialog: false }) }, tapOneDialogButton(e) { this.setData({ showOneButtonDialog: true }) } }); 属性列表 属性 类型 默认值 必填 说明 ext-class string 否 添加在组件内部结构的class，可用于修改组件内部的样式 title string 否 弹窗的标题 buttons array<object> [] 否 底部的按钮组，建议最多提供两个按钮 mask boolean 是 是否显示蒙层 mask-closable boolean 是 点击蒙层是否可以关闭 show...