tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
腾讯云小程序平台
    文档
    Download PDF

    接口说明

    最后更新时间：2024-11-14 16:22:22
    下载PDF

      路由接口

      接口
      说明
      wx.miniProgram.navigateTo
      保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabBar 页面
      wx.miniProgram.navigateBack
      关闭当前页面，返回上一页面或多级页面
      wx.miniProgram.switchTab
      跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
      wx.miniProgram.reLaunch
      关闭所有页面，打开到应用内的某个页面
      wx.miniProgram.redirectTo
      关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面
      注意：
      JSSDK 路由接口参数与 小程序路由接口 一致，但无法触发success/fail/complete回调函数。
      示例代码：
      JAVASCRIPT
      wx.miniProgram.navigateTo({url: '/path/to/page'})
      wx.miniProgram.navigateBack({delta: 1})
      wx.miniProgram.switchTab({url: '/path/to/page'})
      wx.miniProgram.reLaunch({url: '/path/to/page'})
      wx.miniProgram.redirectTo({url: '/path/to/page'})

      跳转接口

      接口
      说明
      wx.navigateToMiniProgram
      打开另一个小程序
      wx.exitMiniProgram
      关闭当前小程序
      wx.navigateBackMiniProgram
      返回到上一个小程序，只有在当前小程序是被其他小程序打开时可以调用成功
      注意：
      JSSDK 跳转接口参数与 小程序跳转接口 一致。
      示例代码：
      JAVASCRIPT
      wx.navigateToMiniProgram({
  appId: 'appId',
  envVersion: 'release',
  success: (res) => {
    console.log('navigateToMiniProgram success', res)
  },
  fail: (err) => {
    console.log('navigateToMiniProgram fail', err)
  }
})
      
      wx.exitMiniProgram({
        success: (res) => {
    console.log('exitMiniProgram success', res)
  },
  fail: (err) => {
    console.log('exitMiniProgram fail', err)
  }
})
      
      wx.navigateBackMiniProgram({
        success: (res) => {
    console.log('navigateBackMiniProgram success', res)
  },
  fail: (err) => {
    console.log('navigateBackMiniProgram fail', err)
  }
})

      导航栏接口

      接口
      说明
      wx.setNavigationBarTitle
      动态设置当前页面导航栏的标题
      注意：
      JSSDK导航栏接口参数与 小程序导航栏接口 一致。
      示例代码：
      JAVASCRIPT
      wx.setNavigationBarTitle({
        title: 'TCMPP',
        success: (res) => {
    console.log('setNavigationBarTitle success', res)
        },
  fail: (err) => {
    console.log('setNavigationBarTitle fail', err)
  }
})

      数据缓存接口

      接口
      说明
      wx.getStorage
      从本地缓存中异步获取指定 key 的内容
      wx.setStorage
      将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容
      wx.removeStorage
      从本地缓存中移除指定 key
      wx.clearStorage
      清理本地数据缓存
      wx.getStorageInfo
      异步获取当前 storage 的相关信息
      注意：
      JSSDK 数据缓存接口参数与 小程序数据缓存接口 一致。
      示例代码：
      JAVASCRIPT
      wx.getStorage({
  key: 'name',
        success: (res) => {
    console.log('getStorage success', res)
  },
  fail: (err) => {
    console.log('getStorage fail', err)
  }
})
      
      wx.setStorage({
  key: 'name',
        data: 'TCMPP',
        success: (res) => {
    console.log('setStorage success', res)
  },
  fail: (err) => {
    console.log('setStorage fail', err)
  }
})
      
      wx.removeStorage({
  key: 'name',
        success: (res) => {
    console.log('removeStorage success', res)
  },
  fail: (err) => {
    console.log('removeStorage fail', err)
  }
})
      
      wx.clearStorage({
        success: (res) => {
    console.log('clearStorage success', res)
  },
  fail: (err) => {
    console.log('clearStorage fail', err)
  }
})
        
      wx.getStorageInfo({
        success: (res) => {
    console.log('getStorageInfo success', res)
  },
  fail: (err) => {
    console.log('getStorageInfo fail', err)
  }
})

      媒体接口

      分类
      说明
      接口
      图片接口
      从本地相册选择图片或使用相机拍照
      wx.chooseImage
      在新页面中全屏预览图片
      wx.previewImage
      获取本地图片 base64（仅 IOS 支持）
      wx.getLocalImgData
      录音接口
      开始录音
      wx.startRecord
      停止录音
      wx.stopRecord
      音频接口
      开始播放音频
      wx.playVoice
      暂停正在播放的音频
      wx.pauseVoice
      结束播放音频
      wx.stopVoice
      注意：
      JSSDK 媒体接口参数与 小程序媒体接口 一致。
      示例代码：
      JAVASCRIPT
      wx.chooseImage({
  count: 2,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
        success: (res) => {
    console.log('chooseImage success', res)
          
          const imagePaths = res.tempFilePaths
          wx.previewImage({
      urls: imagePaths,
            success: (res) => {
        console.log('previewImage success', res)
      },
      fail: (err) => {
        console.log('previewImage fail', err)
      }
    })
            
          wx.getLocalImgData({
      filePath: imagePaths[0],
            success: (res) => {
        console.log('getLocalImgData success', res)
      },
      fail: (err) => {
        console.log('getLocalImgData fail', err)
      }
    })
  },
  fail: (err) => {
    console.log('chooseImage fail', err)
  }
})
      
      wx.startRecord({
        success: (res) => {
    console.log('startRecord success', res)
        
          const recordFilePath = res.tempFilePath
          wx.playVoice({
            filePath: recordFilePath,
            success: (res) => {
        console.log('playVoice success', res)
      },
      fail: (err) => {
        console.log('playVoice fail', err)
      }
    })
  },
  fail: (err) => {
    console.log('startRecord fail', err)
  }
})
        
      wx.stopRecord({
        success: (res) => {
    console.log('stopRecord success', res)
  },
  fail: (err) => {
    console.log('stopRecord fail', err)
  }
})
      
      wx.pauseVoice({
        success: (res) => {
    console.log('pauseVoice success', res)
  },
  fail: (err) => {
    console.log('pauseVoice fail', err)
  }
})
        
      wx.stopVoice({
        success: (res) => {
    console.log('stopVoice success', res)
  },
  fail: (err) => {
    console.log('stopVoice fail', err)
  }
})

      位置接口

      接口
      说明
      wx.getLocation
      获取当前地理位置信息
      wx.openLocation
      使用 App 内置地图查看位置
      wx.chooseLocation
      打开地图选择位置
      注意：
      JSSDK 位置接口参数与 小程序位置接口 一致。
      示例代码：
      JAVASCRIPT
      wx.getLocation({
        success: (res) => {
    console.log('getLocation success', res)
        
          const latitude = res.latitude
    const longitude = res.longitude
          wx.openLocation({
      latitude,
      longitude,
            success: (res) => {
        console.log('openLocation success', res)
      },
      fail: (err) => {
        console.log('openLocation fail', err)
      }
    })
           wx.chooseLocation({
      latitude,
      longitude,
            success: (res) => {
        console.log('chooseLocation success', res)
      },
      fail: (err) => {
        console.log('chooseLocation fail', err)
      }
    })
  fail: (err) => {
    console.log('getLocation fail', err)
  }
})

      文件接口

      接口
      说明
      wx.openDocument
      打开文档（Android仅支持PDF，iOS支持的文件类型同系统的wkwebview）
      注意：
      JSSDK文件接口参数与小程序文件接口一致。
      filePath仅支持本地文件路径，例如：通过wx.downloadFile 获取。
      示例代码：
      JAVASCRIPT
      wx.openDocument({
        filePath: '/path/to/file',
        success: (res) => {
    console.log('openDocument success', res)
        },
  fail: (err) => {
    console.log('openDocument fail', err)
  }
})

      设备接口

      接口
      说明
      wx.scanCode
      调起客户端扫码界面进行扫码
      wx.getNetworkType
      获取网络类型
      注意：
      JSSDK设备接口参数与小程序设备接口一致。
      示例代码：
      JAVASCRIPT
      wx.scanCode({
        success: (res) => {
    console.log('scanCode success', res)
  },
  fail: (err) => {
    console.log('scanCode fail', err)
  }
})
      
      wx.getNetworkType({
        success: (res) => {
    console.log('getNetworkType success', res)
  },
  fail: (err) => {
    console.log('getNetworkType fail', err)
  }
})

      通信接口

      接口
      说明
      wx.miniProgram.postMessage
      向小程序发送消息，会在以下特定时机触发 web-view 组件的message事件：小程序后退、组件销毁、分享等
      wx.miniProgram.onWebviewEvent
      H5监听小程序发送的消息事件
      wx.miniProgram.offWebviewEvent
      H5移除监听小程序发送的消息事件
      wx.miniProgram.sendWebviewEvent
      向小程序发送消息，触发 web-view 组件的event事件

      H5发送消息事件给小程序

      H5 JAVASCRIPT
      WXML
      JAVASCRIPT
      // H5 javascript
      wx.miniProgram.postMessage({ data: {name: 'TCMPP'} })
      
      wx.miniProgram.sendWebviewEvent({ data: {message: 'Hi TCMPP'} })
      <!-- 小程序 /pages/index/index.wxml -->
      <web-view src="https://xxx.xxx" bindmessage="onMessage" bindevent="onEvent"></web-view>
      Page({
        onMessage(e) {
          console.log(e.detail.data) // [{"name":"TCMPP"}]
        },
        onEvent(e) {
          console.log(e.detail.data) // {"message":"Hi TCMPP"}
        }
      })

      小程序发送消息事件给H5

      JAVASCRIPT
      H5 JAVASCRIPT
      wx.sendWebviewEvent({
        message: "I'm Miniprogram, I received"
      })
      function onEvent(e) {
        console.log(e.message) // I'm Miniprogram, I received
      }
      // 注册监听
      wx.miniProgram.onWebviewEvent(onEvent)
      // 移除监听
      wx.miniProgram.offWebviewEvent(onEvent)

      其他接口

      接口
      说明
      wx.miniProgram.getEnv
      获取当前环境
      wx.canGoBack
      当前 H5 页面是否可返回上一页
      wx.checkJsApi
      判断当前客户端版本是否支持指定JS接口
      wx.invokeNativePlugin
      H5调用客户端自定义API

      获取当前环境

      在H5网页内可以通过以下三种方式判断是否在小程序web-view环境：
      通过wx.miniProgram.getEnv 接口。
      // H5 javascript
      wx.miniProgram.getEnv((res) => {
        console.log(res.miniprogram) // true
      })
      通过window.__wxjs_environment 变量判断，建议在 WeixinJSBridgeReady 事件的回调函数中使用。
      示例代码：
      // H5 javascript
      function ready() {
        console.log(window.__wxjs_environment === 'miniprogram') // true
      }
      if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
        document.addEventListener('WeixinJSBridgeReady', ready, false)
      } else {
        ready()
      }
      通过判断userAgent中是否包含miniProgram关键字来判断。
      示例代码：
      // H5 javascript
      // "Mozilla/...... miniProgram TMA/mp6iu47n4rps6zwz": 携带了 miniProgram 关键字和小程序的 AppId
      console.log(window.navigator.userAgent);

      获取 web-view 的 URL

      用户分享时可获取当前web-view的 URL，即在onShareAppMessage回调中返回webViewUrl参数。
      示例代码：
      // 小程序 javascript
      Page({
        onShareAppMessage(options) {
          console.log(options.webViewUrl)
        }
      })

      判断H5是否可返回上一页

      用于判断是否可以返回到H5的上一个页面或状态的布尔值，即当前导航栈中是否有可以返回的页面。
      示例代码：
      // H5 javascript
      wx.canGoBack({
        success: (res) => {
    console.log('canGoBack success', res.canGoBack) // true/false
  },
  fail: (err) => {
    console.log('canGoBack fail', err)
  }
})

      获取客户端接口支持情况

      用于判断当前客户端版本是否支持指定JS接口。
      示例代码：
      // H5 javascript
      wx.checkJsApi({
        jsApiList: ['chooseImage'],
        success: (res) => {
          // 以键值对的形式返回，可用的api值为true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    console.log('checkJsApi success', res)
  },
  fail: (err) => {
    console.log('checkJsApi fail', err)
  }
})

      调用客户端自定义API

      H5中调用客户端的自定义 API。
      示例代码：
      // H5 javascript
      invokeNativePlugin() {
        let opts = {
          api_name: 'customApiName', // 自定义API名称
          data: JSON.parse(this.apiData || '{}'), // API请求参数
          success: (res) => {
            console.log('invokeNativePlugin success', res)
          },
          fail: (err) => {
            console.log('invokeNativePlugin fail', err)
          }
        }
        wx.invokeNativePlugin(opts); // 调用自定义API
      }
      
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款