vue 公众号开发,调用jssdk封装

vue 公众号开发,经常会使用到 转发朋友,朋友圈,调用扫一扫等功能,这时就要使用微信的 jssdk
微信jssdk传送门

1. 安装jssdk 插件 (jweixin-module)

npm install jweixin-module --save

2. 封装方法

utils/jwx.js

let jweixin = require("jweixin-module")
import api from "@/api/api"

export default {
    isWechat: function () {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            return true;
        } else {
            alert('不是微信客户端,请在微信客户端操作在,谢谢');
            return false;
        }
    },

    initJssdk: function (callback) {
        //获取当前url然后传递给后台获取授权和签名信息
        let url = location.href;
        //let url = "https://custom.lbcst.com/bosscustom/pages/introduce/order";
        //这里是请求后台,调用jssdk 的申请接口,只有它完成了后,才有权限调用 jssdk 中的方法
        api.getinstance().shareAuth({url}).then(res=>{
            // console.log('后台返回签名')
            // alert(JSON.stringify(res))
            //返回需要的参数appId,timestamp,noncestr,signature等
            //注入config权限配置
            jweixin.config({
                debug: false,
                appId: res.data.info.appId,
                timestamp: res.data.info.timestamp,
                nonceStr: res.data.info.nonceStr,
                signature: res.data.info.signature,
                jsApiList: [ //这里是需要用到的接口名称
                    'updateAppMessageShareData', //分享给朋友
                    'updateTimelineShareData',   //分享到朋友圈
                    "uploadImage",      //上传图片
                    "chooseImage",      //选择本地的图片
                    "previewImage",     //预览图片接口
                    "getLocalImgData"   //获取本地图片接口
                ]
            });
            if (callback) {
                callback(res.data);
            }
        })
    },


	//封装分享朋友的方法
    //分享朋友  //为自定义的方法,配置参数,这样更加灵活
    shareAppmessage:function({title="",desc="",link="",imgUrl="",callback=null}){
        if (!this.isWechat()) {
            //console.log('不是微信客户端')
            return;
        }
        this.initJssdk(function(){
            jweixin.ready(function(){
                jweixin.updateAppMessageShareData({
                    title,
                    desc,
                    link,
                    imgUrl,
                    success: function(rs) {
                        if(callback){
                            callback(rs)
                        }
                    }
                })
            })
        })
    }


	//封装扫一扫的方法
	scanQRCode:function({needResult=0,scanType=["qrCode","barCode"],callback=null}){
        if (!this.isWechat()) {
            //console.log('不是微信客户端')
            return;
        }
        this.initJssdk(function(res){
            jweixin.ready(function(){
                jweixin.scanQRCode({
                    needResult,
                    scanType,
                    success:function(r){
                        callback && callback(r)
                    }
                })
            })
        })
    },


}

3.调用

在main.js中把 jwx 引入
在这里插入图片描述

<van-button @click="writeoff" type="primary" block>扫码核销</van-button>
 methods:{
    writeoff(){
      let that = this;
      this.$jwx.scanQRCode({
        needResult:1,
        callback:function(res){
          console.log(res);
          that.resultStr = res.resultStr;
          Toast({message:"扫码成功了,请用接口核销"+res.resultStr});
        }
      })
    }
}

以上的封装只是一个示例,所有的调用,都可以使用这类似的方法封装

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hello,World!

“Hello, world”的由来可以追溯到 The C Programming Language 。在这门编程语言中&#xff0c;它被用作第一个演示程序&#xff0c;向人们展示了在计算机屏幕上输出“Hello world”这行字符串的计算机程序。由于这个演示程序的简洁性和直观性&#xff0c;它成为了许多初学者学…

qt图形化界面开发DAY3

作业&#xff1a; 1> 思维导图 2> 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转…

Android 输入系统介绍

文章目录 一、目的二、环境三、相关概念3.1 输入设备3.2 UEVENT机制3.3 JNI3.4 EPOLL机制3.5 INotify 四、详细设计4.1 结构图4.2 代码结构4.3 InputManagerService模块4.3.1 IMS服务入口4.3.2 IMS初始化4.3.3 IMS启动4.3.4 IMS消息监听 4.4 NativeInputManager模块4.4.1 nativ…

解决Windows 11/10共享打印机无法连接问题0x00000709错误

在解决共享打印机连接问题之前&#xff0c;请确保满足以下几个条件&#xff1a; 确保Windows 11设备和共享打印机的电脑连接到同一个网络。检查网络连接是否稳定。确保共享打印机所连接的计算机处于开机状态。检查共享设置&#xff0c;确保共享打印机在Windows 7计算机上正确设…

Docker安装Nacos2.2.3并鉴权、Prometheus监听Nacos、Grafana监控Nacos【亲测可用】

1、Docker 拉取镜像&#xff1a;docker pull nacos/nacos-server:v2.2.3 2、docker run --env MODEstandalone --name nacos -d -p 8848:8848 -p 9848:9848 -p 9849:9849 nacos/nacos-server:v2.2.3 3、复制镜像中的配置文件 mkdir -vp /home/nacos/logs mkdir -vp /home/n…

Transformer详解【学习笔记】

文章目录 1、Transformer绪论2、Encoders和Decoder2.1 Encoders2.1.1 输入部分2.1.2 多头注意力机制2.1.3 残差2.1.4 LayNorm&#xff08;Layer Normalization&#xff09;2.1.5 前馈神经网路 2.2 Decoder2.2.1 多头注意力机制2.2.2 交互层 1、Transformer绪论 Transformer在做…

使用PyTorch实现去噪扩散模型

在深入研究去噪扩散概率模型(DDPM)如何工作的细节之前&#xff0c;让我们先看看生成式人工智能的一些发展&#xff0c;也就是DDPM的一些基础研究。 VAE VAE 采用了编码器、概率潜在空间和解码器。在训练过程中&#xff0c;编码器预测每个图像的均值和方差。然后从高斯分布中对…

【Spring Boot】项目端口号冲突解决方法,一步到位

启动项目遇到以下问题&#xff1a; Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port. Process finished with …

「Vue3面试系列」Vue 3.0中Treeshaking特性有哪些?举例说明一下?

文章目录 一、是什么二、如何做Vue2 项目Vue3 项目 三、作用参考文献 一、是什么 Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术&#xff0c;专业术语叫 Dead code elimination 简单来讲&#xff0c;就是在保持代码运行结果不变的前提下&#xff0c;去除…

OpenCV入门04:调整图像对比度和亮度

教程开源 本教程开源&#xff0c;地址&#xff1a;https://gitee.com/zccbbg/opencv_study 图像的亮度和对比度说明 亮度&#xff1a; 亮度是指图像中像素的整体明亮程度。在数字图像中&#xff0c;每个像素都有一个灰度值&#xff0c;表示其亮度水平。亮度越高&#xff0c;像…

上海晋名室外暂存柜助力石墨烯材料行业气瓶储存安全

近日上海晋名又有一台室外气瓶暂存柜项目通过验收&#xff0c;此次项目主要用于石墨烯材料行业气瓶的室外暂存。 用户单位创立于2017年&#xff0c;是一家从事石墨烯等新材料技术的科技型高新技术企业。 上海晋名作为一家专注工业安全防护领域&#xff0c;危险化学品安全储存…

基于 Spring Boot 支付宝沙箱支付(Java 版本)

基于 Spring Boot 支付宝沙箱支付&#xff08;Java 版本&#xff09; 步骤第一步&#xff1a;使用支付宝账户登录&#xff0c;打开控制台&#xff0c;进入沙箱环境第二步&#xff1a;配置内网穿透账号第三步&#xff1a;引入支付宝 SDK第四步&#xff1a; 配置 SpringBoot第五步…

Prometheus实战篇:Alertmanager配置概述及告警规则

Prometheus实战篇:Alertmanager配置概述及告警规则 在此之前,环境准备和安装我就不在重复一遍了.可以看之前的博客,这里我们直接步入正题. Alertmanager配置概述 Alertmanager主要负责对Prometheus产生的告警进行统一处理,因此在Alertmanager配置中一般会包含以下几个主要部分…

网安入门14-文件包含(file:// )

​ 什么是文件包含漏洞——来自ChatGPT4 文件包含漏洞是指应用程序在加载文件时&#xff0c;允许用户控制被加载文件的名称&#xff0c;从而导致恶意代码的执行或敏感信息的泄露。文件包含漏洞主要分为两种&#xff1a; 本地文件包含漏洞&#xff08;LFI&#xff09; &#…

无软件消抖的独立式键盘输入实验

#include<reg51.h> // 包含51单片机寄存器定义的头文件 sbit S1P1^4; //将S1位定义为P1.4引脚 sbit LED0P3^0; //将LED0位定义为P3.0引脚 void main(void) //主函数 { LED00; //P3.0引脚输出低电平 while(1) { if(S10) //P1.4引…

VSCode添加Python解释器并安装Python库

目录 一、安装VSCode 二、安装Python解释器 1、安装包链接 2、安装过程 3、测试 4、安装flake8和yapf两个包 &#xff08;1&#xff09;安装flake8包 &#xff08;2&#xff09;安装yapf包 三、VSCode中选择python解释器 一、安装VSCode VSCode安装教程&#xff08;默…

Java设计模式:责任链模式

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…

java基于SSM的旅游论坛设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

Python的安装与卸载【Windows系统】

在 Windows 上安装与卸载 Python Python的安装 下载Python 安装Python 下载完后打开安装包 注意最底下的"Add Python 3.8 to Path"&#xff08;将Python加入环境变量&#xff09;一定要勾选&#xff01;&#xff01;&#xff01;这样就可以免去之后环境配置的烦恼…

掌握视频节奏,玩转剪辑艺术!,轻松调整视频播放速度与秒数的技巧大揭秘

你是否经常觉得视频播放得太快或太慢&#xff0c;无法满足你的观看需求&#xff1f;或者想要控制视频的长度&#xff0c;却不知道该如何下手&#xff1f;今天&#xff0c;我们将为你揭秘几种简单又实用的方法&#xff0c;让你轻松调整视频的播放速度和秒数&#xff01; 首先&a…