小程序基础

最新推荐文章于 2024-07-07 17:02:21 发布

codeyun.top

最新推荐文章于 2024-07-07 17:02:21 发布

阅读量985

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_45416117/article/details/99255866

版权

小程序专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、原生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>

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>