H5部分记录
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>