uni-app的小知識(shí)

判斷是否在微信瀏覽器中

// wechat.js 
//封裝成方法方便引用 
    isWechat:()=>{
        let ua = window.navigator.userAgent.toLowerCase();
        if( ua.match(/micromessenger/i) == 'micromessenger' ) {
            //是在微信瀏覽器
            return true
        }else{
            return false
        }
    }
//其他需要引用的頁(yè)面
   import WechatObjecy from './wechat' // 引入該文件
   const isWechat = WechatObjecy.isWechat()
   if (isWechat) {
      console.log('微信內(nèi)')
   }

h5 判斷當(dāng)前所處環(huán)境,是否在小程序內(nèi),還是其它

首先,你的H5項(xiàng)目需要安裝微信sdk npm install weixin-js-sdk --save
其次,在頁(yè)面引用 import wx from "weixin-js-sdk"
最主要的來了 想要判斷H5所處環(huán)境的話,即:

// main.js
js_sdk.miniProgram.getEnv((res) => {
  console.log(res)
  const miniprogram = res.miniprogram
  window.isApplet = miniprogram
})
//然后你的每個(gè)需要做判斷的頁(yè)面就可也這樣使用啦
 import WechatObjecy from './wechat' // 引入該文件
 const isWechat = WechatObjecy.isWechat()
 if ( isWechat && window.isApplet) {
       alert('小程序環(huán)境')
 } else {
       alert('非小程序環(huán)境')
 }

或許還可以參考https://blog.csdn.net/weixin_40762926/article/details/110518787


uniapp 中的 “條件編譯”

- 基礎(chǔ)用法:
// #ifdef %PLATFORM%
    %PLATFORM%為平臺(tái)名稱
    這里的內(nèi)容只會(huì)編譯在該平臺(tái)
注意前面還有兩個(gè)雙斜杠
// #endif
- 具體解釋:
#ifdef : if defined  僅在某個(gè)平臺(tái)編譯

#ifndef : if not defined  在除里該平臺(tái)的其他編譯

#endif : end if 結(jié)束條件編譯

%PLATFORM% : 需要編譯的平臺(tái),上面的MP就是各個(gè)小程序的意思
支持平臺(tái)

可以這樣用:

// #ifdef MP
    代碼塊
// #endif
可以看到其實(shí)以#ifdef開頭 #endif結(jié)尾,但是注意一下就會(huì)發(fā)現(xiàn)前面雙斜杠,這里是注釋標(biāo)記。在各個(gè)代碼塊里的注釋不一樣,注釋標(biāo)記就要切換掉。切記要注釋標(biāo)記?。?!
js:  // #ifdef
tag標(biāo)簽: <!--  #ifdef  -->
css樣式: /*  #ifdef  */

短信鏈接跳轉(zhuǎn)小程序功能

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

效果過程分析

1、從短信到網(wǎng)頁(yè)
2、從網(wǎng)頁(yè)到小程序

具體步驟操作

1、微信公眾平臺(tái)→工具→微信生成小程序URL Scheme


1、

2、

2、在H5項(xiàng)目建立空白頁(yè)面,把weixin鏈接改成你上面得到的鏈接

<template>
  <div class="webView">
     <!-- 跳轉(zhuǎn)小程序 -->
  </div>
</template>

<script>
export default {
  mounted () {
    // 關(guān)鍵邏輯
    location.href = 'weixin://dl/####/####'
  }
}
</script>

<style>
</style>

3、將H5頁(yè)面地址 生成鏈接 粘貼到短信內(nèi)即可
這是我的方式,您也可以參考該方式:網(wǎng)頁(yè) 階段 在開發(fā)者工具中設(shè)置(需付費(fèi))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 {/*設(shè)置table左邊邊框*/
      border-left: 1px solid #DDD;
    }
    .u-table .u-tr .u-th:last-child,.u-table .u-tr .u-td:last-child {/*設(shè)置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{/*設(shè)置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;
    }
}
示例圖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容