一、原生UI组件
1、文本组件 <text> </text> 行内组件
属性名 | 类型 | 默认值 | 说明 |
selectable | Boolean | false | 文本是否可选,除了text组件之外,其它组件都无法长按选中 |
space | String |
| 显示连续空格,可选值:ensp、中文字符空格一半大小emsp、中文字符空格大小 Nbsp 根据字体设置的空格大小 |
decode | Boolean | false | 是否解码,可解析 < > & ' |
2、视图容器组件 <view> </view> 块级组件
属性名 | 类型 | 默认值 | 说明 |
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
3、按钮组件 <button> </button> 默认独占一行,设置size=mini可以一行多个 (有扩展)
属性名 | 类型 | 默认值 | 说明 |
size | String | default | 按钮的大小 可选值:mini 小尺寸 |
type | String | default | 按钮的样式类型 primary 绿色 default 白色 warn 红色 |
plain | Boolean | false | 按钮是否镂空,背景色透明 |
disabled | Boolean | false | 是否禁用 |
loading | Boolean | false | 名称前是否带 loading 图标 |
open-type | string | 否 | 微信开放能力 |
open-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 | 1.1.0 |
share | 触发用户转发,使用前建议先阅读使用指引 | 1.2.0 |
getPhoneNumber | 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明 | 1.2.0 |
getUserInfo | 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 | 1.3.0 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明 | 1.9.5 |
openSetting | 打开授权设置页 | 2.0.7 |
feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 | 2.1.0 |
4:input输入框 <input> </input> 默认无边框 (有扩展)
属性名 | 类型 | 默认值 | 说明 |
value | String |
| 输入框的初始内容 |
type | String | "text" | number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 |
password | Boolean | false | 是否是密码类型 |
placeholder | String |
| 输入框为空时占位符 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 最大输入长度,设置为 -1 时不限制最大长度 |
5、image 图片 <image> </image> 组件默认宽度300px、高度225px(只要有该组件就有宽高)(有扩展)
src :支持本地/和网络上的图片
mode :指定图片裁剪、缩放的模式
src | string |
| 否 | 支持本地/和网络上的图片
|
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 |
lazy-load | boolean | false | 否 | 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 |
show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 |
Mode可选值
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 |
6、 可滚动视图区域 <scroll-view > </scroll-view >
使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
scroll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时,触发 scrolltoupper 事件 | 1.0.0 |
lower-threshold | number/string | 50 | 否 | 距底部/右边多远时,触发 scrolltolower 事件 | 1.0.0 |
scroll-top | number/string | 否 | 设置竖向滚动条位置 | 1.0.0 | |
scroll-left | number/string | 否 | 设置横向滚动条位置 | 1.0.0 | |
scroll-into-view | string | 否 | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | 1.0.0 | |
scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | 1.0.0 |
enable-back-to-top | boolean | false | 否 | iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 | 1.0.0 |
enable-flex | boolean | false | 否 | 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。 | 2.7.3 |
bindscrolltoupper | eventhandle | 否 | 滚动到顶部/左边时触发 | 1.0.0 | |
bindscrolltolower | eventhandle | 否 | 滚动到底部/右边时触发 | 1.0.0 | |
bindscroll | eventhandle | 否 | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | 1 |
Bug & Tip
tip
: 基础库 2.4.0以下不支持嵌套textarea
、map
、canvas
、video
组件tip
:scroll-into-view
的优先级高于scroll-top
tip
: 在滚动scroll-view
时会阻止页面回弹,所以在scroll-view
中滚动,是无法触发onPullDownRefresh
tip
: 若要使用下拉刷新,请使用页面的滚动,而不是scroll-view
,这样也能通过点击顶部状态栏回到页面顶部
7、滑块视图容器 <swiper> </swiper> 其中只可放置swiper-item组件,否则会导致未定义的行为。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
previous-margin | string | "0px" | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | string | "0px" | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 | 1.9.0 |
easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 | |
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} | 2.4.3 | |
bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 | 1.9.0 |
easing-function 的合法值
值 | 说明 | 最低版本 |
---|---|---|
default | 默认缓动函数 | |
linear | 线性动画 | |
easeInCubic | 缓入动画 | |
easeOutCubic | 缓出动画 | |
easeInOutCubic | 缓入缓出动画 |
change
事件 source
返回值
从 1.4.0 开始,change
事件增加 source
字段,表示导致变更的原因,可能值如下:
autoplay
自动播放导致swiper变化;touch
用户划动引起swiper变化;- 其它原因将用空字符串表示。
Bug & Tip
tip
: 如果在bindchange
的事件回调函数中使用setData
改变current
值,则有可能导致setData
被不停地调用,因而通常情况下请在改变current
值前检测source
字段来判断是否是由于用户触摸引起。
<swiper-item> </swiper-item> 仅可放置在swiper组件中,宽高自动设置为100%。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
item-id | string | 否 | 该 swiper-item 的标识符 | 1.9.0 |
二、wsxx样式表 (id class :before nth:child 属性选择器都支持)
1、支持绝大多数css选择器
2、自定义属性需要 data-* ,才可以被属性选择器选中
3、一个手机屏幕被分为750rpx,在iPhone6约等于 1px = 2rpx
4、@import “wxss外联样式的相对路径”; 支持导入外联样式表
5、app.wxss中样式是全局样式,会作用每一个页面。Page下面的wxss是局部样式表,只作用当前页面,当权重相对时,局部 样式优先
三、数据绑定与事件绑定
简单的页面可以使用 Page() 构造器进行注册
- 数据定义在data对象,页面使用直接用{{text }} ( 属性还是内容都用花括号,支持三元表达式和简单的运算 )
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}})
2、bindtap 触摸事件 (阻止事件冒泡 catchtap )
<view bindtap=”ontap” > </view>
不支持后面跟小括号传参。事件函数定义在js文件与data平级,第一个形参就是事件对象
3、bindinput 输入框输入事件
通过事件对象 e.detail.value 拿到输入框最新的值
4、文本框与data数据的同步(小程序没有v-model)
① bindinput监听文本框,e.detail.value获取最新值来赋值
②调用函数this.setData({info: e.detail.value })修改data中的数据
5、事件传参 data-*
①在组件中通过自定义属性传参 data-info=”123”
②在事件函数中,通过 e.target.dataset.参数名 获取到参数值
四、条件渲染
1、wx:if=” “ wx:elif=” “ wx:else
2、 <block> </block> 一次需要判断多个标签,可以用block标签包裹,只起包括作用,不会渲染到页面中。只接收控制属性
3、hidden=“ ” 条件为true时隐藏。相当于dispalay=none
五、列表渲染
1、wx:for={{数组名}} 直接通过{{index}} {{item}}就可以获取到索引和值
①wx:key=”index” 用索引做key值
②wx:for-item=”v” wx:for-index=”i” 手动指定每项名和索引名
③ *this代表每一项本身 wx:key=”*this” 每一项需要是唯一的字符串或数字
六、wxs(weixin script) 小程序脚本语言(不支持es5\6高级语法)官方文档
①wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行
②wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致
③wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API
④wxs 函数不能作为组件的事件回调。在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍
⑤wxs 遵循了 CommonJS 规范,module.exports暴露变量或函数,require(“../”)引用其他模块
⑥每个 wxs 都是独立的模块,每个模块均有一个内置的 module 对象,每个模块都有自己独立的作用域。
⑦只能引用 .wxs 文件模块,且必须使用相对路径
⑧wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象
⑨如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
内嵌wxml写法: <wxs module=”foo” > </wxs> <view>{{foo.info}} </view>
必须提供一个 module 属性,用来指定当前 <wxs></wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。
外联写法 <wxs src=”./**.wxs” module=”foo” /> <view>{{foo.info}} </view>
七、页面事件
1、下拉刷新(两种方式)
①在app.json的window节点或者页面配置文件开启enablePullDownRefresh:true
②wx.startPullDownRefresh() 调用函数触发
设置下拉刷新样式在 app.json 的 window 选项中或页面配置
backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16进制颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light
监听下拉刷新事件(哪个刷新方式都触发)
onPullDownRefresh(){
wx.stopPullDownRefresh() 停止下拉刷新
}
2、上拉加载更多
在 app.json 的 window 选项中或页面配置中设置触底距离
onReachBottomDistance:100 默认触底距离为 50px
监听页面的上拉触底事件
onReachBottom() { } 当页面距离不足触底距离就触发事件
3、监听页面滚动事件
onPageScroll(Object) {
Object.scrollTop 滚动的距离px }
4、监听用户转发事件
onShareAppMessage(Object){ }
(<button> 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容
参数 | 类型 | 说明 |
from | String | 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 |
target | Object | 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined |
webViewUrl | String | 页面中包含<web-view>组件时,返回当前<web-view>的url |
自定义转发内容 需要 return {title:l }
字段 | 说明 | 默认值 |
title | 转发标题 | 当前小程序名称 |
path | 转发路径 | 当前页面 path ,必须是以 / 开头的完整路径 |
imageUrl | 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。 | 使用默认截图 |
5、监听点击tabBar事件 onTabItemTap(Object) { }
参数 | 类型 | 说明 |
index | String | 被点击 tabItem 的序号,从0开始 |
pagePath | String | 被点击 tabItem 的页面路径 |
text | String | 被点击 tabItem 的按钮文字 |
onTabItemTap(Object) {
console.log(Object.index) }
八、页面导航
1、声明式导航
①导航到非tabBar页面(路径必须以 / 开头)
<navigator url='/pages/info/info'>去info页面</navigator>
②导航到tabBar页面
<navigator url='/pages/home/home' open-type='switchTab'> tabBar </navigator>
③后退导航
<navigator open-type='navigateBack' delta='1'>后退 </navigator> //delta后退层数
2、编程式导航
①导航到非tabBar页面 wx.navigateTo({ url:’/page”})
属性 | 类型 | 是否必填 | 说明 |
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ?分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2' |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
②导航到tabBar页面 wx.switchTab({url:’ ‘})
属性 | 类型 | 是否必填 | 说明 |
url | string | 是 | 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
③后退导航 wx.navigateBack({delta:1})
属性 | 类型 | 是否必填 | 说明 |
delta | number | 是 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
3、导航传参 (导航到非tabBar页面,可以在url后面以?name=sl&age=12形式传参)
页面通过onload()生命周期函数的形参接收参数
九、网络请求 wx.request( )
wx.request({
url: 'https://test.php', //仅为示例,并非真实的接口地址
Method:’POST’, //默认GEI
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}})
十、组件
1、创建组件
①在项目的根目录中,鼠标右键,创建 components -> test 文件夹
②在新建的 components -> test 文件夹上,鼠标右键,点击“新建 Component”
③为新建的组件命名之后,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss
注意:尽量将不同的组件,存放到单独的文件夹中,从而保证清晰的目录结构
2、引用组件
①在需要引用组件的页面中,找到页面的 .json 配置文件,新增 usingComponents 节点
②在 usingComponents 中,通过键值对的形式,注册组件;键为注册的组件名称,值为组件的相对引用路径
③在页面的 .wxml 文件中,把注册的组件名称,以标签形式在页面上使用,即可把组件展示到页面上
注意:注册组件名称时,建议把名称注册为短横线连接的形式,例如 vant-button 或 custom-button
3、美化组件及注意事项
① 组件对应 wxss 文件的样式,只对组件 wxml 内的节点生效。编写组件样式时,需要注意以下几点:
②组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
③组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
④子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
⑤继承样式,如 font 、 color ,会从组件外继承到组件内。
⑥除继承样式外, app.wxss 中的样式、组件所在页面的样式对自定义组件无效。
4、组件定义数据(定义的页面函数不同,方法一样。组件事件处理函数必须定义在methods里)
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
5、properties的作用 (是组件的对外属性,用来接收外界传递到组件中的数据。类似vue的props)
①声明方式
Component({
properties: {
// 完整的定义方式
propA: { // 属性名
type: String, //属性类型可选值为 Number,String,Boolean,Object,Array,null(表示不限制类型) function
value: '' // 属性默认值
},
propB: String // 简化的定义方式
}
})
②为组件传递 properties 的值 可以使用数据绑定的形式,向子组件的属性传递动态数据
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
</component-tag-name>
</view>
组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。
注意:在定义 properties 时,属性名采用驼峰写法(propertyName);在 wxml 中,指定属性值时,则对应使用连字符写法(property-name=“attr value”),应用于数据绑定时,采用驼峰写法(attr="{{propertyName}}")
③在组件内修改 properties 的值
小程序中,properties 的值是可读可写的,它的用法与 data 几乎一致,因此可以通过 setData 修改 properties 中任何属性的值
properties: {
count: Number
},
methods: {
add: function() {
this.setData({ count: this.properties.count + 1 })
}
}
6、数据监听 (用于监听和响应任何属性和数据字段的变化,从而执行特定的操作)类似watch
①数据监听器从小程序基础库版本 2.6.1 开始支持
②一次监听多个用逗号隔开,任何一个变化都触发
Component({
observers: {
'字段A, 字段B': function(字段A的新值,字段B的新值) {
// do something
}
}
})
③监听子数据字段的变化(不管是对象数据变化,还是下面子数据变化都触发)
Component({
observers: {
'some.subfield': function (subfield) {
// 使用 setData 设置 this.data.some.subfield 时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
},
'arr[12]': function (arr12) {
// 使用 setData 设置 this.data.arr[12] 时触发
// (除此以外,使用 setData 设置 this.data.arr 也会触发)
}
},
'some.field.**': function (field) { //监听下面所有子属性 **
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// (除此以外,使用 setData 设置 this.data.some 也会触发)
field === this.data.some.field
}
})
7、组件的生命周期
生命周期 | 参数 | 描述 |
created | 无 | 在组件实例刚刚被创建时执行 |
attached | 无 | 在组件实例进入页面节点树时执行 |
ready | 无 | 在组件在视图层布局完成后执行 |
moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
detached | 无 | 在组件实例被从页面节点树移除时执行 |
error | Object Error | 每当组件方法抛出错误时执行 |
①定义组件生命周期函数的两种方式
Component({
lifetimes: { //推荐最新的方式
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
},
// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
// ...
})
②组件所在页面的生命周期
Component({
pageLifetimes: {
show() { // 组件所在的页面被展示
},
hide() { // 组件所在的页面被隐藏
},
resize(size) { // 组件所在的页面尺寸变化
}
}
})
8、组件插槽
①默认插槽
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
②多个插槽(具名插槽),需要在js中声明启用
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
9、组件之间的通信
①properties 数据绑定,实现父向子(页面向组件)传递数据(2.0.9基础库支持函数)仅能设置 JSON 兼容数据
②this.selectComponent 方法获取子组件实例对象(子向父)
<!-- wxml -->
<component-a class="customA" id= "cA" ></component-a>
<!--父组件的 .js 文件中,可以调用 selectComponent 函数并指定 id 或 class 选择器,获取子组件对象-->
Page({
onLoad(){
// 切记下面参数不能传递标签选择器(component-a),不然返回的是 null
var component = this.selectComponent('.customA'); // 也可以传递 id 选择器 #cA
console.log(component.data); //获取到子组件数据
}
})
③通过事件监听实现子向父传值
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件 的页面可以监听这些事件。
通过事件监听实现子组件向父组件传值的步骤:
⑴在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子 组件
⑵在父组件的 wxml 中,通过自定义事件的形式(bind:ma=” “),将步骤一中定义的函数引用,传递 给子组件
⑶在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ,将数据发送到父组件
⑷在父组件的 js 定义的函数中,通过 e.detail 获取到子组件传递过来的数据
十一、API
1、wx.previewImage(Object object) 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
urls | Array.<string> | 是 | 需要预览的图片链接列表。2.2.3 起支持云文件ID。 | |
current | string | urls 的第一张 | 否 | 当前显示图片的链接 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
2、wx.chooseAddress(Object object) 获取用户收货地址。
调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
属性 | 类型 | 说明 |
---|---|---|
userName | string | 收货人姓名 |
postalCode | string | 邮编 |
provinceName | string | 国标收货地址第一级地址 |
cityName | string | 国标收货地址第二级地址 |
countyName | string | 国标收货地址第三级地址 |
detailInfo | string | 详细收货地址信息 |
nationalCode | string | 收货地址国家码 |
telNumber | string | 收货人手机号码 |
errMsg | string | 错误信息 |
wx.chooseAddress({
success (res) {
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})
3、wx.showToast(Object object) 显示消息提示框
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
title | string | 是 | 提示的内容 | ||
icon | string | 'success' | 否 | 图标 | |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | 1.1.0 | |
duration | number | 1500 | 否 | 提示的延迟时间 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.icon 的合法值
值 | 说明 | 最低版本 |
---|---|---|
success | 显示成功图标,此时 title 文本最多显示 7 个汉字长度 | |
loading | 显示加载图标,此时 title 文本最多显示 7 个汉字长度 | |
none | 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 |
示例代码
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
注意
- wx.showLoading 和 wx.showToast 同时只能显示一个
- wx.showToast 应与 wx.hideToast 配对使用
- wx.showModal
十二、html标签转小程序插件wxparse
1、在页面json中引入插件,和引入组件一样
2、把html文本放在data属性中
<wxparse data="{{goodsinfo.goods_introduce}}"></wxparse>