提示框:

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. ubuntu笔记1-vim安装报错

    ubuntu安装vim的时候,报错提示:vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2) 但是 2:7.3.429-2ubuntu2.1 正要被安装 说明既存的v ...

  2. 五种IO模型

    参考文档 https://www.jianshu.com/p/486b0965c296 概念说明 用户空间和内核空间        现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空 ...

  3. eclipse中自定义注释模板

    eclipse中自定义注释模板 2018年10月09日 10:51:27 lm_y 阅读数 857更多 分类专栏: java Java   编辑注释模板的方法:Window->Preferenc ...

  4. fiddler抓包详解

    image.png 前言 fiddler是一个很好的抓包工具,默认是抓http请求的,对于pc上的https请求,会提示网页不安全,这时候需要在浏览器上安装证书. 一.网页不安全 1.用fiddler ...

  5. (原)ffmpeg中filter开发过程遇到的坑<一>

    最近在使用ffmpeg开发了一些滤镜filter功能,中间出现一些问题,今天想把这部分的内容整理为笔记,方便以后遇到同样问题的时候,方便翻阅. author:lihaiping1603@aliyun. ...

  6. Webpack 4 SplitChunksPlugin配置方案(转)

    通常情况下我们的 WebApp 是有我们的自身代码和第三方库组成的,我们自身的代码是会常常变动的,而第三方库除非有较大的版本升级,不然是不会变的,所以第三方库和我们的代码需要分开打包,我们可以给第三方 ...

  7. H3C 开局设置

    简介: 系统菜单  即 [H3C] 模式 一:恢复出厂设置 这个没什么说的,必须Console连接. 连上以后,在启动时Ctrl+B,进入管理启动菜单,删除文件,删除配置文件然后重启即可. Ctrl+ ...

  8. 🐯 php项目中类的自动加载

    主要函数:spl_autoload_register() — 注册给定的函数作为 __autoload() 的实现 将函数注册到SPL __autoload函数队列中.如果该队列中的函数尚未激活,则激 ...

  9. csu 1976: 搬运工小明

    1976: 搬运工小明 Submit Page   Summary   Time Limit: 2 Sec     Memory Limit: 128 Mb     Submitted: 94     ...

  10. proc 下创建与应用交互的可读写节点

    内核版本:Linux-4.14 随便写了个 proc 下节点的测试程序,可以用来与应用层交互. 也可以单独的用来做调试打印使用,例如封装个 my_printk 将信息单独存在节点内,然后可以在应用层 ...