uniapp微信公众号跳转小程序(vue项目)
一、微信开放文档
二、步骤
1、引入微信js-sdk npm install wx-module --save
2、在调用的页面中引入import wx from 'jweixin-module'
3、页面报错找不到模板wx-open-launch-weapp时，main.js中Vue.config.ignoredElements = [ 'wx-open-launch-weapp']
4、引入微信开放标签，在main.js中配置Vue.config.ignoredElements = [‘wx-open-launch-weapp’]出现下面报错，则将配置改为Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']
5、获取wx.config注册信息
let url = window.location.href.split('#')[0];//要在公众号平台设置JS接口安全域名，ip白名单uni.request({url: "aaaaaaaaaaa',//调取后台接口拿到wx.config中的参数method: 'GET',header: {'content-type': 'application/x-www-form-urlencoded'},success: data => {wx.config({debug: true, // 开启调试模式,返回值会在客户端alert出来。appId: "", // 必填，公众号的唯一标识imestamp: "", // 必填，生成签名的时间戳nonceStr: "", // 必填，生成签名的随机串signature: "", // 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表openTagList: [ 'wx-open-launch-weapp'] // 可选，需要使用的开放标签列表});wx.ready(function() {let btn = document.getElementById('launch-btn');//视图层对应的id名btn.addEventListener('launch', e => {console.log('success');});btn.addEventListener('error', e => {console.log('fail', e.detail);});});} });
6、view视图层调用（需注意，html和css内容均为原生写法，不能用框架组件和框架内置样式）
<wx-open-launch-weapp id="launch-btn" username="gh_************" // 小程序的原始idpath="****" // 需要跳转的小程序页面地址，不填会跳首页,必须.html结尾style="width:100%"><script type="text/wxtag-template"><style>.box{width: 100%; display: flex;flex-direction: column;align-items: center;justify-content:center;}.text{width: 100%;margin-top: 8px;font-size: 12px;color: #333333;display: inline-block;text-align: center;}</style><div class="box"><img src="xxxx.png" width="36px" height="36px"/><span class="text">智能门禁</span></div></script>
</wx-open-launch-weapp>
5、成功界面
uniapp微信公众号跳转小程序(vue项目)相关推荐
- uniapp 微信公众号跳转小程序的各种坑
一.引进js http://res2.wx.qq.com/open/js/jweixin-1.6.0.js import wx from "jweixin-module"; let ...
- 微信公众号跳转小程序 wx-open-launch-weapp (最全指南及坑)
微信公众号使用 wx-open-launch-weapp 开放标签跳转小程序 注意事项 微信开放标签有最低的微信版本要求,以及最低的系统版本要求. 微信版本要求为:7.0.12及以上 系统版本要求为: ...
- 微信公众号跳转小程序方法
1 公众号需要关联小程序 2 跳转方法: wx.navigateToMiniProgram(Object object) 打开另一个小程序 wx.navigateToMiniProgram({app ...
- php 微信公众号跳转小程序,微信公众号菜单添加小程序miniprogrampagepath参数详解php开发公众号-小程序怎么放到公众号菜单里-公众号菜单链接小程序...
1. 随着微信小程序功能的开发,2. 已经可以跟公众号打通了,3. 主要有两种方式:4. 1)在公众号文章中插入小程序5. 2)在公众号菜单中添加小程序6. 第一种方式,7. 子恒老师在前面的课程已经 ...
- 微信公众号跳转小程序流程简单梳理（未完待续）
功能需求:公众号跳转至小程序 一.准备工作 1.申请测试号 http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo& ...
- php 微信公众号跳转小程序,微信小程序页面跳转功能
本文主要介绍微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下. 一.效果图 从 ...
- 微信公众号跳转小程序 wx-open-launch-weapp(h5)
一:在vue3中使用 <wx-open-launch-weapp@launch="onlaunch"@error="onerror"path=" ...
- 微信小程序如何跳转到微信公众号文章，小程序如何关联公众号或订阅号
微信小程序如何跳转到微信公众号文章,小程序如何关联公众号或订阅号 前置条件 公众号最高管理权限(或能与最高权限管理者配合操作) 小程序开发权限或最高管理权限 小程序方面 根据官方资料描述,小程序中展示 ...
- vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
- 公众号跳转小程序首次没有数据_小程序如何从“0”开始运营，变成获客神器...
随着发展,越来越多的企业都感觉到获客难,获客成本高.而小程序的诞生恰恰解决了这些问题.合理的利用小程序的功能,可以帮助商家低成本高效获客,今天我们就来谈谈具体怎么用小程序来拉新引流. 合理的利用小程序 ...
最新文章
- C语言打印1000以内的完数
- DataSet.Relations一例
- 五款主流 Linux 发行版性能对比，稳而不强？
- Linux学习之系统编程篇：进程回收（wait / waitpid）
- Python从N个数中找到最大的K个数
- offsetwidth/offsetheight的区别
- Request load 没有成功执行的原因分析
- 查linux有哪些task_浅谈Linux线程模型
- 【滑动窗口】leetcode209：长度最小的子数组
- python ssh登录交换机_python使用paramiko模块通过ssh2协议对交换机进行配置的方法...
- char类型怎么输入 c语言_C语言的标准 “输入输出”！今天是你学C语言的第几天？...
- 奥维中如何关闭gcj02坐标_QGIS入门知识：啥是坐标系
- kindle刷机ttl_[原创]只需USB线对Kindle 3修砖的小白教程
- Wise Force Deleter强制删除工具
- 【游记】CQOI2021
- 多合一音乐搜索器项目源码分享,支持播放,下载
- java求小于n的素数_java_Java实现求小于n的质数的3种方法，质数概念 质数，又称素数， - phpStudy...
- Linux 在终端中打开新的终端：gnome-terminal
- 圆周率计算程序图计算机基础知识,沪教版（2019）高中信息技术 必修1 项目七 用计算机计算圆周率——设计简单数值数据算法 教案（3课时）...
- 谈谈XR关键技术及VR/AR/MR/XR关系