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

2024-07-29 02:24:17

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信支付终于成功了（安卓、iOS）在此分享

经过了几天的痛苦煎熬,终于把微信支付调通,整个调试过程很痛苦,痛苦的主要来源是微信支付的调试真的是,以前调试公众号支付也是一波三折啊.好吧,开始!首先说明,我这里主要没有使用getToken,getOrder方法,我的所有参数全部是在后端生成传递给前端的,看了一下前面朋友分享的源代码,还用到了jquery,md5,sha对于新手来说简直是天文啊,而且jquery在apicloud中效率不好,所以放弃了研究那个代码,另外官方也说了,最好签名等参数全部服务器端生成,微信也是这么说的. 注意:微信本身
微信分享的标题、缩略图、连接及描述设置方法

微信分享的标题.缩略图.连接及描述该如何设置,使用微信分享过程中会遇到这个情况,无解的朋友可以看看下面的代码 <script> var imgUrl = 'http://topic.xcar.com.cn/201403/ad_q3/pic/banner.jpg'; var lineLink = 'http://topic.xcar.com.cn/201403/ad_q3/index.php'; var descContent = "http://topic.xcar.com.cn/2
基于js实现微信发送好友如何分享到朋友圈、微博

微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. <script> var imgUrl = "图片地址"; var lineLink = "当前网址"; var descContent = "描述"; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge
详解微信小程序开发—你期待的分享功能来了，微信小程序序新增5大功能

微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=
javascript实现修改微信分享的标题内容等

代码超级简单,这里就不多废话了,小伙伴们自己看注释吧, 奉上代码: 复制代码代码如下: <script> //微信分享 var wimg = "分享图片网址123"; var wurl = "分享网址123"; var wdesc = '分享内容123'; var wtit = '分享标题123'; var wappid = ''; function shareMsg() {//<span style="font-family: A
微信小程序实现分享到朋友圈功能

截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈我的套路: 请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便) canvas绘制文字和图片到画布当用户点击分享到朋友圈时,给用户展示画布,画布转成图片,并将图片保存到相册 onShow: function () { var that = this; //1. 请求后
微信小程序--onShareAppMessage分享参数用处(页面分享)

今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容. 顾不上吃冬至的饺子.我就冲进来了. 先说分享功能,目前真机尚不能调试.开发工具上可以看看效果.后续还会更新. Page()中加上如下代码后在右上角就会出现三个小白点 title:分享的标题. desc:分享一段描述. path:这个参数有点意思.以前在微信中的分享一般都是url.这里是当前页面这里应该是pages/index?id=123这里的id目前还不知道是什么. 也就是说以后你可以在微信中像分享一个网页一样分享一个页面
微信公众号H5之微信分享常见错误和问题(小结)

url转码官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)
微信公众号H5支付接口调用方法

本文实例为大家分享了微信内H5调用支付接口的具体代码,供大家参考,具体内容如下官方文档地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信公众号H5接口调用</title> <script src='./js/md5.js'></script> </head>
PHP微信公众号开发之微信红包实现方法分析

本文实例讲述了PHP微信公众号开发之微信红包实现方法.分享给大家供大家参考,具体如下: 这几天遇到了一个客户要给他们的微信公众平台上添加微信现金红包功能,是个二次开发的功能,顺手百度一下,原来不复杂.就着手开发功能了.现将开发的过程和需求贴出来分享一下: 一.需求: 粉丝通过在客户的公众平台点击他们公司的订单,然后给这个订单返现五元,发到订单的这个微信号上. 二.开发想法: 1:先拿到关注这个粉丝的openid,openid是关注某个公众号的微信标识,这样就可以定位到这个人是订单的操作者了.
微信公众号开发之微信公共平台消息回复类实例

本文实例讲述了微信公众号开发之微信公共平台消息回复类.分享给大家供大家参考.具体如下: 微信公众号开发代码我在网上看到了有不少,其实都是大同小义了都是参考官方给出的demo文件进行修改的,这里就给各位分享一个. 复制代码代码如下: <?php /** * 微信公共平台消息回复类 * * */ class BBCweixin{ private $APPID="******"; private $APPSECRET="******"; /*
使用NodeJs 开发微信公众号（三)微信事件交互实例

微信公众号有个规则,一旦开启了开发者模式,其他的常规功能就都必须通过接口调用完成.比如说自定义菜单功能,必须通过发送post请求的方式生成.本章就通过关注到取消关注的整个过程来谈一谈nodejs是怎么样与微信交互的.这些功能的入口就是你在测试公众号里面填写的URL(以下用/login/wechat代替). 事件交互扫码关注微信公众号后,微信会调用你的接口/login/wechat,并且附带一段xml信息,首先你需要获取一些签名,通过加密.排序比对是否与你填写的TOKEN一致,如果一致则进行xm
用python wxpy管理微信公众号并利用微信获取自己的开源数据

之前了解到itchat 乃至于 wxpy时是利用tuling聊天机器人的接口.调用接口并保存双方的问答结果可以作为自己的问答词库的一个数据库累计.这些数据可以用于自己训练. 而最近希望获取一些语音资源,用于卷积神经网络的训练.. -------------------------------------------------------------------------------- 首先wxpy是itchat的升级版,通过wxpy bot.core即可原封不动的调用itchat的指令.
微信公众号开发之微信支付代码记录的实现

需求说明这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的.记录的是jsapi支付,别的支付方式暂时没有记录,也就是拉起来付款界面的支付. 微信支付产品 https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product 微信开发步骤 https://pay.weixin.qq.
vue实现微信公众号h5跳转小程序的示例代码第1/3页

目录项目概述涉及知识点实现实现容器 computed 实现分页项目概述实现类似图中红色框框选中可以左右滑动的组件,点击可以跳转到对应的小程序页面. 涉及知识点 computed 实现分页开放标签 wx-open-launch-weapp 使用实现实现容器首先我们来实现两行可以左右滑动的容器. 这边为了省事,我是选择了 vue-awesome-swiper@2.6.7: npm i vue-awesome-swiper@2.6.7 -S main.js 引入 import Vu
php微信公众号开发之微信企业付款给个人

本文实例为大家分享了php微信企业付款给个人的具体代码,供大家参考,具体内容如下以下有关微信支付中企业付款的介绍及编码参考自微信支付开发文档,网址,如图所示企业付款,提供企业向用户付款的功能,支持企业通过API接口付款,或通过微信支付商户平台网页功能操作付款. 企业付款业务是基于微信支付商户平台的资金管理能力,为了协助商户方便地实现企业向个人付款,针对部分有开发能力的商户,提供通过API完成企业付款的功能.< 比如目前的保险行业向客户退保.给付.理赔. 以下是PHP用于实现企业付款业务的代码
微信公众号菜单配置微信小程序实例详解

先提条件是你的公众号版定了小程序第一种:直接配置第二张:代码配置 1.进入在线接口调试工具 2.选择自定义菜单菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a

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

相关推荐

随机推荐