uni-app的小知识

发布时间:2022-05-06 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了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标签: <!--  #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;
    }
}
示例图

总结


以上是前端之家为你收集整理的uni-app的小知识 全部内容,希望文章能够帮你解决uni-app的小知识 所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。