判断是否在微信浏览器中
// wechat.js
//封装成方法方便引用
isWechat:()=>{
let ua = window.navigator.userAgent.toLowerCase();
if( ua.match(/micromessenger/i) == 'micromessenger' ) {
//是在微信浏览器
return true
}else{
return false
}
}
//其他需要引用的页面
import WechatObjecy from './wechat' // 引入该文件
const isWechat = WechatObjecy.isWechat()
if (isWechat) {
console.log('微信内')
}
h5 判断当前所处环境，是否在小程序内，还是其它
首先，你的H5项目需要安装微信sdk npm install weixin-js-sdk --save
其次，在页面引用 import wx from "weixin-js-sdk"
最主要的来了 想要判断H5所处环境的话，即：
// main.js
js_sdk.miniProgram.getEnv((res) => {
console.log(res)
const miniprogram = res.miniprogram
window.isApplet = miniprogram
})
//然后你的每个需要做判断的页面就可也这样使用啦
import WechatObjecy from './wechat' // 引入该文件
const isWechat = WechatObjecy.isWechat()
if ( isWechat && window.isApplet) {
alert('小程序环境')
} else {
alert('非小程序环境')
}
或许还可以参考https://blog.csdn.net/weixin_40762926/article/details/110518787
uniapp 中的 “条件编译”
- 基础用法：
// #ifdef %PLATFORM%
%PLATFORM%为平台名称
这里的内容只会编译在该平台
注意前面还有两个双斜杠
// #endif
- 具体解释：
#ifdef ： if defined 仅在某个平台编译
#ifndef ： if not defined 在除里该平台的其他编译
#endif ： end if 结束条件编译
%PLATFORM% : 需要编译的平台，上面的MP就是各个小程序的意思
支持平台
可以这样用：
// #ifdef MP
代码块
// #endif
可以看到其实以#ifdef开头 #endif结尾，但是注意一下就会发现前面双斜杠，这里是注释标记。在各个代码块里的注释不一样，注释标记就要切换掉。切记要注释标记！！！
js： // #ifdef
tag标签： <!-- #ifdef -->
css样式： /* #ifdef */
短信链接跳转小程序功能
参考微信官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.
效果过程分析
1、从短信到网页
2、从网页到小程序
具体步骤操作
1、微信公众平台→工具→微信生成小程序URL Scheme
1、
2、
2、在H5项目建立空白页面，把weixin链接改成你上面得到的链接
<template>
<div class="webView">
<!-- 跳转小程序 -->
</div>
</template>
<script>
export default {
mounted () {
// 关键逻辑
location.href = 'weixin://dl/####/####'
}
}
</script>
<style>
</style>
3、将H5页面地址 生成链接 粘贴到短信内即可
这是我的方式，您也可以参考该方式：网页 阶段 在开发者工具中设置（需付费）https://blog.csdn.net/qq_31102733/article/details/112637351?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base
table 圆角问题
//html
<u-table>
<u-tr>
<u-th v-for='(item,index) in list' :key="index">{{item}}</u-th>
</u-tr>
<u-tr v-for="(i,j) in PolicyValueItem.DATALIST" :key="j">
<u-td >{{i.POLICY_YEAR}}</u-td>
<u-td>{{i.AGE}}</u-td>
<u-td>-</u-td>
<u-td>{{(i.CASH_VALUE / 10000).toFixed(2)}}</u-td>
<u-td>-</u-td>
<u-td>-</u-td>
<u-td>-</u-td>
</u-tr>
</u-table>
//css
.policy-interest{
.u-table{
width: 100% !important;
border: none !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.u-table .u-tr .u-th:first-child,.u-table .u-tr .u-td:first-child {/*设置table左边边框*/
border-left: 1px solid #DDD;
}
.u-table .u-tr .u-th:last-child,.u-table .u-tr .u-td:last-child {/*设置table右边边框*/
border-right: 1px solid #DDD;
}
.u-table .u-tr .u-td:first-child,
.u-table .u-tr .u-td:nth-child(2),
.u-table .u-tr .u-td:nth-child(3),
.u-table .u-tr .u-td:last-child{/*设置table表格每列底部边框*/
border-bottom: 1px solid #DDD;
}
.u-th{
border: 1px solid #95C8FF;
}
.u-table .u-tr:first-child .u-th {
background: #F5FAFF;
border-bottom: 1px solid #95C8FF !important;
}
.u-table .u-tr:first-child .u-th:first-child {
border-top-left-radius: 12px;
border-left: 1px solid #95C8FF;
}
.u-table .u-tr:first-child .u-th:last-child {
border-top-right-radius: 12px;
border-right: 1px solid #95C8FF !important;
}
.u-table .u-tr:last-child .u-td:first-child {
border-bottom-left-radius: 12px;
}
.u-table .u-tr:last-child .u-td:last-child {
border-bottom-right-radius: 12px;
}
}
示例图
