如何在UNI-APP内开发微信公众号(H5)JSSDK

news2024/11/20 8:37:07

参考文章

UNI-APP 开发微信公众号(H5)JSSDK 的使用方式
微信内H5使用JSSDK分享!!!注意目前Hbuilderx2.3.7版本存在问题!!!
vue-router与location.href的用法区别
微信网页开发 JSSDK 分享功能,安卓和调试工具都成功,IOS无法使用?

源码地址

uniapp-component
请参考 utils/wxShare.js

实现

  1. 安装
    全局引入:
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  1. jssdk使用
    全局引入之后,我们在微信内访问我们的网页应用时,会新增一个全局变量jWeixin
    所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用。
wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的 JS 接口列表
});

signature(签名)生成规则,可参考微信 JS 接口签名校验工具,验签中有一个很重要的参数url当前网页的URL,不包含#及其后面部分。注意:对于没有只有域名没有 path 的 URL ,浏览器会自动加上 / 作为 path,如打开 http://qq.com 则获取到的 URL 为 http://qq.com/)。

然而,我们的H5应用有一个引导页,用户访问域名时会先进入引导页,再根据链接上的参数路由到不同功能页。当我从www.demo.com?type=1路由到www.demo.com/pages/main/main的时候,history发生改变了。然后不可思议的一幕出现了,我验签使用的url时www.demo.com/pages/main/main,生成的签名和微信 JS 接口签名校验工具生成的签名一样,但jWeixin.config一直提示我 realAuthuUrl[ www.demo.com?type=1,www.demo.com/pages/main/main]

怎么办呢?微信社区有一篇贴子:微信网页开发 JSSDK 分享功能,安卓和调试工具都成功,IOS无法使用?里官方的一段回复引起了我的注意。

在这里插入图片描述
我使用UNI-APP开发的是SPA应用。直接说重点,vue-router与location.href的用法区别,vue-router不会重新加载页面,而location.href会重新加载页面。

我使用UNI-APP开发的是SPA应用,并且路由变化不会重新加载页面。那我在A页面给window内新增一个变量a,赋值1,我在B页面能使用window.a吗?可以。

我使用UNI-APP开发的是SPA应用,并且路由变化不会重新加载页面,全局可以使用jWeixin。用户进入A页面,我在App.vue的onLaunch里执行jWeixin.config,jWeixin.ready成功。执行完成之后再在A页面内变更路由。在B页面继续使用jWeixin执行jWeixin.ready吗?亲测可以。

事情就变得简单了。

当用户访问H5应用时,在A页面执行jWeixin.config,声明好我用到得api,然后无论路由到任何B页面,我都可以使用jWeixin.ready自由定制我的分享页了。

其实,重点只有一个,执行jWeixin.config时不要产生任何history。

补个坑吧!
微信内,window.location.replace 的表现形式与window.location.href 一样。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

近四十场面试汇聚成的超全Web服务器面经总结

上期写了简历项目链接简历项目烂大街怎么办&#xff1f;教你最有谱的摆烂&#xff0c;有位读者照做以后&#xff0c;拿下了主管面&#xff0c;在群里宣传以后&#xff0c;最近多了不少小伙伴来催我更新服务器项目相关知识点。 这份总结是我之前秋招的时候&#xff0c;根据每次…

JS的事件介绍

JS的事件介绍 JS&#xff08;JavaScript&#xff09;是基于对象&#xff08;Object-based&#xff09;、事件驱动的脚本语言。 JS事件&#xff0c;就是用户或浏览器本身的某种行为&#xff0c;一般是用户对页面的一些动作引起的&#xff0c;例如&#xff0c;单击某个链接或按…

分享5款实用且免费的软件,让你轻松地完成任务

在日常工作和生活中&#xff0c;使用一些实用的小巧工具软件可以提高效率&#xff0c;让你更轻松地完成任务。 1.图像编辑——Paint.NET Paint.NET是一款免费的图像编辑软件&#xff0c;具有多种高级功能和插件支持。它支持多种文件格式、层、魔术棒、文本、画笔、形状、调整…

【C#+JavaScript+SQL Server】实现Web端在线考试系统 五:考试模块设计(附源码和资源)

需要源码请点赞关注收藏后评论区留言私信~~~ 一、考试模块概述 在线考试系统中的考试模块主要包括阅读考试规则&#xff0c;选择考试科目&#xff0c;随机抽取试题&#xff0c;答题计时器以及自动交卷并评分等功能 在开发考试系统过程中&#xff0c;需要考虑的一点是如何将试…

前端工程化详解——理解与实践前端工程化

前言&#xff1a; 前端工程化一直是一个老生常谈的问题&#xff0c;不管是面试还是我们在公司做基建都会经常提到前端工程化&#xff0c;那么为什么经常会说到前端工程化&#xff0c;并没有听过后端工程化、Java工程化或者Python工程化呢&#xff1f;我们理解的前端工程化是不是…

uniappvideo避坑指南(H5、小程序、app)

今天写下这篇文章已是蓄谋已久了&#xff0c;背景是年初接到项目需求开发基于H5运行的视频学习平台&#xff0c;以及后来uniapp转小程序app开发。相信开发过uniapp的video应该或多或少都遇到过一些坑&#xff0c;开场就不多说了&#xff0c;直接上干货。 项目要求用户不得拖动…

vue3引入router

1.添加vue-router依赖 进入项目路径的cmd下&#xff0c;执行命令 npm install vue-router4 或者yarn add vue-router4 推荐使用yarn命令&#xff0c;比npm安装更快 2.执行npm install重新加载依赖 3.在src文件夹下创建一个router文件夹 4.在router文件夹下创建index.js文件&…

JavaScript核心技术之JSON详解

JSON是什么&#xff1f; JSON&#xff08;JavaScript Object Notation, JS对象简谱&#xff09;是一种轻量级的数据交换格式。它基于 ECMAScript&#xff08;European Computer Manufacturers Association, 欧洲计算机协会制定的js规范&#xff09;的一个子集&#xff0c;采用…

undetected_chromedriver的使用

undetected_chromedriver是专门针对浏览器识别做出来的拓展 直接使用undetected_chromedriver第三方库 if __name__ __main__:from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWaitfrom sel…

前端数据加密的几种方式

1.base64加密方式 1.1 base64是什么&#xff1f; Base64&#xff0c;顾名思义&#xff0c;就是包括小写字母a-z、大写字母A-Z、数字0-9、符号""、"/"一共64个字符的字符集&#xff0c;&#xff08;另加一个“”&#xff0c;实际是65个字符&#xff0c;至…

Access-Control-Allow-Origin跨域解决及详细介绍

首先&#xff0c;跨域不是问题。是一种安全机制。 这是你在开发时、上线前就必须提前考虑到的安全问题并且采取合适的手段去避免这个问题带来的程序错误。不过通常情况下&#xff0c;前端开发的小伙伴们都非常坚信后端小伙伴的接口一定已经处理好了跨域这个需求。然而事实上许多…

JavaWeb 项目 --- 表白墙 和 在线相册

文章目录一. 案例: 表白墙 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 使用数据库存储数据.创建一个类用于数据库连接4. 使用 监视器 来初始化 Thymeleaf5. 编写 Servlet 代码① 重写 doGet 方法② 重写 doPost 方法③ 实现 load 方法④ 实现 save 方法6. 注意事…

Vue中key的作用及原理

1. 先说结论 key在Vue是DOM对象的标识&#xff1b;进行列表展示时&#xff0c;默认key是index&#xff1b;如果数据只做展示使用&#xff0c;使用index作为key是没有任何问题的&#xff1b;如果使用index作为key&#xff0c;而后续操作会破坏顺序&#xff0c;一定会带来效率问…

vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

vue3 antd项目实战——修改ant design vue组件中table表格的默认样式&#xff08;二&#xff09;知识调用场景复现修改table表格的行样式一、rowClassName添加行样式二、表格的不可控操作写在最后知识调用 文章中可能会用到的知识链接vue3ant design vuets实战【ant-design-vu…

解决:在 VSCode 中如何设置默认的浏览器为Chrome或Firefox

1、问题描述&#xff1a; 在 VSCode 编辑器中&#xff0c;其一般默认打开的浏览器是 IE 浏览器&#xff0c;而我已经习惯使用 Chrome 浏览器&#xff0c;以及会遇到页面的调试等不同的问题&#xff0c;因此需要将 VSCode 的默认浏览器调整为 Chrome 浏览器&#xff1b; 2、操…

【web前端开发】超详细讲解CSS盒子模型

文章目录1.盒子模型介绍2.内容3.边框4.内边距5.⭐盒子大小计算6.⭐内减模式7.外边距外边距的合并外边距的塌陷行内元素的垂直外边距8.⭐清除默认样式9.⭐版心居中1.盒子模型介绍 所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c…

使用Vue来完成项目中的首页导航+左侧菜单

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. …

8个不能错过的程序员必备网站,惊艳到我了!!!

程序员是一个需要不断学习的职业&#xff0c;不少朋友每天来逛CSDN、掘金等网站&#xff0c;但一直都抱着“收藏从未停止&#xff0c;学习从未开始”的态度&#xff0c;别骗自己了兄弟。在编程体系中&#xff0c;有很多不错的小工具&#xff0c;可以极大得提升我们的开发效率。…

前端技术:解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund

目录复现问题分析问题npm fund的命令npm fund的由来npm fund与npm ls解决问题参看文献&#x1f610; 我的博客&#xff0c;不仅帮你解决此类问题&#xff0c;还会告诉如何去分析定位问题。 复现问题 今天执行如下命令时&#xff1a; npm install报出如下问题&#xff1a; 2…

cookie、localStorage和sessionStorage详解

目录 一、cookie 二、Web storage 1、localStorage 2、sessionStorage的使用 3、复杂数据类型储存 Web Storage带来的好处&#xff1a; 三、sessionStorage、localStorage和cookie的区别 一、cookie cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储…