赞
踩
异步API:通常接受一个object类型参数 例如 wx:request({})
同步API:约定以Sync结尾 例如 wx:setStorageSync()
事件监听API:约定以on开头 例如 wx:onAppHide()
支持callback 或者 Promise 两种调用方式
1.当接口参数 Object 对象中不包含 success/fail/complete 时默认返回Promise
2.部分接口 如request , uploadFile 本身就有返回值,因此不支持Promise风格的调用方式,他们
的promisify 需要开发者自行封装
小程序提供了一些用于界面交互的 API,例如: loading 提示框、消息提示框、模态对话框等 API
- wx.showLoading({
- //显示提示的内容,提示内容不易过长,不会自动换行,多出来的部分会自动隐藏
- title:'',
- // 是否展示透明蒙层,放置触摸穿透(true,展示蒙层,不会点击再次触发)
- mask:'true',
-
- })
2.wx.hideLoading() 关闭 loading 提示框
可写在complete回调函数里
注:两者必须配对使用
1. wx.showModal() :模态对话框,常用于询问用户是否执行一些操作
例如:询问用户是否退出登录、是否删除该商品
2. wx.showToast() :消息提示框,根据用户的某些操作来告知操作的结果
例如:退出成功给用户提示,提示删除成功等
- // 点击删除
- async handleDel () {
- // showModel 显示模态对话框
- const {confirm} = await wx.showModel({
- title:'提示',
- content:'是否删除该商品',
- })
-
- if(confirm) {
- // showToast 消息提示框
- wx.showToast({
- title:'删除成功'
- icon:'none',
- duration:2000
- })
-
- }else {
- wx.showToast({
- title:'取消删除'
- icon:'error',
- duration:2000
- })
- }
-
- }

同步
存储:wx.setStorageSync()
获取:wx.getStorageSync()
存储:wx.setStorage()
获取:wx.getStorage()
- page({
- // 存储
- // 如果存储的是对象类型数据,不需要使用JSON.stringify 和 JSON.parse 进行转化
- setStorage () {
- wx.setStorageSync('本地存储中指定key','需要存储的数据value') // 同步
-
- wx.setStorage({key:'num',data:1}) // 异步
- wx.setStorage({key:'obj',data:{name:'jerry',age:18}) // 异步
- }
- // 获取
- getStorage () {
- const key = wx.getStorageSync('key') //同步
- console.log(key)
-
- const key = wx.getStorage({key:'num'}) // 异步
-
- }
- // 删除
- removeStorage () {
- // 从本地移除指定的key的数据和内容
- wx.removeStorageSync('key') //同步
-
- wx.removeStorage({key:'num'}) // 异步
- }
- // 清空
- clearStorage () {
- wx.clearStorageSync() //同步
-
- wx.removeStorage() // 异步
- }
- })

绑定属性open-type
navigate:保留当前页面,跳转到某个页面,但不能跳转到tabbar页面
redirect:关闭当前页面,跳转到某个页面,但不能跳转到tabbar页面
switchTab:跳转到tabbar页面。并关闭其他所有的非tabbar页面
reLaunch:关闭所有页面,跳转到某个页面
navigateBack:关闭当前页面,返回上一页面或多级页面
注:url 后可参数,参数与路径之间用?隔开,参数键与参数值用=相连,不同参数,用&分割
wx.navigateTo ({}):保留当前页面,跳转到某个页面,但不能跳转到tabbar页面
wx.redirectTo ({}):关闭当前页面,跳转到某个页面,但不能跳转到tabbar页面
wx.switchTab({}):跳转到tabbar页面。路径后不能带参数
wx.reLaunch({}):关闭所有页面,跳转到某个页面
wx.navigateBack({}):关闭当前页面,返回上一页面或多级页面
注:url 后参数与路径之间用?隔开,参数键与参数值用=相连,不同参数,用&分割
上拉加载是小程序中常见的一种加载方式,当用户滑动页面到底部时,会自动加载更多的内容,以便用户继续浏览
小程序中实现上拉加载的方式
1. 在app.json 或者 page.json 在配置距离页面底部距离:onReachBottomDistance;默认 50px
2.在页面js中定义onReachBottom事件监听用户上拉加载
- .json 文件
-
- {
- "usingComponents": {},
- "onReachBottomDistance":50
- }
- .js 文件
- Page({
- // 监听用户加载
- onReachBottom(){
- // 上拉加载后具体操作
- ......
- }
- })
下拉刷新是小程序中常见的一种刷新方式,当用户下拉页面时,页面也会自动刷新,以便用户获取最新的内容
小程序中实现上拉加载更多的方式:
1.在app.json或者page.json中开启允许下拉,同时可以配置窗口、loading样式等
2.在页面.js中定义onPullDownRefresh事件监听用户下拉刷新
- .json 文件
-
- {
- "usingComponents": {},
- "onReachBottomDistance":50,
- // 设置同意下拉刷新
- "enablePullDownfresh":true
- }
- .js 文件
- Page({
- // 监听用户下拉刷新
- onPullDownRefresh(){
- // 下拉刷新后具体操作
- ......
-
- // 在下拉刷新后 loading效果可能弹不回去
- if(条件判断){
- wx.stopPullDownRefresh()
- }
- }
- })

- .wxml 页面
-
- <scroll-view
- scroll-y
- class="scroll-y"
- lower-threshold="100" // 上拉触发事件的条件
- bindscrolltolower="getMore" // 上拉触发绑定的监听事件
- enable-back-to-top // 回到顶部
- refresher-enabled // 开启下拉刷新
- refresher-default-style="black" // 刷新高亮点颜色
- bindrefresherrefresh="handleRefresh" // 绑定下拉刷新的监听事件
- refresher-triggered="{{isTriggered}}" // 刷新状态 是否允许弹回去 false是允许
- >
- <view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
- </scroll-view>
-
- .js 文件
-
- Page({
- data: {
- numList:[1,2,3],
- isTriggered:false
- },
- // 上拉触发事件
- getMore(){
- // 开启数据加载
- wx.showLoading({
- title: '数据加载中...',
- })
- setTimeout(()=>{
- // 获取数组的最后一项
- const lastNum = this.data.numList[this.data.numList.length - 1]
- // 定义需要追加的元素
- const newArr = [lastNum + 1,lastNum + 2 ,lastNum + 3]
- this.setData({
- numList:[...this.data.numList,...newArr]
- })
- wx.hideLoading()
- },1000)
- },
- // 下拉刷新
- handleRefresh(){
- wx.showToast({
- title: '下拉刷新...',
- })
- this.setData({
- numList:[1,2,3],
- isTriggered:false
- })
-
- }
- })
-
-

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。