开发企业微信中的内嵌h5时如何开发与调试

前言:

        在我们的项目中,开发企业微信内部的项目的话,分为两种,1种是直接开发企业微信的小程序,另一种则是企业微信内嵌我们的H5界面,我们这里讲一讲企业微信内嵌h5的方法与注意点。

1、开发h5项目

这点没有什么特别的,正常开发我们的移动端项目使用vant等框架都行,如果需要调用企业微信的扫一扫等功能,需要引入企业微信支持的 js-sdk 的方法,前端引入插件,

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
wx.config({
    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
    timestamp: '', // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx.scanQRCode({
    desc: 'scanQRCode desc',
    needResult: 0, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
    success: function(res) {
        // 回调
		var result = res.resultStr;//当needResult为1时返回处理结果
    },
    error: function(res) {
        if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
        }
    }
});

开发时如何判断是否为企业微信环境

js判断当前是否是企业微信环境,微信环境_js判断企业微信-CSDN博客文章浏览阅读370次,点赞7次,收藏9次。js判断当前是否是企业微信环境,微信环境_js判断企业微信https://blog.csdn.net/qq_41619796/article/details/135508079?spm=1001.2014.3001.5501

2、测试h5项目

1、h5项目发布上线后,拿到线上链接,直接在有企业微信权限的账号里面,用企业微信打开该链接

2、也可以用微信开发者工具的,公众号网页项目中,在地址栏直接输入线上地址查看,不过这里无法模拟到企业微信环境

3、部署h5项目

前提:1、需要企业微信的管理员权限;2、接口需要添加到企业微信的安全域名中

更多资料:

        按快捷键 ctrl + alt + shift + D,进入调试模式;

常见问题 - FAQ - 接口文档 - 企业微信开发者中心icon-default.png?t=N7T8https://developer.work.weixin.qq.com/document/path/90315#%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1Windows%E7%89%88%E6%9C%AC%E8%B0%83%E8%AF%95

### 实现微信小程序中嵌入H5页面以完成支付功能 #### 使用 `web-view` 组件加载 H5 页面 为了在微信小程序内实现H5页面的支付功能,可以利用微信小程序提供的 `web-view` 组件来加载外部网页。此组件允许开发者像HTML中的iframe一样,在小程序内部展示第三方网站的内容[^1]。 ```html <web-view src="https://example.com/payment"></web-view> ``` 这里假设 `https://example.com/payment` 是一个支持移动设备上处理付款流程的安全HTTPS站点链接。需要注意的是,只有经过认证的小程序才能使用该组件,并且域名需提前配置到微信公众平台设置里。 #### 处理支付逻辑于服务器端 考虑到安全性和可靠性因素,实际的支付操作应该放在服务器端执行而不是前端直接发起请求。当用户点击确认按钮后,客户端应向自己的API发送订单详情数据,由后台负责调用微信支付接口并返回预支付交易会话信息给前端用于唤起原生支付控件显示给用户。 对于H5页面来说,则可以通过WeChat JS-SDK 来调用支付方法: ```javascript // 前端 JavaScript 调用示例 function onBridgeReady(data){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": data.appId, //公众号名称,由商户传入 "timeStamp":data.timeStamp, //间戳,自1970年以来的秒数 "nonceStr": data.nonceStr, //随机串 "package": data.packageValue,//预支付交易会话标识 "signType":"MD5", //微信签名方式: "paySign":data.paySign //微信签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){}// 使用以上方式判断前端回调的结果 } ); } if (typeof WeixinJSBridge === "undefined"){ document.addEventListener('WeixinJSBridgeReady',onBridgeReady,false); }else{ onBridgeReady(); } ``` 上述代码片段展示了如何通过JavaScript桥接器微信浏览器环境交互从而启动支付过程[^2]。 #### 解决可能出现的问题 如果遇到任何问题或错误提示,建议开启调试模式以便更好地理解具体原因所在。例如,在uni-app框架下开发的应用可能会因为跨域资源共享(CORS)策略或者其他兼容性方面的原因而出现问题。此可参照官方文档调整相应参数或者尝试其他解决方案[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值