526互联

H5部分记录

发布时间 2023-08-18 12:12:56作者: 丶乔

1.本地代理

uni编写的h5为例

//例
devServer: {
    proxy: {
      '/API': {    // 定义代理的名称
        changeOrigin: true,  // 是否启动代理
        target: 'http://xijipan.dev.grdoc.org', // 代理的域名　　　　　
        pathRewrite: {'^/API','/'} 
// 如果你的真实的api路径中没有/API这一个路径，把这句加上，如果本来就有/API这一路径的话，这句一定要去掉，要不然会导致域名找不到的
      }
    }
  },

………………………………………………………………………………………………………………………………………………………………
//manifest.json页
  "h5": {
    "template": "template.h5.html",
    "router": {
      "mode": "history",
      "base": "/h5/"
    },
    "sdkConfigs": {
      "maps": {}
    },
    "async": {
      "timeout": 20000
    },
    "devServer": {
      "port": 10002, //端口号
      "disableHostCheck": true,
      "proxy": {
        "/api": {
          "target": "https://miapp.chuntaoyisheng.com", //目标接口域名
          "changeOrigin": true, //是否跨域
          "secure": false // 设置支持https协议的代理
        }
      },
      "https": true
    },
    "domain": "m.cqsjwzx.com"
  },
  
  //request页
   uni.request({
      //#ifdef  MP-WEIXIN
      url: host + url,
      //#endif

      //#ifdef  H5
      url: `/${url}`,
   。。。。
   })

2.隐藏顶部导航栏

想要隐藏该导航条的话只需要在应用文件 App.vue 中的样式中添加公用css：
/* #ifdef H5 */ uni-page-head { display: none; } /* #endif */

3.使用腾讯地图导航

onst lat = latitude+","+longitude;
  let addrStr = `coord:${lat};title:${name};addr:${address}&referer=myapp`
  setTimeout(() => {
      location.href = `//apis.map.qq.com/uri/v1/marker?marker=${addrStr}`;
  },100)

4.微信浏览器中的H5调用扫码功能

在uni-app官网上发现uni-app不支持H5扫码功能,但是下面的提示说明可以通过微信的JS-SDK实现扫码功能

1.引入sdk

静态文件html中     <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.配置config信息

app中调用该函数注册config信息 签名需要后端提供接口获取（参数为回调地址）

// 获取客户端Ticket签名数据
async getConfigInfo() {
  const res = await getTicket({
    url: encodeURIComponent(window.location.href),
  });
  console.log(jWeixin, "-00----------");
  jWeixin.config({
    // jsApiList 不能为空，为空部分机型会签名失败
    jsApiList: ["updateAppMessageShareData", "scanQRCode", "checkJsApi"],
    appId: res.appId,
    nonceStr: res.nonceStr,
    timestamp: res.timestamp,
    signature: res.signature,
    openTagList: ["wx-open-launch-weapp"],
    // debug: process.env.NODE_ENV === "development",
    debug: false,
  });
  jWeixin.error(function (res) {
    console.log(res, "失败-=-----");
    location.reload();
    // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名
  });
},
3.事件调用扫码
  //扫码
  handleCanCode() {
    console.log("扫码");
    jWeixin.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: (res) => {
        console.log(res, "结果");
        var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
        //扫码结果包含签名参数
        if (result.indexOf("state=XZ_REGISTER") > -1) {
          this.openRegister();
        }
      },
      fail: (response) => {
        console.log("调用扫码失败");
        alert(" wx.scanQRCode失败");
      },
    });
  },

5.h5使用vconsole

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
   var vConsole = new window.VConsole();
</script>