### 提示框:
## wx.showToast(OBJECT)
### 显示消息提示框
OBJECT参数说明:
![](https://box.kancloud.cn/d4b812b7f046ddaadb175019660cfafd_782x379.png)
### 示例代码:
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
## wx.hideToast()
### 隐藏消息提示框
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000
})
setTimeout(function(){
wx.hideToast()
},2000)
![](https://box.kancloud.cn/8299c6855f94000fa4655abec916f1c0_389x528.png)
## wx.hideLoading()
隐藏loading提示框
wx.showLoading({
title: '加载中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
## wx.showModal(OBJECT)
### 显示模态弹窗
![](https://box.kancloud.cn/a00876cd02ba9bf395872c90fcf83831_884x625.png)
### 示例代码:
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
![](https://box.kancloud.cn/a1fbb91920271b402e4bf8d7cd39e614_397x506.png)
## wx.showActionSheet(OBJECT)
### 显示操作菜单
OBJECT参数说明:
![](https://box.kancloud.cn/89167d98e4848694f7240257a0d5c31c_789x335.png)
success返回参数说明:
![](https://box.kancloud.cn/dd42965a7601c941e6580f46d063e350_677x146.png)
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
})
![](https://box.kancloud.cn/d7e539fe5c2c6fc456a0540d20bdeed6_352x520.png)
### 设置导航条
## wx.setNavigationBarTitle(OBJECT)
### 动态设置当前页面的标题。
OBJECT参数说明:
![](https://box.kancloud.cn/6ac2d24464452afa24c8bb61af82c31b_769x269.png)
### 示例代码:
wx.setNavigationBarTitle({
title: '当前页面'
})
## showNavigationBarLoading()
### 在当前页面显示导航条加载动画。
## hideNavigationBarLoading()
### 隐藏导航条加载动画。
页面跳转:
## wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
OBJECT参数说明:
![](https://box.kancloud.cn/228cd4dd6479ab49915346ac6a31b692_898x297.png)
### 示例代码:
wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
>[warning]注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
## wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明:
![](https://box.kancloud.cn/511bbbe955d3e3a63d84df395a3cff76_770x270.png)
### 示例代码:
wx.redirectTo({
url: 'test?id=1'
})
## wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:
![](https://box.kancloud.cn/2321f8420fd701531669f38023de8fc2_767x89.png)
## wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
>[warning]注意: export 方法每次调用后会清掉之前的动画操作
OBJECT参数说明:
![](https://box.kancloud.cn/b17340b9d73876e14a96396e601a9287_908x277.png)
var animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
## animation
动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。
### 样式:
![](https://box.kancloud.cn/c7cafc02de0f8986ba81611c0eaae56d_821x505.png)
### 旋转:
![](https://box.kancloud.cn/4bffeb25940aab7a232555c7f73188ec_713x331.png)
### 缩放:
![](https://box.kancloud.cn/0bae7e6fec724ff830ac5c99bc99bd8c_893x342.png)
### 偏移:
![](https://box.kancloud.cn/616a6e568d1b8e0351df51c0b8d7ad60_890x322.png)
### 倾斜:
![](https://box.kancloud.cn/355b3963c8e70d5f5cbf050eb71c2691_945x217.png)
### 矩阵变形:
![](https://box.kancloud.cn/d815095e0d03a84b5ab122b7ed0cbebd_783x163.png)
## 动画队列
调用动画操作方法后要调用 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()
停止当前页面下拉刷新。
## 指定model
![](https://box.kancloud.cn/a4ea8ca3e2aef35907eeca0f3d7878c0_741x522.png)
指定哪个modal,可以通过hidden属性来进行选择。
<!--show.wxml-->
<view class="container" class="zn-uploadimg">
<button type="primary"bindtap="modalinput">modal有输入框</button>
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
<input type='text'placeholder="请输入内容" auto-focus/>
</modal>
`show.js`
//获取应用实例
var app = getApp()
Page({
data:{
hiddenmodalput:true,
//可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
},
//点击按钮痰喘指定的hiddenmodalput弹出框
modalinput:function(){
this.setData({
hiddenmodalput: !this.data.hiddenmodalput
})
},
//取消按钮
cancel: function(){
this.setData({
hiddenmodalput: true
});
},
//确认
confirm: function(){
this.setData({
hiddenmodalput: true
})
}
})
![](https://box.kancloud.cn/354aea705f225e3c0cee12f590369965_364x511.png)
- 商城api接口
- 首页数据获取
- 分类接口
- 购物车接口
- 商品信息接口
- 搜索接口
- 订单列表接口
- 店铺接口
- 收藏接口
- 收货地址接口
- 生成订单接口
- 支付接口
- 会员中心接口
- 登录注册接口
- 关于我们
- 图片上传
- 分销中心
- 分销明细
- 代金券
- 平台红包列表
- 分销申请列表
- 我的推广
- 微信小程序
- 简介
- 开发前准备
- 目录结构介绍
- 发起请求
- 网络请求提交表单
- 代码及开发所遇到问题总结
- 导航跳转时所遇到的问题
- 缓存数据与数据取得的问题
- 如何引入外部css
- 如何定义与使用全局变量
- 如何定义新的界面
- 微信小程序支付
- 小程序的手机验证码登录
- 上传,下载
- 提示框
- app.json配置
- 配置demo
- pages
- window
- tabBar
- networkTimeout
- debug
- page.json
- 缓存
- 特效
- 滑动方式
- 城市切换
- 五星好评
- Switch
- 上拉加载
- wxml 标签
- 视图容器
- 基础内容
- 表单组件
- 导航
- 媒体组件
- 自定义提示框
- 小程序内访问网页
- 倒计时显示
- 微信小程序,如何在返回前一个页面时,执行前一个页面的方法
- 在本地可以请求到数据,但手机上是请求不到的
- curl请求失败
- 代码同步
- 短信平台更换