微信小程序文档
提示框:
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()
停止当前页面下拉刷新。详见 页面相关事件处理函数。
微信小程序文档的更多相关文章
- 微信小程序文档解读(一)--api提供支持有哪些
本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读 API官方文档原文链接 小程序API官方定义: 框架提供丰富的 ...
- 微信小程序文档里看不到的小Tips
前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的 ...
- 微信小程序官方文档错误整理
大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...
- 微信小程序内测申请
想申请微信小程序的内测?别做梦了! 小程序内测是邀请制的,目前就发放了200个内测邀请.正因为稀缺,江湖传言内测资格已经炒到300万(一套房)一个了 但是!!!!你可以先熟悉一下相关资料和文档,下载一 ...
- 微信小程序(wx:for)遍历对象
最近在折腾微信小程序,遇到这么一个情况:后端返回一个key-value的对象数据,需要遍历对象的key-value,然后渲染到视图中.就像下面这样: { '2018-1-9':{ address: ' ...
- 微信小程序与vueJs的异同
简而言之,所有的框架都是建立在原生javascript基础之上的,所以对于有一定js基础的同学来说,各种框架都是比较容易入手的,但不同的框架之间又有一定的差别,有时候切换使用时就会掉入坑了. 一.微信 ...
- 微信小程序demo——入门级(附源码)
最近小程序又蠢蠢欲动,出了一个公众号绑定小程序功能,目测不错,就看了下微信小程序文档,顺便写了几行代码,后续有空会持续更新维护. 源码:https://github.com/SibreiaDante/ ...
- anjular2以及微信小程序的一点比较
1条件渲染: 小程序:用 wx:if="{{condition}}" 来判断是否需要渲染该代码块. <view wx:if="{{condition}}" ...
- 微信小程序登录对接Django后端实现JWT方式验证登录
先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...
随机推荐
- SpringCloud:Feign模块引用版本问题
1.问题报错 org.springframework.beans.factory.BeanDefinitionStoreException: Failed to process import cand ...
- Shell 逐行读取文件的4中方法
方法1:while循环中执行效率最高,最常用的方法. function while_read_LINE_bottm(){ While read LINE do echo $LINE done < ...
- 使用kubectl访问kubernetes集群
之前访问k8s都是通过token进去dashboard,如下所示.但是现在希望通过kubectl访问k8s,所以还需要进一步的配置. 1. 安装kubectl命令行工具,配置环境变量,环境变量的值指向 ...
- 五种IO模型
参考文档 https://www.jianshu.com/p/486b0965c296 概念说明 用户空间和内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空 ...
- bitcoinjs-lib 哈希交易之多笔交易合并。
转账的时候需要手动寻找每一笔未花费记录实在太费时. 比特币转账需要提取或合并所有未花费的交易中的比特币,才能实现交易. import * as bitcoin from 'bitcoinjs-lib' ...
- Python2.7 删除前N天日志文件
Python2.7 删除前N天日志文件 import os import sys import time day_n = 7 path=os.getcwd().replace("\\&quo ...
- H3C交换机恢复出厂设置
reset saved-configuration reboot 恢复出厂设置后查看当前配置: ..............................
- VUE-013-为elementUI 设置 tootip 宽度
在表格显示列表中,通常添加 :show-overflow-tooltip="true" 以显示不能完全展示的单元格文案提示.单通常显示为全屏宽度,不易查看,可通过设置全局的样式,进 ...
- WSL记录
cmder(mini版)作为wsl的终端,很好用,可以split屏.但是:千万不要在settings里面设置start up(启动) 里面设置 命令行“bash -cur_console:p1”!目前 ...
- xpath和contains模糊匹配
xpath可以以标签定位,也可以@任意属性: 如:以input标签定位:driver.find_element_by_xpath("//input[@id='kw']") 如:@t ...