uniapp 微信授权,微信分享,微信支付,微信跳转app集成

更新提示 !!!!

更新提示 !!!!

更新提示 !!!!

在7.12号微信推出不能强制获取用户信息才能使用。再授权之前得明确告知用户。经过我的暗访~大部分公司已经吧微信授权改成自己公司得账号密码登录了!卑鄙!竟然没人提醒我!

然后以前授权过的用户不受影响。只有新用户有影响。会导致授权失败,具体请看微信开发文档

我怀疑是某位被罚了80亿的公司导致的连锁反应

准备前提:

重中之重!!一定要确保微信公众号添加了你要使用JS接口安全域名!并且有appid!!切记

首先 微信授权 

微信授权无非是用户授权之后微信在链接上面返回code信息给我们。然后我们去自己的服务器拿到用户信息。如何触发微信授权这一步,就需要用到appid以及当前页面的地址了。

第一步:先调取自己服务器拿到appid,并且获取当前页面地址。需保证这个地址就是网页授权域名。

第二步  跳转到 拼接好的地址

 window.location.href ='http://open.weixin.qq.com/connect/oauth2/authorize?appid=' +appId + '&redirect_uri=' + UrlEncode +'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

UrlEncode就是当前地址;需encodeURIComponent编译一下,在微信开放文档也有提示。

snsapi_base为scope 就是静默授权。(默认授权登录。除非是第一次进入此网页)

然后页面就是自动跳转回带有code信息的当前页面。自己再去获取地址栏的code字段,去自己服务器拿去用户信息就好了。(授权这一块没有技术难点。只要网页授权域名绑定了。appid也有就行)

注意事项:code是会过期的。

 微信授权不需要引入js。

需要引入的js。微信的sdk。概述 | 微信开放文档 

 上面两个js随便用哪个

还需要引入sha1.js。后面signature签名需要加密处理这两种js是必须

我是写在app.vue里面 md5.js不用管

 分享。微信分享需要的参数

 jsApiList里面的参数根据自己需求来写。不懂就看微信文档

openTagList里面的参数是等下跳转app所需要

wx.config里面的配置参数由自己调用接口拿到appid 和jsapi_ticket,必须先调用接口拿到appid和jsapi_ticket然后再给wx.config配置

jsapi_ticket的作用是为了生成签名signature签名;jsapi_ticket可以理解为一把钥匙,你不需要知道太多。调接口拿就完了

signature签名由 (jsapi_ticket 16位随机字符串:随机字符串也需要找公司,从他给的字符串里面截取16位,当前页面时间戳,还有当前的页面地址var href = window.location.href.split('#')[0])这里面的四种参数进行sha1加密。

当wx.config里面所有参数都配置好了之后,就可以再wx.ready里面进行分享调用了

举例分享好友参数

分享就是这么多。下面说支付

wx.chooseWXPay支付

前提一定是再wx.config jsApiList里面添加了chooseWXPay,不然无效

 

 这里面的配置参数一般在支付请求调用接口之后从自己服务器拿去。然后配置上去。

如果配置成功之后。就会发起支付。如果没成功。检查wx.config里面配置是否正确。然后检查wx.chooseWXPay配置是否正确,如果都没问题。那就问下后端是否配置appid以及支付域名是否正确。

最后到了最复杂的跳转app!!!

 这是页面按钮。wx-open-launch-app 是微信h5跳转,不是小程序 一定要问公司拿appid!!!extinfo里面是跳转时携带的参数。随你带不带看公司要求 

如果你是用原生写的,一定要加template,不然不显示

 以上只是一个跳转的按钮。只包含一下一点点具体的样式需要自己写

 照样是在wx.config里面进行配置除了jsApiList里面需要写wx-open-launch-app之外

openTagList里面一样要写

 最后在wx.ready里面调用wx.checkJsApi  如果失败了 也可以在fail里面做一些回调处理,我是让他跳公司的下载页面。如果你公司也在微信h5里面有配置下载链接的话也可以放进去。下载链接问公司拿,

 最后总结:如果拿到了appid还是有问题。那就去看公司的微信公众号平台。一定要亲眼所见js接口域名一定绑定了。wx.config里面的配置具体还是看看微信文档。每家公司的随机字符串都是不一样的

下面贴上一条龙完整代码。随机字符串与signature 签名自己去弄哦 share携带的参数也不必理会

			share: function(decrypt, orderNo) {let userno = uni.getStorageSync('userno');//用户idlet imgURL =uni.getStorageSync("imgURL");//图片封面let textBox =uni.getStorageSync("textBox");//二级介绍uni.request({url: getApp().globalData.geturl() + "/webhttp/mobileHandler" + getApp().globalData.logintext(),method: 'GET',data: {type: "getWXTicket",userno: userno,},dataType: 'json',success: (res) => {if (res.data.code == "success") {// let url = window.document.location.href; //当前点击时的链接let url = uni.getStorageSync('url');var href = window.location.href.split('#')[0];let timestamp = Math.floor(res.data.result.expires_in / 1000);let appId = res.data.result.AppID;let jsapi_ticket = res.data.result.jsapi_ticket;let nonceStr = getApp().globalData.randomString(16); //随机字符串var signature = getApp().globalData.calcSignature(jsapi_ticket, nonceStr,timestamp, href);wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: appId, // 必填,公众号的唯一标识timestamp: timestamp, // 必填,生成签名的时间戳nonceStr: nonceStr, // 必填,生成签名的随机串signature: signature, // 必填,签名,见附录1jsApiList: ['checkJsApi', 'updateAppMessageShareData','updateTimelineShareData', 'chooseWXPay','wx-open-launch-app'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2openTagList: ['wx-open-launch-app']});wx.ready(function() {wx.updateAppMessageShareData({ //分享好友title: "标题",//一级标题desc: textBox,//二级标题link: url,//分享时的页面地址imgUrl: imgURL,//分享时的封面图片success: function(res) {}});wx.updateTimelineShareData({ //分享朋友圈title: "标题",desc: textBox,link: url,imgUrl: imgURL,success: function(res) {}});// 跳转到Appwx.checkJsApi({jsApiList: ['wx-open-launch-app'],success: function(res) {// alert(JSON.stringify(res))},fail: function(err) {// 跳转失败去下载页面window.location ="自己公司的下载地址"}})if (decrypt) {// 支付接口wx.chooseWXPay({timestamp: decrypt.timeStamp,nonceStr: decrypt.nonceStr,package: decrypt.package,signType: decrypt.signType,paySign: decrypt.paySign,success: function(res) {if (res.chooseWXPay == 'ok') {getApp().globalData.onBridgeBox(orderNo)} else {getApp().globalData.onBridgeBox(orderNo)}},cancel: function(res) {uni.showToast({title: '已取消',icon: 'none',duration: 1500});;},fail: function(res) {uni.showToast({title: '支付失败',icon: 'none',duration: 1500});;}})}})}}})},

小更新:如果使用原生写的话,直接这样引入就好了 微信sdk可以线上引入~

extinfo参数一样可以动态生成

document.querySelector("#launch-btn").setAttribute("extinfo", '所需参数') 就好了

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

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

相关文章

如何将两个微信小程序合并_微信小程序--如何在两个页面之间传值

先看一下本周的部分的设计图 在这里插入图片描述 在这里插入图片描述

注意力机制

注意力机制:我们会把我们的焦点聚焦在比较重要的事物上。 对于一个模型而言(CNN、LSTM),很难决定什么是重要的,什么是不重要的,由此注意力机制诞生了。 对于一张热力图而言,我们不难发现人类的…

Python篇——数据结构与算法(第四部分:希尔排序及其讨论、计数排序、桶排序、基数排序)

1、希尔排序 希尔排序(shell sort)是一种分组插入排序算法首先取一个整数d1n/2,将元素分为d1个组,每组相邻两元素之间距离为d1,在各组内进行直接插入排序取第二个整数d2d1/2,重复上述分组排序过程&#xf…

手把手QQ机器人制作教程,根据官方接口进行开发,基于Python语言制作的详细教程(更新中)

第 1 课、注册 QQ 开放平台账户 QQ开放平台官方地址:https://q.qq.com/#/app/bot QQ开放平台包含:QQ机器人、QQ小程序、QQ小游戏,我们这边选择QQ机器人。 机器人类型:设置私域机器人或者公域机器人,当然公域机器人对…

【0基础QQ机器人开发】基于go-cqhttp的QQ机器人开发教程,仅供自学

文章目录 一、本文目的:二、实现历程:三、开发过程1.准备工作1.cq-http的下载地址:[Releases Mrs4s/go-cqhttp (github.com)](https://github.com/Mrs4s/go-cqhttp/releases)2.python环境的配置 2.程序配置3.python程序开发4.常用API拓展 API 及与 OneBot 标准有略微差异的 AP…

【最新】半小时教你制作出属于自己的QQ机器人【保姆级】

目录 前言QQ机器人功能展示一、安装nonebot2安装步骤建立一个新的机器人项目 二、安装go-cqhttp安装步骤修改配置 三、使用 前言 相信大家都有在QQ群见过QQ机器人,可以玩游戏、推送当日天气情况等。本文将基于nonebot2和go-cqhttp构建一个自定义的QQ机器人。 QQ机…

如何在linux上使用QQ(在终端上使用qq) mojo-qq

如何在linux终端上使用QQ 效果展示 介绍irc irc的历史非常悠久,那都是上个世界别人用来聊天的了,算是我接触到的最早的及时聊天 以下是来自google的简介 Internet Relay Chat (IRC) is an application layer protocol that facilitates communicatio…

QQ机器人

一、介绍 qqbot 是一个用 python 实现的、基于腾讯 SmartQQ 协议的 QQ 机器人,可运行在 Linux 、 Windows 和 Mac OSX 平台下。 本项目 github 地址: https://github.com/pandolia/qqbot 你可以通过扩展 qqbot 来实现: 监控、收集 QQ 消息自动…

实现一个QQ助手

一、准备工作 下载go-cqhttp,下载自己需要的版本,我是在ubuntu上搭建,我下载的是go-cqhttp_1.0.0-bata4_linux_amd64.deb 二、流程 2.1、生成配置文件 切换到下载路径,并执行如下命令: sudo dpkg -i go-cqhttp_1.0…

基于node.js和oicq的qq机器人 制作回顾分析笔记

目录 1 文章简介 2 项目介绍 3 qq机器人的登录部分 3.1 模块的调用 3.2 登录配置文件 3.3 登录部分 4. 普通非指令功能 4.1 自动复读 4.2 自助禁言 4.3 来点颜色 4.4 回复功能 5. 指令功能 5.1 删除图片 5.2 禁言 5.3 解除禁言 5.4 查看帮助 5.5 群白名单 5.6…

浙大知识图谱基础:学习笔记

0 基础知识 知识图谱中,知识的结构化表示主要有符号表示和向量表示两类方法。符号表示包括:一阶谓词逻辑,语义网络,描述逻辑和框架系统等。当前主要采用基于图的符号化知识表示,最常用的是有向标记图。 有向标记图分为…

识别在线视频中的歌曲并下载音乐

问题:视频中的歌曲觉得很好听,但又不知道是什么歌曲,如何解决? 1、在chrome商店中找到aha music 插件。 2、安装. 3、打开需要识别的视频网站,点击aha music按钮。 4、当找到该歌曲时,点击。 5、按F12 在…

小程序简单实现搜歌、听歌

这篇文章用了两个网易云音乐的接口(不清楚是否是官方的),附上官方接口链接: 网易云音乐API / 本文所用接口: 1、http://musicapi.leanapp.cn/search 2、http://neteasecloudmusicapi.zhaoboy.com/song/url 效果图 相关代码如下 先…

java爬虫爬取音乐

以前写过一个音乐网站,我都是手动去下载音乐,并上传到网站,非常麻烦。 学习了HttpClinet和Jsoup 我决定完成一个简单的爬虫去收集音乐信息,并下载音乐; 先尝试做几个简单的小功能: 基本功能 1.根据歌曲…

计算机上面的音乐,电脑上如何识别音乐

电脑上如何识别音乐 我们都知道怎么在手机上使用软件来实现识别音乐的功能,但是在网上怎么识别呢。那么电脑上如何识别音乐呢?下面就让jy135小编来告诉大家吧,欢迎阅读。 首先打开midomi网站(http://www.midomi.com/) 见下图 点击网站上的“Click and S…

python音乐爬取

思路 本次爬取音乐使用reqursts模块,在安装此模块的基础上爬取音乐。 首先要获取抓包链接,这是一串网址,获取方法就是当你在浏览器界面播放音乐时打开开发者界面寻取。其次使用get()向服务器发送get请求 .content获取二进制数据。最后将此写入…

Spring AOP简介及相关案例

目录 一、Spring AOP简介 二、AOP相关术语 三、AOP入门案例 1. 引入依赖 2. 编写连接点 3. 编写通知类 4. 配置切面 5. 测试 四、通知类型 1. 编写通知方法 2. 配置切面 3. 测试 五、切点表达式 六、多切面配置 1. 编写发送邮件的通知 2. 配置切面 3. 测试 …

Java与数据库:JDBC和ORM框架的使用和效率优化

第一章:引言 随着互联网的快速发展和大数据时代的到来,数据库在软件开发中起到了至关重要的作用。Java作为一门强大而广泛应用的编程语言,提供了多种与数据库交互的方式。其中,JDBC和ORM框架是最常用的两种方式。本文将深入探讨J…

适合打游戏用的蓝牙耳机有哪些?吃鸡无延迟的蓝牙耳机推荐

现在手游的兴起,让游戏市场变得更加火爆,各种可以提高玩家体验的外设也越来越多,除了提升操作的外置按键与手柄外,能带来更出色音质与舒心使用的游戏耳机,整体氛围感更好,让玩家在细节上占据优势&#xff0…

打游戏的蓝牙耳机推荐哪一款?吃鸡蓝牙游戏耳机推荐

选倒一款好的蓝牙耳机,即可以享受美妙音乐,也可以沉浸于深度游戏体验之中,能够让自己的身心压力得到释放。不过呢,最近发现很多人在买蓝牙耳机的时候都不知道怎么选一款靠谱的产品。作为已有5年多玩机经验的爱好者,今天…