UNIAPP - H5跳转微信小程序
2023-09-11 14:14:36 时间
准备工作,见传送门:UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答
主要是导入 jweixin 和配置注册信息
1. main.js添加以下代码
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
2. 示例
如果 <script type="text/wxtag-template"> 标签需要放入图片,传统的渲染实现不了 需要用
用微信小程序原生的渲染方式
<img src="{{item.xx}}" />
<template>
<view class="content">
<!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
<wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError" username="gh_cxxxxx" path="pages/index/index.html">
<script type="text/wxtag-template">
<style>
.btn { padding: 12px;opacity:0 }
</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</view>
</template>
<script>
// 这里做个示例,实际上的jweixin sdk是需要你看第一步通过npm或yarn安装
import wx from 'jweixin-module';
export default {
data() {
return {};
},
onLoad() {
this.getConfig();
},
methods: {
// wx api 注册
getConfig() {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识,填自己的!
timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: ['wx-open-launch-weapp'],
openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
});
wx.ready(res => {
console.log(res);
this.$nextTick(() => {
let btn = document.getElementById('launch-btn');
btn.addEventListener('launch', e => {
console.log('success');
});
btn.addEventListener('error', e => {
alert('小程序打开失败');
console.log('fail', e.detail);
});
});
});
wx.error(res => {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
console.log(res);
});
},
// 监听跳转
handleLaunch() {
console.log('跳转');
},
// 监听错误
handleError() {
console.log('失败');
}
}
};
</script>
<style></style>
相关文章
- [转] 关于微信小程序、H5、公众号、APP跳转问题
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 微信内置浏览器H5如何清除缓存以及cookie和localStorage何时清除
- 微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件,可预览和下载 office 文件(doc / xls / ppt / pdf 等)适用于任何前端技术栈网站,兼容安卓和苹果系统!
- 微信公众号 - 第三方网页(H5)授权登录(OAuth2.0)流程及逻辑详细教程
- 微信公众号 - 禁用 H5 网页长按图片时弹出的菜单(转发给朋友 / 保存到手机 / 收藏 / 搜一搜),苹果安卓系统都可暴力 100% 完美禁用菜单,任何前端框架、任何浏览器都适用的解决方案
- uni-app - 解决 H5 微信公众号授权登录后,无法回退到 “上一页“ 的问题(微信登录后如何返回到触发它的那一页?无法通过 uni.navigateBack() 返回到前一页的问题?)详细教程
- uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,给微信分享卡片设置图标、标题、描述文字等(JS-SDK 通用解决方案放心用)
- uni-app - 最详细 H5 网页接入微信登录功能,提供公众号配置与详细注释示例代码(移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码)官方最新超级详细教程
- uni-app - 面包屑导航组件,支持自定义分隔符,点击可跳转对应页面(全端兼容 H5 APP 小程序,组件代码干净整洁无BUG)
- SSM框架基于h5的校园兼职招聘系统的设计与实现源码+论文三稿+ppt+查重报告(包远程安装,已降重)
- 解决H5在微信浏览器或QQ浏览器修改title的问题
- 关于 h5 获取摄像头图像
- 常见工作场景解决方案开源库推荐:文件上传库 - uppy、图片处理库 - tui.image-editor、在线文档预览解决方案 - kkFileView、纯前端在线表格/协同编辑解决方案 - Luckysheet、表单设计器 - form-generator / form-render、H5在线网页设计器 - gods-pen / luban-h5
- 【快应用】微信H5 referer支付未拉起微信收银台
- H5中基于Canvas实现的高斯模糊
- 微信小程序中 web-view 组件渲染外部 h5页面如何使用?
- 微信修改字体大小后h5页面排版乱 解决办法