uni-app的小知识

判断是否在微信浏览器中

// 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标签: 
css样式: /*  #ifdef  */

短信链接跳转小程序功能

参考微信官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.

效果过程分析

1、从短信到网页
2、从网页到小程序

具体步骤操作

1、微信公众平台→工具→微信生成小程序URL Scheme


1、

2、

2、在H5项目建立空白页面,把weixin链接改成你上面得到的链接






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

              
                {{item}}
              
              
                {{i.POLICY_YEAR}}
                {{i.AGE}}
                -
                {{(i.CASH_VALUE / 10000).toFixed(2)}}
                -
                -
                -
              

//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;
    }
}
示例图

你可能感兴趣的:(uni-app的小知识)