需要在路由中配置

 "h5":{
         "titleNView":false
                        }

    {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "车行APP",
                // 编译到h5平台时去掉页面标题
                        "h5":{
                            "titleNView":false
                        }
            }
        }

┌─components            uni-app组件目录
│  └─comp-a.vue        可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录
├─common                公共资源（自建）
├─api                   请求封装（自建）
├─store                 状态管理（自建）
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

HTML

<template>
    <view class="content">
        <input v-model="val" />
        <button @click="clickPay">点我扣款</button>
    </view>
</template>

JavaScript

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                val: 0.1
            };
        },
        methods: {
            clickPay() {
                let _this = this;

                //1.调用登录 获取code
                uni.login({
                    provider: 'weixin',
                    success(res) {
                        //2.调用微信官方接口,拿code去换openid
                        uni.request({
                            url: 'https://api.weixin.qq.com/sns/jscode2session',
                            data: {
                                appid: 'wx4f27fd51b9a7bfda',
                                secret: '1a9bfee5a8155f0020c5857cd9038674',
                                js_code: res.code,
                                grant_type: 'authorization_code' //固定值
                            },
                            success(obj) {
                                console.log(obj.data.openid, '用户真实openid............');
                                console.log({
                                    openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                    name: '电吹风体验卷',
                                    money: _this.val,
                                    code: '851230012314156910598',
                                    payType: 1,
                                    clientIp: '127.0.0.1'
                                });

                                //3.调用后端接口 拿到所需要的数据
                                uni.request({
                                    url: 'http://api.100qhl.com:5024/v1/order/createOrder',
                                    method: 'POST',
                                    data: {
                                        openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                        name: '好洗的地毯',
                                        money: Number(_this.val),
                                        code: '8512300123149105999015',
                                        payType: 1,
                                        clientIp: '127.0.0.1'
                                    },
                                    success(res) {
                                        console.log(res, '后端返回参数完毕.....');

                                        //4.调用官方接口扣钱!!!!

                                        uni.requestPayment({
                                            timeStamp: res.data.data.timeStamp,
                                            nonceStr: res.data.data.nonceStr,
                                            package: res.data.data.packageValue,
                                            signType: res.data.data.signType,
                                            paySign: res.data.data.paySign,
                                            complete(res) {
                                                console.log(res,
                                                    '扣款返回的结果.~~~~~~~~~~~~~~~~~');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        }
    };
</script>

第一步： 发行->网站-PC Web或者手机H5

第二步：配置Web 在manifest.json中如下配置

第三步：填写标题和网站域名

配置踩坑：H5端需要配置设置一下全局CSS不然会出现2个页面标题，如下：

需要在App.vue配置

uni-page-head {
        display: none;
    }

css命名不能以XXX.XXX.XXX方式否则会导致样式引入提示找不到，但是直接访问又可以找到，这个时候只需要吧样式名字改掉xxx.xxx然后再index.html里面修改一下css样式名就行了

使用 #ifndef来判断是否兼容

// 兼容处理
// #ifndef H5 || APP-PLUS || MP-ALIPAY
    //获取小程序悬浮球信息
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.menuButtonInfo = menuButtonInfo
// #endif