webForm 与 Vue 做微信公众号做扫一扫功能

2023-10-11 01:10
文章标签 功能 微信 vue 公众 一扫 webform

本文主要是介绍webForm 与 Vue 做微信公众号做扫一扫功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、引用JS

webForm 是在 aspx页面引用的微信的JS与Css

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script><script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

Vue 框架是 需要引用一个 weixin-jsapi 插件

// 下载安装命令
npm install weixin-jsapi --save
// 在man.js中引入 weixin-jsapi
import wx from "weixin-jsapi";

二、在js中配置wx.config 与 wx.ready

wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: 'wx2ba651e123456ca', // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳(随便填写)nonceStr: noncestr, // 必填，生成签名的随机串(随便填写)signature: signature, // 必填，签名，见附录1jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: function (res) {var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果if (typeof (result) != "undefined") {//alert(result);扫码成功后返回的结果，二维码条码的内容window.location.href = result;} else {alert('扫描失败!');}}});});wx.error(function (res) {//alert(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});

重要配置的是wx.config中的内容，配置不对打不开扫一扫，signature 我是后台调用接口获取的

后台写的一个wxHelper.cs 类，返回 的是三个参数 timestamp  、noncestr、signature


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Text;
using System.Text.RegularExpressions;
using System.IO;
using System.Collections.Generic;
using System.Net;
using FoodSDC.DAL;/// <summary>
/// wxHelper 的摘要说明
/// </summary>
public partial class wxHelper
{/// <summary>/// 签名生成时间/// </summary>public static string dtime = "";/// <summary>/// 签名提交url地址/// </summary>public static string url = "";/// <summary>/// 生成签名的时间戳/// </summary>public static string time = "";/// <summary>/// 生成签名的随机串/// </summary>public static string randstr = "";/// <summary>/// 签名/// </summary>public static string signstr = "";/// <summary>/// appid 自己公众号的/// </summary>private readonly static string appid = "wx2ba132456421ca";/// <summary>/// secret /// </summary>private readonly static string secret = "e416546546546464613fc";/// <summary>/// AccessToken(生成AccessToken(返回信息))/// </summary>public static string access_token = "";public wxHelper(){//// TODO: 在此处添加构造函数逻辑//}/// <summary>/// 获得accesstoken/// </summary>/// <returns></returns>public static string AccessToken(){return SendRequest("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + secret, Encoding.UTF8);}/// <summary>/// 根据accesstoken获得ticket/// </summary>/// <returns></returns>public static string GetTicket(){access_token = AccessToken();string url1 = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token.Substring(access_token.IndexOf(':') + 2, access_token.IndexOf(',') - 3 - access_token.IndexOf(':')) + "&type=jsapi";string requstStr = SendRequest(url1, Encoding.UTF8);string ticket = requstStr.Substring(requstStr.IndexOf("ticket") + 9, requstStr.LastIndexOf(',') - 1 - requstStr.IndexOf("ticket") - 9);// 获得json参数没搞，懂的自己优化return ticket;}/// <summary>/// 获取jssdk所需签名/// </summary>/// <param name="url"></param>/// <returns></returns>public static string GetSignature(string link){DateTime dti = DateTime.Now;dtime = dti.ToString("yyyy-MM-dd HH:mm:ss");string noncestr = dti.ToString("yyyyMMddHHmmss");int timestamp = 1510124527;string ticket = GetTicket();time = "1510124527";randstr = noncestr;string string1 = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + link;url = string1;//string signature = System.Web.FormsAuthentication.HashPasswordForStoringInConfigFile(string1, "SHA1");string signature = Sha1Signature(string1, Encoding.UTF8);return signature.ToLower(); // 生成后一定转换为小写}/// <summary>/// Sha1签名/// </summary>/// <param name="str">内容</param>/// <param name="encoding">编码</param>/// <returns></returns>private static string Sha1Signature(string str, Encoding encoding = null){if (encoding == null) encoding = Encoding.UTF8;var buffer = encoding.GetBytes(str);var data = System.Security.Cryptography.SHA1.Create().ComputeHash(buffer);StringBuilder sub = new StringBuilder();foreach (var t in data){sub.Append(t.ToString("x2"));}return sub.ToString();}/// <summary>   /// Get方式获取url地址输出内容   /// </summary> /// <param name="url">url</param>   /// <param name="encoding">返回内容编码方式，例如：Encoding.UTF8</param>   public static string SendRequest(string url, Encoding encoding){HttpWebRequest webRequest = (HttpWebRequest)WebRequest.Create(url);webRequest.Method = "GET";HttpWebResponse webResponse = (HttpWebResponse)webRequest.GetResponse();StreamReader sr = new StreamReader(webResponse.GetResponseStream(), encoding);string str = sr.ReadToEnd();return str;}/// <summary>/// 将值记录到数据库中防止出现调用限制/// </summary>/// <param name="url"></param>public static void SignatureAdd(string link){time = "";randstr = "";signstr = "";signstr = GetSignature(link);string sqlI = "insert into wxinfo(timestamp,nonceStr,signature,time,url,link,access_token) values('" + time + "','" + randstr + "','" + signstr + "','" + dtime + "','" + url + "','" + link + "','" + access_token + "') ";int count = SQLHelper.ExecuteNonQuery_SY(sqlI, null);}/// <summary>/// 获得微信权限信息，格式：时间戳,随机数,签名/// </summary>/// <param name="link"></param>/// <returns></returns>public static string GetWXInfo(string link){bool result = false;// 获得最后一条新增数据string sql = " select top 1 * from wxinfo where link='" + link + "' order by id desc  ";//DataTable dt = DbHelperMySQL.GetTable(sql);DataTable dt = SQLHelper.ExecuteDataSet_SY(sql, null).Tables[0];if (dt != null){if (dt.Rows.Count > 0){// 当前时间小于获得获得tincket时间时调用数据库中if (DateTime.Now < Convert.ToDateTime(dt.Rows[0]["time"].ToString()).AddSeconds(7200)){time = dt.Rows[0]["timestamp"].ToString();randstr = dt.Rows[0]["nonceStr"].ToString();signstr = dt.Rows[0]["signature"].ToString();url = dt.Rows[0]["url"].ToString();result = true;}}}if (result == false)SignatureAdd(link);return time + "," + randstr + "," + signstr;}}

将参数配置到wx.config中，如果还是打不开，就把 wx.config 中的 debug: true 进行调试 返回的错误信息会alert 出来，自己在做的时候遇到的两个问题，

第一个是，登录https://mp.weixin.qq.com/cgi-bin/safecenterstatus?action=view&t=setting/safe-index&token=2056975201&lang=zh_CN

 将后台访问接口的服务器ip地址加入到微信公众号IP白名单中

第二个 是 将 前台网站的 域名 配置到微信公众号中

 还需要将

 这个文件 放在前端文件的目录中

 其他问题，看微信开发文档基本都有 概述 | 微信开放文档 

这篇关于webForm 与 Vue 做微信公众号做扫一扫功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/184443。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2