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

最新推荐文章于 2023-05-19 16:03:20 发布
最新推荐文章于 2023-05-19 16:03:20 发布
阅读量472 收藏
点赞数
分类专栏： ADO.Net 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SunGuangHuiM/article/details/125140365
版权

一、引用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, // 必填，签名，见附录1
						jsApiList: [
							'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白名单中

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

 还需要将

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

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

热情不减
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-Form-Builder: 为Web表单设计赋予力量
gitblog_00030的博客
04-27 454
Vue-Form-Builder: 为Web表单设计赋予力量 项目地址:https://gitcode.com/openfext/vue-form-builder Vue-Form-Builder 是一个基于Vue.js的强大且灵活的前端组件库，它允许开发者无需深入CSS和HTML代码，即可快速构建复杂的动态表单。这款开源项目旨在提高开发效率，降低维护成本，同时保持高度的定制性和可扩展性。 技术分...
asp.net C# 新微信公众号平台源码
06-14
本平台主要功能是针对微信商家公众号提供与众不同的、有针对性的营销推广服务。通过沐雪微信平台，用户可以轻松管理自己的微信各类信息，对微信公众账号进行维护、开展智能机器人、在线发优惠劵、抽奖、刮奖、派发...
vue-form:用Vue编写的简单Web表单应用程序
03-07
语言形式 一个使用Vue构建的简单Web表单应用程序。 现场演示： : 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint
在.net webform中尝试使用vue+element-ui
myppbird的博客
01-02 5021
引入相关文件 &lt;script src="../Scripts/vue.js"&gt;&lt;/script&gt; &lt;script src="../Scripts/index.js"&gt;&lt;/script&gt; &lt;script src="../Scripts/vue-router.js"&gt;&lt;/scr
vue+webform+webmethord+ef
qq_42802289的博客
11-25 290
webform 在代码管理方面是有优势的。vue+webform+webmethord+ef 让各端人尽其才
vue 公众号扫描_Vue 实现微信 jssdk 扫码, 上传图片
weixin_39615499的博客
01-15 201
@Servicepublic classWxJssdkService implements IWxJssdkService {private Logger logger = LoggerFactory.getLogger(this.getClass());@Overridepublic MapgetJssdkConfig(String url) {Map result = new Map();tr...
ASP.NET WebForm+Vue.js
ASP.NET
01-10 6330
QQ：285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息：CSDN博客)一起学习 ! 参考原文：https://blog.csdn.net/myppbird/article/details/85598154 Vue.js教程：http://www.runoob.com/vue2/vue-tutorial.html Vue.js Ajax教程：http:/...
winfrom 微信扫码支付案例
02-15
使用的轮询的方式来检查支付结果
C#WebForm点赞功能，完美还原微信文章的点赞功能。一整套点赞功能。
09-20
C#WebForm点赞功能，完美还原微信文章的点赞功能。一整套点赞功能。自己下载了几个点赞功能，都是坑，还是要自己研究。已点赞的，打开页面的时候会显示点赞图标，再点击时会取消点赞，点赞数也会自动-1；未点赞的，...
asp.net微信公众平台demo三层webForm
07-03
asp.net微信公众平台demo三层webForm
winform与webform通信
08-31
通过上述方法，VB.NET开发者可以有效地实现WinForm与WebForm之间的通信，从而创建出功能丰富且具有高度交互性的应用程序。不过，每个项目都有其特定需求，所以在实际开发中，应根据具体场景选择最合适的通信策略。
三层架构+webform+c#的后台管理系统
12-05
数据库也同时放在里面，UI用了frame标签可以学习一下，其他的UI是随心做的，求别吐槽
vue项目中实现扫码功能
有问题可关注公众号：前端研究院 后台输入问题回复
11-21 4968
最近在项目中碰见一个打开摄像头扫码的功能，项目最后打包成app，用的是hBuilder打的包，刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。 代码实现： &lt;template&gt; &lt;div class="scan"&gt; &lt;div id="bcid"&gt; &lt;div style="height:40%"&
node+vue+mysql如何去实现微信扫码关注登录？
weixin_51357044的博客
08-07 845
客户端这时候还是在轮询状态，但客户端轮询到相关数据记录里openID以存在后代表用户已经扫码了，最好通过openID在去到用户数据表获取出相关用户信息并且删除了我们生成二维码时候用于判断用户是否扫码的表记录。整的我好尴尬哈哈~】返回的数据都会自带一个openID、以及我们二维码的scene_id，这时候我们可以通过scene_id来修改我们数据库相关数据，把openID也添加进去，login（是用来判断用户有没有进到公众号聊天界面的，也是通过这个可以判断用户关注没关注）SCAN（已经进入公众号聊天界面）..
vue前端移动项目调用微信扫一扫的实现
shiqi236的博客
01-27 1307
vue前端移动项目调用微信扫一扫的实现 1安装插件 npm install weixin-jsapi --save 2在main.js中引入 // 在man.js中引入 import wx from "weixin-jsapi"; // 在man.js中注册 Vue.prototype.wx = wx 具体代码如下 bindingCarCode.vue页面 <template> <div class="moveCarService"> <!--头部--&gt
vue2.0接入微信扫一扫sdk
sxm的博客
01-13 1153
ps:必须传入当前页面的url，有【#】的传【#】后的内容。ps：微信sdk扫一扫功能只能在微信环境使用。3、从后端获取需要的数据后调用wx的sdk。1、安装微信weixin-js-sdk。2、在扫一扫页面引入sdk。
用asp.net的一般处理程序和webform 结合前端vus.js进行渲染数据，实现五金ERP年度总账每个月详细情况
qq_33435149的博客
01-09 424
去年有家深圳的公司叫我过去面试，我没过去，可能想测试一下我的技术。远程帮忙做个五金ERP年度总账每个月详细情况Demo. 给大伙看看效果啊，页面有点华丽的单调。 ...
微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法
热门推荐
两天打鱼三天晒网
06-26 4万+
调用方式1（推荐。用redirect_uri参数指定接收结果的页面，可以是自身url）： <a href="https://www.996315.com/api/scan/?redirect_uri=你的网页完整url">扫描</a> 调用方式2（不推荐）： <a href="https://www.996315.com/api/scan/">扫描</a> 调用方式3（用js调用。本质和方式1、2一样）： <a href="javascr
微信公众号H5页面实现扫一扫功能
最新发布
fuguanyan的博客
05-19 2384
微信公众号H5实现扫码功能
webform 做页面
05-05
WebForm 还提供了一种方便的数据绑定功能，使得开发者可以将数据源与 Web 控件直接绑定，从而自动填充控件的值。此外，WebForm 还支持各种事件处理机制，例如按钮点击事件、页面加载事件等等，使得开发者可以轻松...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值