美文网首页
小程序原生API-界面API

小程序原生API-界面API

作者: Arthur澪 | 来源:发表于2018-02-06 11:17 被阅读0次

框架提供了丰富的微信原生API,可以方便的调起微信提供的能力。如获取用户信息,本地存储,支付功能等。

以wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接收接口调用结果。

界面API

1、显示提示框

wx.showToast({
  title: '操作成功',   /* 必填*/
  icon: 'success',    //可选 "success", "loading", "none",对应于不同图标
  image: './img/icon/xx.png',   // 自定义图标(优先级高于icon)传其本地路径
  duration: 2000,    // 持续时间(ms)
  mask: true,   // 是否显示透明蒙层
  success:      // 接口调用成功的 回调函数
  fail:
  complete:  
})

对于icon,若值为"success"或"loading",此时 title 文本最多显示 7 个汉字;若为‘none’,则不显示图标,此时 title 文本最多可显示两行。
隐藏提示框,调用wx.hideToast()

2、显示 loading 提示框

wx.showToast({
  title: '数据加载中...',    /* 必填*/
  mask: true,   // 是否显示透明蒙层
  success:      // 接口调用成功的 回调函数
  fail:
  complete:  
})

需主动调用 wx.hideLoading() 才能关闭提示框。

3、​显示模态弹窗

wx.showModal({
  title: '提示',    /* 必填*/
  content: '这是一个模态弹窗',    /* 必填*/
  showCancel: true,    // 是否 显示取消按钮
  cancelText: '取消',   // 取消按钮的文字,最多 4 个字符
  cancelColor: "#000000",   // 按钮颜色

  confirmText: '保存',   // 确定按钮的文字,最多 4 个字符(默认"确定")
  confirmColor:  "#000000",   
  success: function(res) {
    if (res.confirm) {
      //  用户点击确定

    } else if (res.cancel) {
      //  用户点击取消

    }
  }
  fail:
  complete:  
})

4、​上弹操作菜单

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],    // 必填, 按钮的文字数组,数组长度最大为6个
  itemColor: #000000   // 按钮的文字颜色
  success: function(res) {    // 接口调用成功的回调函数
    console.log(res.tapIndex)   // 用户点击的按钮,从上到下的顺序,从0开始
  },
  fail: function(res) {
    console.log(res.errMsg)
  }
  complete:
})

5、顶置信息提示

wx.setTopBarText({
  text: 'please wait...'
})

创建动画

var animation = wx.createAnimation({
  duration: 1000,     // 动画持续时间
  timingFunction: "ease",      // 效果类型
  delay: 0,      // 动画延迟时间
  transformOrigin: "50% 50%",     //设置transform-origin
})

timingFunction 有效值:
linear 动画从头到尾的速度是相同的
ease 动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-in-out 动画以低速开始和结束
ease-out 动画以低速结束
step-start 动画第一帧就跳至结束状态直到结束
step-end 动画一直保持开始状态,最后一帧跳到结束状态

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

animation 对象的方法列表:
1、样式:
opacity: 透明度,参数范围 0~1
backgroundColor:
width/height:
top/left/right/bottom:
2、旋转:范围-180~180
rotate:从原点顺时针旋转一个deg角度
rotateX/Y/Z:在X、Y、Z轴旋转一个deg角度
rotate3d:
3、缩放:
scale:若一个参数,表示在X、Y轴同时缩放的倍数
scaleX/Y:在X/Y轴缩放sx倍数
scale3d:(sx,sy,sz)-- 在各轴的缩放倍数
4、偏移:
translate:若一个参数,表示在X轴偏移(px);两个表示在X、Y轴的偏移
translateX:
translateY:
translateZ:
translate3d:
5、倾斜:
skew:-180~180;一个参数时,表示X轴坐标延顺时针倾斜ax度;两个时,分别在X、Y轴倾斜度
skewX:
skewY:
6、矩阵变形:
matrix:
matrix3d:

动画队列
调用动画操作方法后要调用 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.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

官方API文档

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

相关文章

  • 小程序原生API-界面API

    框架提供了丰富的微信原生API,可以方便的调起微信提供的能力。如获取用户信息,本地存储,支付功能等。 以wx.on...

  • vue3安装axios

    新建api文件夹api->axios.ts: api->index.ts: 使用

  • WebSocket心跳重连讲解

    最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流...

  • 小程序原生API收集--媒体API

    1、从相册选择图片,或使用相机拍照 2、预览图片 3、获取图片信息 4、保存图片到系统相册

  • 小程序原生API收集--网络API

    1、获取网络类型 2、监听网络状态变化 3、发送网络请求 4、取消请求任务 5、上传 6、下载下载文件资源到本地。...

  • 原生小程序和 mpvue对比(开发前)

    一.介绍 原生小程序:利用微信官方给出的框架,组件,API开发的小程序。 mpVue :利用Vue.js前端框架开...

  • 小程序标签展开收起功能实现

    先看效果 主要结构 我用的mpvue,如用原生标签直接转换成原生即可 思路 利用小程序api NodesRef.b...

  • douban movie 微信小程序模拟练习

    # 准备工作: - 查看微信小程序简易教程,了解小程序开发框架、组件以及丰富的微信原生API。 * 教程:本文档将...

  • 微信小程序之原生API(下)

    第65篇 极客时间《9小时搞定微信小程序开发》第五课:原生API。 小程序API最后一部分,课程中没有详细去讲,因...

  • 2017爱阅帮项目总结

    项目亮点优点大的: 通过私有库将网络模块、Api模块、Utils拆分,做到多项目公用(离散Api->Base处理-...

网友评论

      本文标题:小程序原生API-界面API

      本文链接:https://www.haomeiwen.com/subject/syliaxtx.html