提示框:

wx.showToast(OBJECT)

显示消息提示框

OBJECT参数说明:

示例代码:

wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})

wx.hideToast()

隐藏消息提示框

wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000
}) setTimeout(function(){
wx.hideToast()
},2000)

wx.showModal(OBJECT)

​显示模态弹窗

OBJECT参数说明:

示例代码:

wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})

wx.showActionSheet(OBJECT)

​显示操作菜单

OBJECT参数说明:

success返回参数说明:

示例代码:

wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
})

设置导航条

wx.setNavigationBarTitle(OBJECT)

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

OBJECT参数说明:

示例代码:

wx.setNavigationBarTitle({
title: '当前页面'
})

wx.showNavigationBarLoading()

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

wx.hideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转:

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

OBJECT参数说明:

示例代码:

wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})

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

wx.redirectTo(OBJECT)

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

OBJECT参数说明:

示例代码:

wx.redirectTo({
url: 'test?id=1'
})

wx.navigateBack(OBJECT)

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

OBJECT参数说明:

动画:

wx.createAnimation(OBJECT)

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

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

OBJECT参数说明:

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

animation

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

样式:

旋转:

缩放:

偏移:

倾斜:

矩阵变形:

动画队列

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

示例:

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({
data: {
animationData: {}
},
onShow: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
}) this.animation = animation animation.scale(2,2).rotate(45).step() this.setData({
animationData:animation.export()
}) setTimeout(function() {
animation.translate(30).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 1000)
},
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大,然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
})

wx.hideKeyboard()

收起键盘。

wx.stopPullDownRefresh()

停止当前页面下拉刷新。详见 页面相关事件处理函数。

微信小程序文档的更多相关文章

  1. 微信小程序文档解读(一)--api提供支持有哪些

    本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读 API官方文档原文链接 小程序API官方定义: 框架提供丰富的 ...

  2. 微信小程序文档里看不到的小Tips

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的 ...

  3. 微信小程序官方文档错误整理

    大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...

  4. 微信小程序内测申请

    想申请微信小程序的内测?别做梦了! 小程序内测是邀请制的,目前就发放了200个内测邀请.正因为稀缺,江湖传言内测资格已经炒到300万(一套房)一个了 但是!!!!你可以先熟悉一下相关资料和文档,下载一 ...

  5. 微信小程序(wx:for)遍历对象

    最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...

  6. 微信小程序与vueJs的异同

    简而言之,所有的框架都是建立在原生javascript基础之上的,所以对于有一定js基础的同学来说,各种框架都是比较容易入手的,但不同的框架之间又有一定的差别,有时候切换使用时就会掉入坑了. 一.微信 ...

  7. 微信小程序demo——入门级(附源码)

    最近小程序又蠢蠢欲动,出了一个公众号绑定小程序功能,目测不错,就看了下微信小程序文档,顺便写了几行代码,后续有空会持续更新维护. 源码:https://github.com/SibreiaDante/ ...

  8. anjular2以及微信小程序的一点比较

    1条件渲染: 小程序:用 wx:if="{{condition}}" 来判断是否需要渲染该代码块. <view wx:if="{{condition}}" ...

  9. 微信小程序登录对接Django后端实现JWT方式验证登录

    先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...

随机推荐

  1. 【POJ3414】Pots

    本题传送门 本题知识点:宽度优先搜素 + 字符串 题意很简单,如何把用两个杯子,装够到第三个杯子的水. 操作有六种,这样就可以当作是bfs的搜索方向了 // FILL(1) 把第一个杯子装满 // F ...

  2. html 选择本地图片,显示选择的图片

    主要用的是html5的文件系统部分: <html> <head> <meta name="viewport" content="width= ...

  3. OpenFOAM——前台阶

    本算例来自<ANSYS Fluid Dynamics Verification Manual>中的VMFL037:Turbulent Flow Over a Forward Facing ...

  4. RFC-6455 The WebSocket Protocol 浅读

    什么是WebSokcet? WebSocket是一种协议,并且是各大主流浏览器作为客户端支持的协议.它的目标就是用来替代基于 XMLHTTPRequest和长轮询的解决方案.应用在时时弹幕,消息推送, ...

  5. 深入SaltStack

    [译者注] 这是一篇发表在opencredo官网的博文,通过比较流行的Puppet和新发展起来的Salt,详细地介绍了Salt的功能.在征得原作者的同意后,翻译出来,与大家分享.初次翻译长文,请大家指 ...

  6. Python数据分析学习(一)

    转摘:https://segmentfault.com/a/1190000015440560 一.数据初探 首先导入要使用的科学计算包numpy,pandas,可视化matplotlib,seabor ...

  7. python confluent kafka客户端配置kerberos认证

    kafka的认证方式一般有如下3种: 1. SASL/GSSAPI  从版本0.9.0.0开始支持 2. SASL/PLAIN   从版本0.10.0.0开始支持 3. SASL/SCRAM-SHA- ...

  8. Python 下载依赖包环境经常失败超时解决方法

    人生苦短,我用python!为什么很多人喜欢用python,因为包多呀,各种调包.但是调包有的时候也调的闹心,因为安装包不是失败就是很慢,很影响自己的工作进度,这里给出一个pip快速安装工具包的办法, ...

  9. Spring Web Flux 相关概念

    Reactive Streams.Reactor 和 Web Flux 上面介绍了反应式编程的一些概念,以及 Reactor 和 Web Flux.可能读者看到这里有些乱.这里介绍一下三者的关系.其实 ...

  10. IfcColumn

    IfcColumn is a vertical structural member which often is aligned with a structural grid intersection ...