页面错误!请稍后再试_微信内嵌H5页面授权和分享

近期新上线项目,用到了微信授权获取用户信息和分享,掉坑无数次,遂写此篇,为后人指路

项目情况

技术选型

  • 项目语言:HTML、CSS、JavaScript
  • 项目框架:Vue.js
  • 项目搭建脚手架:vue-cli
  • 工程化工具:webpack、Npm
  • 源码管理:gitlab
  • 运行环境:WeChatBrowser
  • 第三方服务:微信JS-SDK

项目需求

  • 微信授权获取用户信息
  • 微信分享统计
  • 提交表单携带微信部分信息
以下技术实现方式和方案都是基于公众号已分配相关授权和权限的情况下,具体授权和权限申请请查看微信官方文档,此处不做赘述

微信授权(基于公众号的授权方案)

  • 目前网上大多分为两种方式去获取微信授权,一种是前端主导的微信授权,一种是server端主导的微信授权,两种方式实现的结果是一样的,具体采用何种方式可以根据自己项目情况去选择

授权方法

  • 客户端中转的授权方式

ecdd33241d4dbf6366467e28bc3ab8ad.png
  • 完全由服务端主导的授权方式

授权流程

  • 客户端中转的授权方式
    • 微信用户进入页面(动态网址需要提前向服务器端获取授权地址)
    • 客户端携带redirect_uri向微信服务器发起授权请求
    • 微信服务器授权成功会携带一个codeurl上返回
    • 客户端随即携带code向服务端发送请求
    • 服务端返回用户信息
  • 完全由服务端主导的授权方式

客户端中转的授权方式技术实现

  • 获取微信授权code
let redirectUri = encodeURI(window.location.href)
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
  • 携带code向服务器端获取用户授权
let code = getQuery(window.location.href).code
axios.get("/xxx/getWxInfo?code=" + code).then(res => {if (res && res.data && res.data.code == 10000) {this.userInfo = res.data.data//获取成功后将userInfo存储在cookie中方便其他页面使用//localstorge存储在微信端存在问题,建议使用cookie存储//后续会写篇文章专门讲解微信端cookie存储和localstorge存储setCookie('userInfo', this.userInfo);}else {alert('微信授权失败,请重新微信授权后打开文章', res.code)}
}).catch(error => {this.userInfo = ''alert('微信授权失败,请重新微信授权后打开', res.code)console.log('获取微信授权出错了', error)
})
  • 授权成功,此时已经拿到用户的微信的授权信息和个人信息

微信分享

分享流程

  • 获取微信分享授权
  • 自定义分享标题,分享摘要,分享图片,并写入微信配置(wx.config)
  • 调用分享接口(wx.ready)
  • 分享成功

微信分享技术实现

  • 微信分享是个频繁调用的方法,实现过程中可以抽象一下
//调用服务器端接口验证授权信息
function $setShare(options) {axios.get('/xxx/getWxSignature?url=' + encodeURIComponent(location.href.split('#')[0])).then(function(resp) {if (!resp || !resp.data || resp.data.code != 10000) { return }wx.config({// debug: true,// 开启debug模式appId: resp.data.data.appid,timestamp: resp.data.data.timestamp,nonceStr: resp.data.data.noncestr,signature: resp.data.data.signature,jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]});var shareTimeLineData = options || {title: '分享标题',desc: '分享摘要',link: '',imgUrl:'',};var shareAppData = options || {title: '分享标题',desc: '分享摘要',link: '',imgUrl:'',};wx.ready(function() {wx.onMenuShareAppMessage(shareAppData);wx.onMenuShareTimeline(shareTimeLineData);});wx.error(function(res){console.log('分享签证失败', res)});},function(err){if (err) {alert(err);}else{alert('网络错误,请稍后重试!');}});
}
  • 调用分享代码实现
let shareWxData = {title: '测试微信分享标题',desc: '测试微信分享摘要',link: window.location.href,imgUrl: 'xxxxxxx',success: function(res) {// 这是微信分享的回调// 注意这个地方并不是用户分享成功的回调,而是用户点击了分享的回调,微信现有版本不会告知开发者用户是否分享成功}
}
$setWxShare(shareWxData)

作者:

轻易科技研发中心-前端部-张晓斌

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

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

相关文章

电脑打字手指正确姿势_正确的弹琴手型,应该是怎样的?

手型是基础,手型规范才有助于练习出正确的指法,指法正确就可以提高练习质量。刚入门的时候,不能刻意的要求手型,但是我们要有一个基本的要求,就是手要保持放松。弹琴的时候,没有多余的身体的力量参与到触键…

php 开源 采集,迅睿CMS 火车头内容采集

采集工具:火车采集器 v7.6采集模块:新闻 News一、编写采集入库脚本接口新建:./api/caiji.php/*** 数据采集*/define(IS_API, basename(__FILE__, .php)); // 项目标识define(SELF, pathinfo(__FILE__, PATHINFO_BASENAME)); // 该文件的名称r…

英文数据集txt_YOLOv5在建筑工地中安全帽佩戴检测的应用(已开源+数据集)

点击上方“计算机视觉cv”即可“进入公众号”重磅干货第一时间送达前言随着人工智能的发展,现在越来越多的场景需要人工智能。在工厂的厂区中以安全为首,但工人普遍缺乏佩戴安全帽意识;工厂环境复杂,有各种各样的禁止进入的区域&a…

浪潮集团PHP,浪潮php实习第一天(初识php)

先推荐几个比较好的php初学者资料php manual.chm(可在csdn下载频道下载,可查到大部分函数)比较好的开发工具1 eclipse PDT(对eclipse比较熟悉的比较适应)2.zendStudio(公认的最好的php集成开发环境)php没有想象中的那么难学,不仅仅是它的语法&#xff0c…

检测到目标url存在内部ip地址泄露_Cendertron,动态爬虫与敏感信息泄露检测

Cendertron,动态爬虫与敏感信息泄露检测Cendertron Crawler RendertronCendertron https://url.wx-coder.cn/HinPM 是基于 Puppeteer 的 Web 2.0 动态爬虫与敏感信息泄露检测工具。其依托于 xe-crawler 的通用爬虫、调度与缓存模型,新增了 Monkey Test…

wamp2 php配置,wamp安装后自定义配置的方法

WampServer是目前应用非常广泛的PHP集成开发环境,本文就来讲述Wamp安装后自定义配置的方法。供大家参考借鉴。具体如下:wamp2.5安装完毕后,自己手动重新设置了apache的默认根目录。但是发现本机可以访问,别人不能访问。提示信息为…

屏幕坏点检测图片_iPhone新机如何检测质量 iPhone新机检测质量步骤【详解】

iPhone新机怎么检测好坏_iPhone新机检测质量方法 说实话,苹果对于iPhone的品控把握确实一代不如一代,特别是去年发布的iPhone7系列,很多用户都反映自己新买的手机存在划痕、屏幕发黄、掉漆等问题。那么当我们购买一部全新的iPhone7时&#xf…

php 安全mysql,关于php:我从mysql注入安全吗?

本问题已经有最佳答案,请猛点这里访问。这是否足以避免SQL注入?这里只需要mysql_real_escape_string()方法。在将数据插入数据库之前,不应该执行htmlentities()或urlencode()。这些方法通常是在呈现您提供给用户的视图期间编写的代码。避免SQ…

excel单元格斜线_怎么在excel中画斜线?怎么在excel表格中画斜线?

在excel表格中画斜线的技巧教程:1.在Excel中打开一个空白工作簿。 2.您可以在任何大小的单元格中执行此操作,但是如果先将其增大则更容易理解。为此,我们只需单击并按住第1行和第2行之间的线,然后将其拖动到所需的高度即可。然后对…

php报表数据打印机,通过打印机打印带打印功能的php表

我有以下php表,我如何只在php表中添加打印功能?点击一个按钮,下面的表格通过打印机打印,我试过’CTRL P’,我只得到页面的html部分示例页眉,页脚,导航栏,而不是结果php结果echo "FILEIDFirstnameLastnameIssue DateInterest RateTermsBalance OutstandingBalan…

xbox one s驱动_理想照进现实 理想ONE开始接受预定

2016年4月22日,车和家创始人&CEO李想在源码资本第二届码会年会首谈车和家,改造城市出行。车和家 创始人&CEO 李 想2016年码会年会演讲2019年4月10日,增程式智能电动车「理想ONE」正式公布售价并开始接受预订,并将于2019年…

two+few+arguments+php,PHP5.5 ~ PHP7.2 新特性整理

PHP5.5 ~ PHP7.2 新特性整理一、从PHP 5.5.x 移植到 PHP 5.6.x使用表达式定义常量在之前的 PHP 版本中, 必须使用静态值来定义常量,声明属性以及指定函数参数默认值。 现在你可以使用包括数值、字符串字面量以及其他常量在内的数值表达式来 定义常量、声…

date设置时间_解决 IDEA 无法找到 java.util.Date 的问题

原文首发于 https://studyidea.cn/问题最近在项目中频繁使用到 java.util.Date,但是使用 IDEA 提示查找 Date 类,却无法找到 java.util.Date。可以看到,智能提示的结果没有 java.util.Date。没办法,只能暂时手动导入该包。最近闲下…

mysql插入语句例句,一句简单的MySql插入语句怎么写 ?

守候你守候我insert into 表名 values(default,"名字","2011-04-15 12:22:25"); //default可以换成null------------------------------insert into 表名 (name,datetime) values("名字","2011-04-15 12:22:25");使用SQL语法大写&…

vue key重复_【第2112期】 import { reactive } from #39;vue#39;

前言今日早读文章由Anthony Fu授权分享。Anthony Fu,是 Vue 的 Core Team 的一员,在 Vue主要负责 vue/composition-api 这个项目的维护。这是一个面向 Vue 2 的插件,它在 Vue 2 中增加了 Vue 3 的 Composition API 的支持。最近也加入了 Vite…

matlab系统稳定性分析,控制系统稳定性分析的MATLAB实现

收稿日期 :200706220 基金项目 :周口师范学院青年基金资助项目(No. ZKNUQN200621) 作者简介 :刘  伟(1976 - ) ,女 ,河南太康人 ,助教 ,硕士 ,主要从事电力系统及其自动化仿真研究. 第 25 卷 第 2 期 周口师范学院学报 2008 年 3 月 Vol. 25 No. 2 Journal of Zhoukou Normal …

路由器下一跳地址怎么判断_网络基本功三:细说路由器

介绍以太网交换机工作在第二层即数据链路层,用于在同一网络内部转发以太网帧。但是,当源和目的IP地址位于不同网络时,以太网帧必须发送给路由器。路由器负责在不同网络间传输报文,通过路由表来决定最佳转发路径。当主机将报文发送…

HTML多选mysql,html多选下拉框 | 学步园

一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据。jsp页面例子:pageEncoding"UTF-8" import"java.util.*,java.text.*"%>String path…

利用逆矩阵解线性方程组_经典Jacobi方法用于求解矩阵特征值

1、引言求解线性方程组在许多领域中都有重要应用,写成矩阵的形式: 。求解 可以写成: ,这里需要求解矩阵 的逆。《线性代数》中给出的方法主要有两类:1、设置增广矩阵,利用高斯消元法,通过初等行…

filename: core/loader.php,使用第三方包后出现的这个错误,你们都遇到过吗?

使用了一些第三方包,经常会发现,引入某些第三方包后(比如在laravel5.6中引入viacreative/sudo-su),使用命令行工具会遇到这样的错误提示,卸载了第三方包后重新安装vendor目录问题立马解决。真是把人头发都愁白了:PHP F…