微信小程序如何实现消息提示框

微信小程序开发中toast也是重要的消息提示方式

提示框：

wxshowToast(OBJECT)

显示消息提示框

OBJECT参数说明：

示例代码：

12345

wxshowToast({ title:'成功', icon:'success', duration: 2000})

wxhideToast()

隐藏消息提示框

123456789

wxshowToast({ title:'加载中', icon:'loading', duration: 10000}) setTimeout(function(){ wxhideToast()},2000)

wxshowModal(OBJECT)

显示模态d窗

OBJECT参数说明：

示例代码：

123456789

wxshowModal({ title:'提示', content:'这是一个模态d窗', success:function(res) { if(resconfirm) { consolelog('用户点击确定') } }})

wxshowActionSheet(OBJECT)

显示 *** 作菜单

OBJECT参数说明：

success返回参数说明：

示例代码：

12345678

wxshowActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!rescancel) { consolelog(restapIndex) } }})

设置导航条

<view>提示：{{tip}}</view>

<button type="default" bindtap="showModal">点击我d出modal对话框</button>

<view>

<modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"

bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>

</view>

Page({

data:{

// text:"这是一个页面"

tip:'',

buttonDisabled:false,

modalHidden:true,

show:false

},

showModal:function(){

thissetData({

modalHidden:!thisdatamodalHidden

})

},

modalBindaconfirm:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

show:!thisdatashow,

tip:'您点击了确认按钮！',

buttonDisabled:!thisdatabuttonDisabled

})

},

modalBindcancel:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

tip:'您点击了取消按钮！'

})

}

})

wxsetNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

OBJECT参数说明：

示例代码：

123

wxsetNavigationBarTitle({ title:'当前页面'})

wxshowNavigationBarLoading()

在当前页面显示导航条加载动画。

wxhideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转：

wxnavigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wxnavigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

123

wxnavigateTo({ url:'testid=1'})

123456

//testjsPage({ onLoad:function(option){ consolelog(optionquery) }})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wxredirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

123

wxredirectTo({ url:'testid=1'})

wxnavigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明：

动画：

wxcreateAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画 *** 作

OBJECT参数说明：

123456

var animation = wxcreateAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画 *** 作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wxcreateAnimation() 一样的配置参数用于指定当前组动画的配置。

示例：

1

<viewanimation="{{animationData}}"style="background:red;height:100rpx;width:100rpx"></view>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

Page({ data: { animationData: {} }, onShow:function(){ varanimation = wxcreateAnimation({ duration: 1000, timingFunction:'ease', }) thisanimation = animation animationscale(2,2)rotate(45)step() thissetData({ animationData:animationexport() }) setTimeout(function() { animationtranslate(30)step() thissetData({ animationData:animationexport() }) }bind(this), 1000) }, rotateAndScale:function () { // 旋转同时放大 thisanimationrotate(45)scale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateThenScale:function () { // 先旋转后放大 thisanimationrotate(45)step() thisanimationscale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateAndScaleThenTranslate:function () { // 先旋转同时放大，然后平移 thisanimationrotate(45)scale(2, 2)step() thisanimationtranslate(100, 100)step({ duration: 1000 }) thissetData({ animationData:thisanimationexport() }) }})

wxhideKeyboard()

收起键盘。

当页面个数超过五层时，应该用redirectTo来替换navigateTo，就可以避免Maximum call stack size exceeded的异常，但是redirectTo关闭当前页面的做法，有些场景并不适用，比如，从列表页进详情页面，如果进入详情页面时，关闭列表页面，再次back时，就没办法回到列表页面。

通过redirectTo跳转后，只是无法返回跳转前的页面，但并不是无法调用navigateBack，而是调用之后，会回到使用redirectTo跳转前的上一个页面。

页面栈可以通过getCurrentPages方法获取：

getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

（1）使用本地缓存

（2）通过页面路由

在使用url进行参数传递时候，传递数据有字节限制，如果要传递对象，需要先把对象通过JSONstringify转换成字符串，接收或再通过JSONparse转换成对象

demo

<template is="模板名" data="数据对象" />

A页面跳转到B页面

页面传值

微信小程序 页面传值详解

一 跨页面传值

1 用 navigator标签传值或 wxnavigator, 比如

这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受

如果需要传多个参数, 用 & 链接即可

如果要传 数组, 字典等复杂类型, 要先用 JSONstringify() 转成字符串传递

注 : 如果转化的字符串中 有""这个符号, 则只会传递""以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个""敏感吧

好, 这是第一种 依靠跳转的url带参数传值

2 用getCurrentPages(); 获取栈中全部页面的, 然后把数据写入相应页面

这里可以传字符串, 也能传数组等,

这样就把 address 传递并接受了

注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 onshow() 方法中接受, 因为再次返回只执行onshow()方法

3 写入本地, 跨页面在取出来 wxsetStorage/wxgetStorage等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了

4 把 数据声明为全局变量

var detail = getApp()detail; 可在任何页面获取

二 页内传值

1 设置id的方法标识跳转后传递后的参数

在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, var id = ecurrentTargetid;

2 设置 data-xxx 的方法来标识要传递的值

注 : 这里 data-index="{{index}}" 里的 {{index}} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标 在bindtap定义的点击方法 swiperTap : function(e) ; 中获取, 即 var index = ecurrentTargetdatasetindex; 其他的参数取出也如此, var type = ecurrentTargetdatasettype;

3 form表单和input输入框

方法1：A页面跳转链接添加参数，B页面onLoad 接收

方法2：设置全局变量 globalData，用的少，一般适用于全局共享的一份信息，如用户open_id等

以上就是关于微信小程序如何实现消息提示框全部的内容，包括:微信小程序如何实现消息提示框、如何跳出小程序五级页面的限制、小程序页面传递数据 、传递数组对象 小程序传值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！