H5 JS 获取微信发票抬头,微信极速开发票方式三

本文详细介绍如何使用微信JS-SDK实现发票标题的选择功能。通过引入特定的JS文件并配置必要的参数,如appId、timestamp、nonceStr和signature,可以初始化微信的JS-SDK。在SDK配置完成后,通过调用chooseInvoiceTitle接口,可以弹出微信内置的发票抬头选择器,让用户选择发票抬头信息。文章提供了完整的代码示例和调用流程说明。

 粗暴点!

这里直接上代码!

引入js:

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
function addWxInvoiceBtn(){
        console.info("here is addWxInvoiceBtn()!");
        var appId =$("#appId").val();
        var timestamp =$("#timestamp").val();
        var nonceStr= $("#nonceStr").val();
        var signature = $("#signature").val();
        console.info("appId" + appId);
        wx.config({
            beta: true,//用于方法未对外公开的情况
            "debug": true,//true 用于调试
            "appId": appId,
            "timestamp": timestamp,
            "nonceStr": nonceStr,
            "signature": signature,
            jsApiList: [
                "chooseInvoiceTitle"
            ]
        });
        wx.ready(function(){
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            doReady();
        });

        wx.error(function(res){
            // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
            console.info(JSON.stringify(res));
        });

    }

    function doReady(){
        console.info(" here is get wx invoice title!");
        wx.invoke('chooseInvoiceTitle', {
            "scene": "1"
        }, function (res) {
            // 这里处理调用结果X``
            console.info("res:" + res);
            console.info("JSON.stringify(res):" + JSON.stringify(res));
            var info = JSON.parse(JSON.stringify(res)).choose_invoice_title_info;
            var infoJ = JSON.parse(JSON.parse(JSON.stringify(info)));
            console.info("infoJ:" + infoJ);
            // alert(res.err_msg + res.choose_invoice_title_info)
            alert("税号:" + infoJ.taxNumber + "抬头:" + infoJ.title);
            var taxNumber = info.taxNumber;
            var title = info.title;
            var type = info.type;
            console.log(res);
        })
    }

参考链接:

微信js-sdk

https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6

微信极速开发票文档https://developers.weixin.qq.com/doc/offiaccount/WeChat_Invoice/Quick_issuing/Interface_Instructions.html

 

 

UniApp 开发 H5 项目时,在微信浏览器内想要获取用户的微信登录手机号,可以借助微信JSSDK(JavaScript 接口安全模式)。首先,你需要在微信公众平台申请小程序,并配置好服务器域名和 AppID。然后按照以下步骤操作: 1. **引入 SDK**:在你的 H5 页面的 `<head>` 标签中引入微信的 JavaScript 文件: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" charset="utf-8"></script> ``` 2. **注册回调函数**:在 window.onload 或其他适当的地方,设置 JSSDK 的授权回调,当用户同意授权后会触发这个函数: ```javascript wx.config({ debug: false, // 是否开启调试模式,默认关闭 appId: '你的AppID', // 小程序的唯一标识 timestamp: '', // 调用接口接口返回的时间戳 nonceStr: '', // 随机字符串,签名中的noncestr字段 signature: '', // 签名,见下方说明 jsApiList: ['getPhoneNumber'] // 使用的JSAPI列表,包含需要的权限 }); wx.ready(function () { wx.getUserInfo({ success: function (res) { var phoneNumber = res.userInfo.phone_number; // 获取手机号 console.log(phoneNumber); } }); }); ``` 3. **生成签名**:每次调用 JSSDK 功能都需要生成签名,这里通常由后端服务提供,包括 `appId`、`timestamp`、`nonceStr` 和一个随机字符串(可以自动生成)。 4. **用户授权**:当用户点击“登录”按钮,调用 `wx.login()` 启动授权流程,用户同意后会跳转到微信的授权页面。用户授权后,会自动回到你的H5页面并触发 `ready` 回调。 注意:在生产环境中,为了安全,建议使用后端验证签名和处理用户信息,而不是直接在前端展示。另外,微信对手机号的获取有限制条件,如只在特定场景下提供。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值