七鱼开发文档中心
总览服务端 APIWebiOSAndroid鸿蒙Uniapp微信小程序插件三方接入

平台适配与功能

鸿蒙

请确保开启web存储能力

Web.domStorageAccess(true)

微信客户端

  • 提供使用微信选择图片能力
  • 提供小程序h5文件下载方案

使用web的ysf sdk接入

参数说明

字段类型必填说明
usewxjsnumber否使用微信js sdk的拍照选择相册功能 0: 不使用,1: 使用
downloadPageUrlstring否接入h5无法直接下载或打开,需要中间页下执行小程序打开接口,七鱼会通过用户传的下载页面地址拼接参数,用户需要自行解析

代码示例

//ysf 为七鱼 SDK 暴露的对象
ysf.config({
  usewxjs: 1 //使用微信jssdk的拍照选择相册功能
})

// 小程序h5使用文件下载能力
// 小程序接入h5无法直接下载或打开,需要中间页下执行小程序打开接口,七鱼会通过用户传的下载页面地址拼接参数,用户需要自行解析
ysf.config({
  downloadPageUrl: '/index/file'
})


// 小程序中间页自行实现,下载或拷贝,注:能下载预览的文件类型依赖微信api提供的能力
<!--index/file.wxml-->
<text>index/file.wxml</text>

<text>{{url}}</text>

<text>{{name}}</text>
<button bindtap="openFile">点击打开</button>
<button bindtap="copyUrl">复制链接</button>


// index/file.js,小程序页面示例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: '地址',
    name: '文件名'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options.url);
    const url = decodeURIComponent(options.url);
    const name = decodeURIComponent(options.name);
    this.setData({
      url,
      name
    })
   
  },
  openFile() {
     wx.downloadFile({
      url: this.data.url,
      success: function (res) {
        const filePath = res.tempFilePath
        wx.openDocument({
          filePath: filePath,
          showMenu: true,
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  copyUrl() {
    wx.setClipboardData({
      data: this.data.url,
      success (res) {
        wx.getClipboardData({
          success (res) {
            console.log(res.data) // data
          }
        })
      }
    })
  },

url直接接入

后面拼接下参数【注意encode下参数】:&downloadPageUrl=%2Findex%2Ffile&usewxjs=1

支付宝

  • 提供支付宝sdk选择图片视频能力 【目前选择视频被支付宝限制了, android不能使用】
  • 提供小程序h5文件下载方案

使用web的ysf sdk接入

参数说明

字段类型必填说明
usealipayjsnumber否使用支付宝的js sdk,用于选择图片,视频,与支付宝的权限绑定 0: 不使用,1: 使用
isCaptureSupportednumber否是否支持支付宝内拆分相机和相册权限 0:不支持 1:支持 需要同时使用 usealipayjs 才生效
downloadPageUrlstring否接入h5无法直接下载或打开,需要中间页下执行小程序打开接口,七鱼会通过用户传的下载页面地址拼接参数,用户需要自行解析

代码示例

//ysf 为七鱼 SDK 暴露的对象
//支付宝sdk选择图片视频能力
ysf.config({
  usealipayjs: 1, // 使用支付宝的jssdk,用于选择图片,视频,与支付宝的权限绑定
  isCaptureSupported: 1, // 是否支持支付宝内拆分相机和相册权限 0:不支持 1:支持 需要同时使用 usealipayjs
})


// 小程序h5使用文件下载能力
// 小程序接入h5无法直接下载或打开,需要中间页下执行小程序打开接口,七鱼会通过用户传的下载页面地址拼接参数,用户需要自行解析
// demo代码参考微信小程序
ysf.config({
  downloadPageUrl: '/index/file'
})

url直接接入

后面拼接下参数【注意encode下】例如:&downloadPageUrl=%2Findex%2Ffile&usealipayjs=1

小程序嵌入H5

H5 跳转小程序页面

为了能够让h5能够打开主流小程序原生页面,设计了一套协议来支持跳转。目前适配微信,阿里系,头条系小程序。

注意:这种方式只h5页面支持

代码示例

//https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
enum CustomLinkType {
  navigateTo = 'navigateTo',
  navigateBack = 'navigateBack',
  switchTab = 'switchTab',
  reLaunch = 'reLaunch',
  redirectTo = 'redirectTo',
}

//  增加新协议,满足跨平台需求
// qiyu://{CustomLinkType}?parmas=xxx&fallback=yyy
// command: navigateTo, navigateBack, switchTab, reLaunch, redirectTo

// qiyu://navigateTo?url=/page/index?id=xxx
// 小程序 wx.miniProgram.navigateTo(url: '/page/index?id=xxx'})
// 支付宝 my.navigateTo(url: '/page/index?id=xxx'})
// 抖音tt.miniProgram.redirectTo(url: '/page/index?id=xxx'})
// 不满足就执行 window.location.href = 'yyy'

// 注意encodeURIComponent,尤其是参数中带query参数
// 例如
const url = `/index/file?url=${encodeURIComponent('www.xx.com')}`;
const navigateToUrl = `qiyu://navigateTo?url=${encodeURIComponent(url)}&fallback=${encodeURIComponent('https://www.baidu.com/')}`;

这篇文档有帮助吗?

目录