微信公众号H5之微信分享常见错误和问题(小结)


Posted in Javascript onNovember 14, 2019

url转码

官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)?/'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分

即获取url完成地址的方法为

let url = window.location.href.split('#')[0];

如果链接带有中文字符或者特殊符号,前端需要使用encodeURIComponent编码,同时后端需要配合解码

let url = encodeURIComponent(window.location.href.split('#')[0]);

config注入

官网文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,
注意,每次使用jssdk方法前都要先注入配置信息,并且,每使用一次,就要注入config一次.

在vue里,可以写在每次路由变化时

router.beforeEach((to, from, next) => {
  // 获取权限验证配置(签名) 后端返回 getConfig, 注意返回字段的大小写!
  let res
  // 注入配置信息
  wx.config({
   debug: false, // 调试开关
   appId: res.appId, // 必填,公众号的唯一标识
   timestamp:res.timestamp , // 必填,生成签名的时间戳
   nonceStr: res.nonceStr, // 必填,生成签名的随机串
   signature: res.signature,// 必填,签名
   jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表
  });
  wx.ready(() => {
   // doSoming
  });
})

安全域名

一定要再三确认安全域名等微信公众号配置信息,如分享链接link字段

很多时候的错误并不是前端方法或者sdk等问题,而是后台有没有设置正确的安全域名和白名单等.

wx.updateAppMessageShareData({ 
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: '', // 分享图标
  success: function () {
   // 设置成功
  }
 })

常见错误

参考微信官网文档-附录5

地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

在开发过程遇到

  • invalid signature
  • the permission value is offline verifying
  • permission denied

先参考文档,排除基本因素,还是不行,再查找搜索引擎的答案.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
accesskey 提交
Jun 26 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
vue之延时刷新实例
Nov 14 #Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 #Javascript
vue自定义正在加载动画的例子
Nov 14 #Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 #Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 #Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 #Javascript
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
python批量替换多文件字符串问题详解
2018/04/22 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python实现贪吃蛇小游戏
2020/03/21 Python
pytorch数据预处理错误的解决
2020/02/20 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
手工社团活动方案
2014/02/17 职场文书
实习证明模板
2015/06/16 职场文书