关于uni-app打包h5的问题(微信公众号内嵌h5)

关于uni-app打包h5的问题

总结下,打包时的问题

1.版本更新管理器uni.getUpdateManager()

2.关于定位

详见:https://uniapp.dcloud.io/api/location/location 下面的注意
H5:在较新的手机浏览器上,H5 端获取定位信息,要求部署在 https 服务上,本地预览(localhost)仍然可以使用 http 协议。
H5:国产安卓手机上,H5若无非定位,检查手机是否开通位置服务、GPS,ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
H5:安卓手机在原生App内嵌H5时,无法定位需要原生App处理Webview。
H5:无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候,位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败。
H5:微信公众号可使用微信js sdk,

3.关于uni.login

https://uniapp.dcloud.io/api/plugins/login下面的注意:
微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见
普通浏览器上实现微信登陆,并非开放API,需要向微信申请,仅个别开发者有此权限
H5平台的其他登陆,比如QQ登陆、微博登陆,uni-app未封装,请在条件编译里按普通H5写法编写。

4.关于uni.requestPayment()

https://uniapp.dcloud.io/api/plugins/payment?id=h5-payment
要专门去微信平台申请h5支付

5.uni.share()

https://uniapp.dcloud.io/api/plugins/share
这个api只是微信小程序和app支持
微信小程序是只支持分享链接到聊天界面,朋友圈需要在微信小程序中生成canvas绘图并保存到本地,然后发表在朋友圈.

6.授权uni.authorize

https://uniapp.dcloud.io/api/other/authorize
h5不支持

7.组件 input

https://uniapp.dcloud.io/component/input

8.组件picker

https://uniapp.dcloud.io/component/picker
h5不支持省市区选择器(mode = region)

9.如果写了不存在的东西,他不会报错只是不继续执行代码(就是下一条语句不执行)

10.在组件上绑定了一个数组,在父页面上没有定义这个数组会导致组件渲染特别慢.

### 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 的字段都已被正确定义并且顺序无误; - 测试环境中使用的证书是否有效过期等问题也可能会引起异常行为。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值