微信小程序API

最新推荐文章于 2024-07-11 10:42:47 发布

*愿风载尘*

最新推荐文章于 2024-07-11 10:42:47 发布

阅读量835

点赞数 15

分类专栏：微信小程序快速入门文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_38980630/article/details/139308193

版权

微信小程序快速入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

微信小程序API

1.路由
2.网络
3.界面
4.数据缓存
5.开放接口

API就是微信提供的一些功能接口，可以在js文件中直接调用，实现特定功能。

1.路由

● wx.navigateTo：保留当前页面，跳转到应用内的某个页面，不能跳转到tabbar页面。
● wx.navigateBack：可以返回到原页面，小程序中页面栈最多十层。
● wx.switchTab：跳转到tabbar页面，关闭其他页面。
● wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

# api.wxml
<!-- 
  wx.navigateTo
    跳转页面的两种方式
      1.使用 navigator 组件
      2.使用 wx.navigateTo
 -->
<view>wx.navigateTo</view>
<navigator url="/pages/event/event?id=1001&name=lose">跳转到event</navigator>
<button type="primary" bindtap="goEvent">跳转到event</button>

<navigator url="/pages/index/index" open-type="switchTab">跳转到index</navigator>
<button type="primary" bindtap="goIndex">跳到index</button>

# api.js
Page({
  goEvent(){
    wx.navigateTo({
      url: '/pages/event/event?id=1002&name=leo'
    })
  },
  goIndex(){
    wx.switchTab({
      url: '/pages/index/index' // 路径后不能带参数
    })
  }
})

# event.js
Page({
  /**
   * 获取参数信息
   */
  onLoad:function(options){// 参数options中包含了跳转到当前页面时，所携带的参数信息
    console.log(options)
  }
})

2.网络

wx.request：发起 HTTPS网络请求，就是ajax请求，小程序为保证请求的安全性，要求所有被请求的地址都必须是在合法的域名列表中，由开发者自行配置，微信进行审核，请求地址必须是HTTPS协议（加密、安全）。
在开发环境下可以关闭合法校验（详情 -> 本地设置 -> 不校验合法域名…），该方式只有在微信开发者工具下有效，在生产环境或微信中预览无效。

<view class="title">wx.request</view>
<button type="primary" bindtap="sendAjax">发送Ajax请求</button>

// pages/api/api.js
Page({
  sendAjax(){
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items',
      method: "GET", // 请求方式必须大写
      data:{
        start:0,
        count:6
      },
      success: res => { // 响应对象
        // console.log(res)
        console.log(res.data)
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

3.界面

● wx.showToast：显示消息提示框
● wx.showModal：显示模态对话框
● wx.showLoading：显示loading提示框。需主动调用wx.hideLoading才能关闭提示框
● wx.hideToast：隐藏消息提示框
● wx.showActionSheet：显示操作菜单

<!-- 
  wx.showModel
 -->
<view class="title">wx.showModel</view>
<button type="primary" bindtap="doModel">模态框</button>

Page({
  sendAjax(){
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items',
      method: "GET", // 请求方式必须大写
      data:{
        start:0,
        count:6
      },
      success: res => { // 响应对象
        // console.log(res)
        console.log(res.data)
        wx.showToast({
          title: '请求成功', // 最多显示7个汉字
          icon: 'success', // 取值范围：success,loading,none,error
          image: '/images/成功.png',
          duration: 3000
        })
      },
      fail: err => {
        console.log(err)
        wx.showToast({
          title: '请求失败',
          icon: 'error',
          image: '/images/失败.png'
        })
      }
    })
  },
  doModel(){
    wx.showModal({
      title: '提示',
      content: '确定或取消？',
      // success: res => {
      //   console.log(res)
      // },
      success:function(res){
        console.log(res)
        if(res.confirm){
          console.log('点击了确定')
        }else{
          console.log('点击了取消')
        }
      },
      complete: (res) => {
        if (res.cancel) {
          
        }
    
        if (res.confirm) {
          
        }
      }
    })
  }
})

4.数据缓存

每个小程序都可以有自己的本地缓存。
● wx.setStorage(Object object)：将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
● wx.setStorageSync(string key, any data)： wx.setStorage的同步版本
● wx.getStorage(Object object)：从本地缓存中异步获取指定key内容。
● wx.getStorageSync(string key)：从本地缓存中同步获取指定 key 的内容。
● wx.removeStorage(Object object)：从指定缓存中移除指定key。
● wx.removeStorageSync(string key)：wx.removeStorage的同步版本
● wx.clearStorage(Object object)：清理本地数据缓存
● wx.clearStorageSync()：wx.clearStorage的同步版本

<!-- 
  数据缓存
 -->
<view class="title">数据缓存</view>
<button type="primary" bindtap="doStorage">操作缓存(异步)</button>
<button type="primary" bind:tap="doStorageSync">操作缓存(同步)</button>

Page({
  doStorage(){
    /**
     * 添加缓存数据，异步
     */
    wx.setStorage({
      key: 'user',
      data: {
        name:'rick',
        age:43,
        height:180
      }
    })
  },
  doStorageSync(){
    /**
     * 添加缓存数据，同步
     */
    wx.setStorageSync('user', {
      name:'rickSync',
      age:43,
      height:180
    })

    /**
     * 读取缓存数据，若要读取的数据不存在则返回空字符串string
     */
    var user = wx.getStorageSync('user');
    console.log(user);

    /**
     * 清除缓存数据
     */
    wx.removeStorageSync('user');
  }
})

5.开放接口

● wx.getUserInfo：获取用户信息
如果是获取小程序用户的相关信息，必须通过显示提示的方式获得用户的主动授权才行。
使用进行授权操作，只需一次授权，授权后可以直接获取用户信息，无需再授权。
获取用户信息一般在小程序初始化启动时获取。
● wx.getSetting：获取用户当前设置，返回值中只会出现小程序已经向用户请求过的权限。

注：

在官方公告中: 2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。
新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：

● wx.getUserProfile：获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo
● wx.authorize：提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。
● wx.login：调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

<!-- 
  开放接口
 -->
<view class="title">开放接口</view>
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button>
<button wx:if="{{ !userInfo }}" type="primary" bind:tap="getUserProfile">授权登录2</button>
<block wx:else>
  <image class="user-img" src="{{ userInfo.avatarUrl }}"></image>
  <view class="user-nickname">{{ userInfo.nickName }}</view>
</block>
<button type="primary" bind:tap="doAuthorize">发送授权请求</button>
<button type="primary" bind:tap="getOpenId">获取openID</button>

.user-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.user-nickname {
  color: #333;
  font-weight: bold;
}
button{
  margin-bottom: 10px;
}

getUserInfo(e){
    console.log(e);
  },
  getUserProfile(e){
    wx.getUserProfile({
      desc: '获取用户信息',
      success: (res) => {
        console.log('获取用户信息成功2',res);
        this.setData({
          userInfo:res.userInfo
        });
        // 将用户信息存储到全局数据中 
        app.userInfo = res.userInfo
      }
    })
  },
  doAuthorize(){
    // 先判断是否已经进行指定权限的授权
    wx.getSetting({
      success(res){
        if(res.authSetting['scope.address']){
          // 如果已授权则直接进行操作
          wx.chooseAddress({
            success(res){
              console.log(res)
            }
          })
        }else{
          // 如果未授权，则发起授权请求
          wx.authorize({
            scope: 'scope.address',
            success(){
              wx.chooseAddress({
                success(res){
                  console.log(res)
                }
              })
            }
          })
        }
      }
    })
  },
  getOpenId(){
    wx.login({
      success: (res) => {
        console.log(res.code) // 登录凭证
        /**
         * openId无法直接获取，获取步骤如下：
         * 1.在前端获取用户登录凭证
         * 2.向后台服务器发送请求，将登录凭证传给后台，由后台获取信息
         */
        wx.request({
          url: 'url',
          data:{
            code:res.code
          },
          success(result){
            console.log(result)
          }
        })
      },
    })
  }