首先明确，是在微信环境下的，基于微信服务号的H5页面，与纯H5页面有区别

目录

一、微信支付

二、JS-SDK

三、wxconfig

四、页面滚动

---

一、微信支付

微信官方提供的支付产品列表如下：

如果你的页面跟我一样，是运行在微信环境的，那么就要使用JSAPI支付，而不是H5支付！这个浪费了我一天时间...

支付无需事先使用wx.config注册，直接使用下方api拉起微信支付即可

注意：参数全部由后端与微信交互生成返回，不需要撕逼，就是后端的工作，timeStamp参数要转为字符串，不要用数字格式，否则ios系统会报错

onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "wx2421b1c4370ec43b",     //公众号ID，由商户传入     
        "timeStamp": "1395712654",     //时间戳，自1970年以来的秒数     
        "nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串     
        "package": "prepay_id=wx21201855730335ac86f8c43d1889123400",
        "signType": "RSA",     //微信签名方式：     
        "paySign": "........." //微信签名 
    },
    (res) => {
        let msg = ''
	    if (res.err_msg == "get_brand_wcpay_request:ok") msg = '支付成功'
		if (res.err_msg == "get_brand_wcpay_request:cancel") msg = '取消支付'
		if (res.err_msg == "get_brand_wcpay_request:fail") msg = '支付失败'
        uni.showModal({
			showCancel: false,
			content: msg
		})
    });
}

不得不说一下微信支付文档，接口倒是很全，demo也有，但是各种支付产品，前后端文档没分离，真的搞不清哪个用哪个啊...

二、JS-SDK

JS-SDK个人理解：微信封装的公共方法，例如 chooseImage 等，这些方法在原生浏览器中是没有实现的，专为微信开发使用的，可以理解为 uniapp 做的封装

如果不使用uniapp，调用chooseImage等方法，需要使用 JS-SDK

如果使用了 uniapp 开发，无需注册 JS-SDK也可以调用一些方法，具体可以看uniapp文档对H5的支持情况（扫一扫之类的不行）

npm安装后在main.js 页面引用

import wxSDK from 'weixin-js-sdk'
Vue.prototype.wxSDK = wxSDK

三、wxconfig

如果你需要使用 微信扫一扫 等功能，uniapp是没有实现H5的，必须安装 JS-SDK，然后在App.vue使用 wxconfig 注册你要用到的所有方法

const request = uni.$u.http
request.post('/api/WechatPay/GetJsSdkWeChatPayParametersurl='+encodeURIComponent('这是你的H5域名')).then(res=>{
		this.wxSDK.config({
			debug: true,
			appId: res.data.appId, 
			timestamp: res.data.timeStamp,
			nonceStr: res.data.nonceStr,
			signature: res.data.signStr,
			jsApiList: [
			    'chooseImage',
			    'scanQRCode'
			] // 需要使用的JS接口列表
		});
	})

四、页面滚动

在微信开发者工具里调试，使用鼠标滚轮可以上下滚动，但实际页面都不支持滚动，必须用scroll-view进行包裹

如果你是使用uniapp开发，使用了 自带的 tabBar ，可以在 tabBar 页面中这么写

<scroll-view 
    scroll-y="true" 
    style="height:calc(100vh - var(--window-bottom));width:100%;"  
    @touchmove.stop
	@scrolltolower="onScrollOver">
</scroll-view>

var(--window-bottom) 是 uniapp 提供的底栏高度

@touchmove.stop  防止控制台报错

@scrolltolower="onScrollOver" 是触底事件

scroll-view 可以直接作为根节点，外层不嵌套 view 标签也是可以的