提示框:

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. module 'torch' has no attribute 'gesv'

    新版torch不支持gesv,使用solve函数. Kt, _ = torch.gesv(P.mm(H.t()).t(), S) 改成 Kt, _ = torch.solve(P.mm(H.t()). ...

  2. HGNC数据库 HUGO基因命名委员会

    http://www.genenames.org/ HGNC 全称为HUGO Gene Nomenclature Committee, 叫做 HUGO基因命名委员会,负责对人类基因组上包括蛋白编码基因 ...

  3. js逆向分析之acorn和escodegen的使用

    替换之前的d形如 d("77696669") 执行代码 const fs = require('fs'); const acorn = require('acorn'); cons ...

  4. 划水嘶吼misc

    划水嘶吼misc [题目描述]: 开局一张图,flag全靠编 [题目writeup]: 瞅半天,瞅到二维码 然后用potplayer按帧查找到skr二维码 通过PS自动调整对比度,扫出key1,2,3 ...

  5. nginx 日志打印响应时间 request_time 和 upstream_response_time

    设置log_format,添加request_time,$upstream_response_time,位置随意 og_format  main  '"$request_time" ...

  6. spring mvc中添加对Thymeleaf的支持

    一.下载Thymeleaf 官方下载地址:https://dl.bintray.com/thymeleaf/downloads/thymeleaf/ 我下载的是最新的3.0.11版本 把包里的jar包 ...

  7. 解决Linux系统下面javamelody图片中文乱码问题

    从windows系统中,copy了C:\Windows\Fonts\msyh.ttc和msyhbd.ttc 2个文件到 服务器的%JAVA_HOME%\jre\lib\fonts\fallback 目 ...

  8. 图片验证码识别:ModuleNotFoundError: No module named 'ShowapiRequest'

    请求示例 # python3.6.5 # 需要引入requests包 :运行终端->进入python/Scripts ->输入:pip install requests from Show ...

  9. fragment原来的页面切换被重新实例化,无法继续保持上一次的内容。只让它执行一次

    最好的方法是: 定义类.静态变量的方式 保存数据,从这里取. 用网上其他人的方法,fragment切换速度太快会报错 child view 没有从parent view 中移除: 只执行一次,定义一个 ...

  10. Android Studio Error:Execution failed for task ':app:compileDebugJavaWithJavac' 根本解决方法

    造成这种异常的原因有很多.具体的还是要去终端编译,查看到底是什么地方出错了,然后具体问题具体分析. 终端进入项目的根目录,然后输入命令 gradlew compileDebugJavaWithJava ...