uni-app开发企业自建应用H5调用企业微信扫一扫

前提条件

1.配置自建应用可信域名,应用链接也必须为可信域名内的。

2.可信域名需要与企业微信备案主体一致,并且必须为备案过的域名。

实现方式

安装

npm install weixin-js-sdk --save

封装方法

代码示例

let jweixin = require('jweixin-module');
//jsdkSignature 为请求后端接口获取授权和签名信息的方法
import { jsdkSignature } from './api.js';
export default {
    initJssdk: function (callback) {
        //获取当前url然后传递给后台获取授权和签名信息  
        let url = window.location.href.split('#')[0]
        jsdkSignature(
            {
                url: url
            },

        ).then(res => {

            jweixin.config({
                beta: true,
                debug: true,
                appId: res.content.appId,//appId,当前企业的appId
                timestamp: res.content.timestamp,
                nonceStr: res.content.nonceStr,
                signature: res.content.signature,
                agentid: 'xxxx',//自建应用的agentId
                jsApiList: [ //这里是需要用到的接口名称  
                    'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
                    'onMenuShareAppMessage', //分享接口  
                    'getLocation', //获取位置  
                    'openLocation', //打开位置  
                    'scanQRCode', //扫一扫接口  
                    'chooseWXPay', //微信支付  
                    'chooseImage', //拍照或从手机相册中选图接口  
                    'previewImage', //预览图片接口  
                    'uploadImage',//上传图片  
                ]
            });
            callback && callback()
        })
    },
    scanQRCode: function (callback) {
        this.initJssdk(function (res) {
            jweixin.scanQRCode({
                needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                success: function (rs) {
                    console.log(rs)
                    alert(JSON.stringify(rs))
                    callback(rs)
                },
                fail: function (res) {
                    alert(JSON.stringify(res))
                    callback(res)
                }
            })
        });
    },
}

注意:需要给后端提供appId及应用密钥。

### UNI-APP 开发微信公众号 (H5) 并集成微信支付 #### 、准备工作 为了在 Uni-app开发微信公众号 H5 应用并集成微信支付功能,需先完成如下准备: 1. **注册微信公众平台账号** - 获取 AppID 和 AppSecret。 2. **配置服务器域名** - 在微信公众平台上设置合法的业务域名、JS接口安全域名等必要信息[^1]。 3. **安装必要的插件和库文件** 对于微信支付的支持,在项目中引入 `wx.js` 文件用于调用微信 JS SDK 接口。同时确保已安装最新版本的 Vue CLI 工具以便更好地管理项目资源。 #### 二、实现流程 ##### ()初始化环境变量 创建 `.env.development` 或者其他适合当前环境下的配置文件来保存敏感数据如 appId, mchId(商户号), key(密钥),这些参数将在后续请求过程中被使用到。 ```bash VUE_APP_WX_APP_ID=your_app_id_here VUE_APP_MCH_ID=your_merchant_id_here VUE_APP_API_KEY=your_api_key_here ``` ##### (二)获取预支付订单编号(prepay_id) 当用户确认付款金额后,前端应向自己的服务端发起 POST 请求传递商品详情给后台处理逻辑;此时后端负责生成交易单据并向 WeChat Pay API 发送 HTTPS 请求以获得 prepay_id 参数作为响应的部分返回给客户端应用。 注意:此过程涉及敏感操作建议采用 HTTPS 协议传输数据,并且严格按照官方文档说明构建签名字符串防止篡改攻击风险。 ##### (三)调起微信内嵌浏览器中的支付控件 收到有效的 prepay_id 后即可按照下述方式组装所需参数并通过 wx.chooseWXPay 方法启动内置 Webview 支付界面供顾客输入密码验证身份从而完成整个购物流程: ```javascript // 假设已经获得了prepay_id和其他必需的信息 const payParams = { "appId": process.env.VUE_APP_WX_APP_ID, "timeStamp": new Date().getTime(), "nonceStr": Math.random().toString(36).substr(2), "package": 'prepay_id=' + prepay_id_from_server,// 注意这里的拼接规则可能依据实际情况有所变化 "signType": "MD5", }; // 计算 sign 字段的具体方法请参照 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 let stringA = Object.keys(payParams) .filter(key => payParams[key]) .map(key => `${key}=${encodeURIComponent(payParams[key])}`) .join('&'); stringA += '&key=' + encodeURIComponent(process.env.VUE_APP_API_KEY); payParams.sign = hex_md5(stringA.toUpperCase()); // 调用 chooseWXPay 进行支付 WeixinJSBridge.invoke( 'getBrandWCPayRequest', payParams, function(res){ if(res.err_msg === "get_brand_wcpay_request:ok"){ alert('支付成功!'); }else{ console.error(`支付失败:${res.err_code}`); } }); ``` 上述代码片段展示了如何利用 JavaScript 实现微信支付的核心部分——即通过 WeixinJSBridge 对象访问原生组件进而引导用户至最终结算环节。值得注意的是实际部署之前还需要针对不同场景做充分测试确保兼容性和稳定性。 #### 三、常见问题排查 如果遇到无法正常唤起支付窗口的情况,请检查以下几点: - 是否正确设置了 jsApiList 数组内的权限项; - 检查 URL 地址是否被列入了公众平台的安全白名单之中; - 确认所有参与计算 Sign 的字段都已被正确定义并且顺序无误; - 测试环境中使用的证书是否有效过期等问题也可能会引起异常行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值