平台适配与功能
鸿蒙
请确保开启web存储能力
Web.domStorageAccess(true)微信客户端
- 提供使用微信选择图片能力
- 提供小程序h5文件下载方案
使用web的ysf sdk接入
参数说明
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| usewxjs | number | 否 | 使用微信js sdk的拍照选择相册功能 0: 不使用,1: 使用 |
| downloadPageUrl | string | 否 | 接入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接入
参数说明
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| usealipayjs | number | 否 | 使用支付宝的js sdk,用于选择图片,视频,与支付宝的权限绑定 0: 不使用,1: 使用 |
| isCaptureSupported | number | 否 | 是否支持支付宝内拆分相机和相册权限 0:不支持 1:支持 需要同时使用 usealipayjs 才生效 |
| downloadPageUrl | string | 否 | 接入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/')}`;
这篇文档有帮助吗?