前提是公众号必须是认证过的服务号!!!
h5 端:
.1 下载安装包
yarn add weixin-jsapi
yarn add weixin-js-sdk
jweixin-1.6.0.js 必须是这个版本 低于这个的版本不支持那个开放标签
weixin-jsapi 至于这个包 是用来导出 wx 的 从 sdk 里面导出无效
.2 导入
importwxfrom"weixin-jsapi"
import"weixin-js-sdk"
.3 权限验证
/*
@params
url:当前需要使用开放标签的页面的url 注意 是前台页面路径 不是域名路径 如:
http://testxxx.xxx.com/fileview
openTagList: ["wx-open-launch-weapp"] 代表此标签拉起的是小程序 还是app
*/
/*
需要在对应的公众号配置接口域名 配置的时候 只需要写后面的即可 不需要写http这个东西 如:
xxx.xxx.com/
*/
getWxConfig() {
util.getYangAxios(
api.wxConfig,
{
url: viewFile,
openTagList: this.state.openTagList,
},
async (res) => {
// console.log("res----", res)
// 请求后台接口拿到 data信息
wx.config({
debug: false,
appId: res.appId, // 必填,此处不是小程序的appid,而是公众号的唯一标识,公众号必须是服务号,
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: ["downloadFile",], // 必填,需要使用的JS接口列表
// openTagList配置可使用的开放标签,
openTagList: ["wx-open-launch-weapp"],
})
wx.ready((res) => {
console.log("res-ready---成功", res)
})
wx.error((res) => {
console.log("res-config---失败", res)
})
},
(err) => {
console.log(err)
}
)
}
.4 书写html结构
{/*
username:小程序的原始id
env-version:拉起小程序的版本
path:'跳往小程序的页面路径'
注意此处的样式需要行内样式
*/}
<div className={"wx_open_view"}>
{/* 拉起正式版release、开发版develop、体验版trial */}
<wx-open-launch-weapp
id="launch-btn"
username="gh_547f4f21434e"
path={`/view/F/pages/filetransfer/filetransfer.html?
fname=${filename}&furl=${fileurl}&ftype=${filetype}`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
env-version="release"
>
<script type="text/wxtag-template">
<Button
style={{
display: "block",
width: 310,
height: 46,
borderRadius: "46px",
lineHeight: "46px",
color: "#fff",
boxShadow: "0px -1px 13px 0px rgba(90,148,254,0.41)",
background: "#508afc",
textAlign: "center",
margin: "12px auto 6px auto",
}}
>
打开文档
</Button>
</script>
</wx-open-launch-weapp>
</div>
小程序端:
首先要有一个中转页 用来接受参数 和显示加载中
然后跳往指定的页面 在中转页 用 onl oad 即可获取参数
wx.hideHomeButton({ success: (res) => {}, })
wx.setNavigationBarTitle({
title: '文件浏览',
})
wx.reLaunch({url: `/view/F/pages/fileview/fileview?fname=${query.fname}&furl=${query.furl}&ftype=${query.ftype}&isCanLook=${isCanLook}`,})
在指定的页面也是 不需要返回按钮 直接让返回小程序首页即可
如果不让显示返回首页按钮的话 点击右上角也可以直接推出小程序
但是在没有结束微信后台的时候短时间内在打开小程序 还是文件浏览页面 并且无法返回
所以还是要有返回首页的按钮 除非是一个专门的查看文件的小程序 没有其他内容