記錄--開發uniapp nvue App+微信小程式，我踩過的坑（ 純乾貨 ）

来源:https://www.cnblogs.com/smileZAZ/archive/2022/10/13/16789224.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 最近接了個項目，採用uniapp的nvue開發安卓和ios端+小程式端，第一次開發nvue，對於css佈局這塊，還是踩了很多坑。以及一些uniapp的Api在nvue中也無法使用。文章中也收錄了一些我在項目中使用的一些方法，比如富文本解析 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

最近接了個項目，採用uniapp的nvue開發安卓和ios端+小程式端，第一次開發nvue，對於css佈局這塊，還是踩了很多坑。以及一些uniapp的Api在nvue中也無法使用。文章中也收錄了一些我在項目中使用的一些方法，比如富文本解析、App綁定微信等，大家可以參考下。

1、註意事項

1. nvue僅支持flex佈局

// 預設佈局為(不需要寫)
display: flex;
flex-direction: column;

// 橫向局部改為
flex-direction: row;

2. class 進行綁定時只支持數組語法

<template>
  // 支持的數組寫法
  <text :class="[isError ? 'isError' : 'isRight']"></text>

  // 不支持對象寫法
  <text :class="{isError}"></text>
</template>

3. 只有<text>標簽可以設置字體大小，字體顏色

<template>
  // 可以修改字體大小和顏色
  <text class='text'>文本內容</text>

  // 不可以修改字體大小和顏色
  <view class='text'>文本內容</view>
</template>

<style>
.text {
  color: red;
  font-size: 28rpx;
}
</style>

盒模型

  • nvue盒模型的 box-sizing 預設為 border-box；
  • 在 Android 平臺，overflow只支持 hidden；
  • 在 ios 上，overflow支持 hidden 和 visible，預設是 visible。

2、對CSS的限制(常用)

// 不支持的CSS
margin: auto;
display: ...;
content: ...;
animation: ...;
width: vw、%;
height: vh、%;
background-image: ...;

// 不支持的CSS屬性
border-radius: 百分比無效;

3、多端單行/多行文本溢出

// 文本溢出
@mixin line($lineNum, $width: 100%) {
  /* 一行時 */
  @if $lineNum == 1 {
    // App端
    /* #ifdef APP-PLUS */
    lines: 1; // 1或n
    text-overflow: ellipsis;
    /* #endif */

    // 其他端
    /* #ifndef APP-PLUS */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width: $width;
    /* #endif */
  } @else {
    /* 多行時 */
    
    // App端
    /* #ifdef APP-PLUS */
    lines: $lineNum; // 1或n
    text-overflow: ellipsis;
    /* #endif */

    // 其他端
    /* #ifndef APP-PLUS */
    overflow: hidden;
    -webkit-line-clamp: $lineNum;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    /* #endif */
  }
}

使用

// 使用
@include line(1, 400rpx); // 單行
@include line(2); // 多行

4、獲取導航欄高度

// App導航欄高度
uni.getSystemInfoSync().safeArea.top + 'px'

// 小程式導航欄高度
uni.getMenuButtonBoundingClientRect().top + 'px'

5、獲取底部安全區域高度

const safeArea = uni.getSystemInfoSync().safeArea
const paddingBottom = safeArea.bottom - safeArea.height + 'rpx'

6、App修改導航欄電池、時間顏色

//只支持dark和light
// #ifdef APP-PLUS
plus.navigator.setStatusBarStyle('dark')
// #endif

7、CSS過渡動畫

// 使用動畫的CSS屬性、動畫時間、動畫過渡效果、動畫延遲時間
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay:0.1s;

8、邊框樣式

// HBuilderX 3.1.0之前需要分開寫
border-top: 1px;
border-style: solid;
border-top-color: #eee;

// HBuilderX 3.1.0+ 開始支持簡寫樣式
border-top: 1px solid #eee;

9、nvue中不支持的uni-app API

// 1、創建動畫
uni.createAnimation()

// 2、頁面滾動
uni.pageScrollTo()

// 3、節點佈局交互（交叉觀察器）
uni.createIntersectionObserver()

10、微信端底部安全區域

/* #ifndef APP-PLUS */
padding-bottom: calc(env(safe-area-inset-bottom));
/* #endif */

11、nvue解析富文本(支持小程式)

App-nvue 和支付寶小程式不支持 HTML String 方式，僅支持直接使用節點列表即 Array 類型，需將 HTML String 轉化為 nodes 數組，可使用 html-parser 轉換。

<template>
  <rich-text :nodes='htmlNodes'/>  
</template>

<script>
  // nvue僅支持node節點渲染，所以要將HTML轉換成node節點
  import parseHtml from './html-parse.js'
  export default {
    data () {
      return {
        htmlStr: `
          <h1>我的日記</h1>
          <p>今天天氣真好</p>
          <p>適合出去玩</p>
        `,
        htmlNodes: []
      }
    },
    onLoad () {
      this.getContent()
    },
    methods: {
      getContent () {
        // 將HTML文本轉換成node節點
        this.htmlNodes = parseHtml(this.htmlStr)
      }
    }
  }
</script>

12、App端計算緩存和清理緩存

cacheSetting.js

// 計算緩存
export const computedCache = () => {
  return new Promise(resolve => {
    plus.cache.calculate((size) => {
      let cachSize = ''
      size = parseInt(size)
      if (size === 0) {
        cachSize = ''
      } else if (size < 1024) {
        cachSize = size + 'B'
      } else if (size < 1048576) {
        cachSize = (size / 1024).toFixed(2) + 'KB'
      } else if (size < 1073741824) {
        cachSize = (size / 1048576).toFixed(2) + 'MB'
      } else {
        cachSize = (size / 1073741824).toFixed(2) + 'GB'
      }
      resolve(cachSize)
    })
  })
}

// 清除緩存
export const clearCache = (cb) => {
  uni.showLoading({
    title: '清理中…'
  })
  const os = plus.os.name
  if (os === 'Android') {
    const main = plus.android.runtimeMainActivity()
    const sdRoot = main.getCacheDir()
    const files = plus.android.invoke(sdRoot, 'listFiles')
    const len = files.length
    for (let i = 0; i < len; i++) {
      const filePath = '' + files[i] // 沒有找到合適的方法獲取路徑，這樣寫可以轉成文件路徑
      plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
        if (entry.isDirectory) {
          entry.removeRecursively(() => { // 遞歸刪除其下的所有文件及子目錄
            uni.showToast({
              title: '緩存清理完成',
              duration: 2000
            })
            cb()
          }, (e) => {
            console.log(e.message)
          })
        } else {
          entry.remove()
        }
      }, () => {
        console.log('文件路徑讀取失敗')
      })
    }
  } else { // ios
    plus.cache.clear(() => {
      uni.showToast({
        title: '緩存清理完成',
        duration: 2000
      })
      cb()
    })
  }
}

13、多端1px邊框

1. 新建border.scss

// 預設邊框色
$border: #e4e7ed;

// nvue端
/*
此處加上!important並是因為目前*.nvue頁面編譯到H5時，
App.vue的樣式會被uni-app的view元素的自帶border屬性覆蓋，導致無效，
所以為了多端相容，必須要加上!important
App端相容性較好，直接使用0.5px去實現細邊框，不使用偽元素形式實現
*/
/* #ifdef APP-NVUE */
.border {
  border-width: 0.5px!important;
  border-color: $border!important; 
  border-style: solid;
}
.border-t {
  border-top-width: 0.5px!important; 
  border-color: $border!important; 
  border-top-style: solid;
}
.border-l {
  border-left-width: 0.5px!important; 
  border-color: $border!important; 
  border-left-style: solid;
}
.border-r {
  border-right-width: 0.5px!important; 
  border-color: $border!important; 
  border-right-style: solid;
}
.border-b {
  border-bottom-width: 0.5px!important; 
  border-color: $border!important; 
  border-bottom-style: solid;
}
.border-tb {
  border-top-width: 0.5px!important; 
  border-bottom-width: 0.5px!important; 
  border-color: $border!important; 
  border-top-style: solid;
  border-bottom-style: solid;
}
/* #endif */


// 非nvue端
/* #ifndef APP-NVUE */
.border,
.border-b,
.border-l,
.border-r,
.border-t,
.border-tb {
  position: relative;
}
.border-b:after,
.border-l:after,
.border-r:after,
.border-tb:after,
.border-t:after,
.border:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5, 0.5);
  border: 0 solid $border;
  z-index: 1;
}
.border-t:after {
  border-top-width: 1px;
}
.border-l:after {
  border-left-width: 1px;
}
.border-r:after {
  border-right-width: 1px;
}
.border-b:after {
  border-bottom-width: 1px;
}
.border-tb:after {
  border-width: 1px 0;
}
.border:after {
  border-width: 1px;
}
/* #endif */

2. uni.scss引入

@import './assets/style/border.scss';

3. 組件內使用

// 1.作為類名使用
<template>
  <view class='border-tb'></view>
</template>
// 2.作為選擇器繼承
<template>
  <view class='cell'></view>
</template>

<style lang='scss' scoped>
  .cell {
    @extend .border-tb;
  }
</style>

14、App用戶綁定微信/App微信登錄

1. manifest.json配置

2. 代碼

appBindWx () {
  const that = this
  uni.getProvider({
    service: 'oauth',
    success: (res) => {
      //支持微信、qq和微博等
      if (~res.provider.indexOf('weixin')) {
        uni.login({
          provider: 'weixin',
          success: ({authResult}) => {
            // 微信返回的數據見下方圖片
            // 請求介面完成綁定
          },
          fail: (res) => {
            console.log('App微信獲取用戶信息失敗', res)
          }
        })
      }
    }
  })
}

3. 微信返回的數據

 15、App分享為微信小程式

1. manifest.json配置

2. 代碼

const shareAppToMp = (shareInfo, cb) => {
  // 建議將圖片下載到本地再進行分享，防止有些圖片存在鑒權導致無法分享成功
  uni.downloadFile({
    url: 'xxx', // 圖片路徑
    success (res) {
      if (res.statusCode === 200) {
        uni.share({
          provider: 'weixin', // 分享服務提供商
          // WXSceneSession分享到聊天界面、WXSceneTimeline分享到朋友圈、WXSceneFavorite分享到微信收藏
          scene: 'WXSceneSession', // provider為weixin 時必選
          type: 5, // 圖文、純文字、純圖片、音樂、視頻、小程式，5為小程式
          imageUrl: res.tempFilePath, // 本地圖片地址
          title: 'title', // 小程式分享標題
          miniProgram: {
            id: 'gh_xxxxxxxxxx', // 小程式原始ID
            path: '/pages/homePage/index', // 小程式分享的頁面
            type: 0, // 小程式版本類型，0正式版、1測試版、2-體驗版，預設為0
            webUrl: 'xxxxx' // 相容低版本的網頁鏈接，可選
          },
          success () {
            uni.showToast({
              title: '分享成功！',
              duration: 2000
            })
            cb()
          },
          fail (e) {
            console.log('分享失敗原因：', e)
          }
        })
      }
    }
  })
}

3.註意事項

配置正確的情況下，打包成App後才能成功分享，否則會提示以下錯誤

 16、強制退出App

quitApp () {
  switch (uni.getSystemInfoSync().platform) {
    // 安卓
    case 'android':
      plus.runtime.quit()
      break
    // ios
    case 'ios':
      plus.ios.import('UIApplication').sharedApplication().performSelector('exit')
      break
  }
}

17、App和小程式阻止點擊事件冒泡

<template>
  <ul @click='clickParent'>
    <!-- 小程式阻止冒泡 -->
    <li @click.stop='clickChild'>子元素</li>
  </ul>
</template>

<script>
export default {
  methods: {
    clickParent () {
      console.log('點擊父元素')
    },
    clickChild (e) {
      console.log('點擊子元素')

      // App阻止冒泡
      // #ifdef APP-NVUE
      e.stopPropagation()
      // #endif
    }
  }
}
</script>

本文轉載於:

https://juejin.cn/post/7034362206036852767

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 標簽評分：海量標簽如何進行系統治理？
    本篇是「標簽畫像系列」的第四篇，此前我們已經介紹過了標簽畫像體系建設方法論、標簽體系設計與加工、標簽加工與落庫，這次我們來介紹一下「標簽評分」。 標簽評分是標簽治理的一個重要措施，通過給標簽打分，可清晰直觀的從各個維度評估標簽，掌握標簽真實使用情況，進行標簽持續優化，助力業務運營。同時，也能幫助數據 ...
  • 告訴你個廣告業務存儲神器
    摘要：高性能、大容量、低成本、強穩定性，廣告業務需要的Ta都有 本文分享自華為雲社區《廣告業務存儲神器：華為雲GaussDB for Redis》，作者： GaussDB 資料庫。 一、從需求場景說起，什麼是RTA廣告業務？ 在互聯網時代，媒體平臺逐漸成為廣告業務的主體，而作為廣告主的企業往往每年需 ...
  • Mysql雙機主從搭建
    Mysql雙機主從搭建 一、規劃說明 主節點： IP：192.168.1.146 系統：Centos7.6 版本：MySQL-5.7.38 mysql賬戶密碼：root/Admin_2022 同步賬戶：mysync/Admin_2022 主機名：m1 已關閉防火牆，配置阿裡源，連接互聯網 從節點： ...
  • 如何從Mac OS X Catalina將IPA文件上傳到App Store
    本文介紹瞭如何從Mac OS X Catalina將IPA文件上傳到App Store的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下麵隨著小編來一起學習吧！ 問題描述 我剛剛在Apple Developer門戶中創建了一個應用程式，現在我想將從Phonegap創建的IPA文件上傳到Ap ...
  • Flutter(七)：Flutter混合開發--接入現有原生工程(iOS+Android)
    在上一篇文章Flutter(六)：Flutter_Boost接入現有原生工程(iOS+Android)中介紹了Flutter_Boost的接入方法，這一篇將介紹Flutter自帶的接入方法。 新建工程 1.新建工程 1.使用Xcode新建flutter_demo_ios（模擬已有工程） 2.使用An ...
  • vue實現功能 單選 取消單選 全選 取消全選
    vue實現功能 單選 取消單選 全選 取消全選 代碼部分 <template> <div class=""> <h1>全選框</h1> <center> <button @click="checkAnti">反選</button> <table border="1px"> <tr> <!-- 全選框 ...
  • Vuex學習筆(基於Vue2.x)
    本人水平有限，如有疏漏或者不正確部分，請大佬指正。 一.Vuex概述 1.1組件之間共用數據的方式 父向子傳值：v-bind 屬性綁定子向父傳值：v-on 事件綁定兄弟組件之間共用數據：eventBUs* $on 接收數據的那個組件* $emit 發送數據的那個組件 特點：適合小範圍使用 1.2Vu ...
  • ctrl+滑鼠禁止伸縮頁面
    mounted() { document.body.onresize = function() { // ctrl+滑鼠中鍵滾輪 禁止伸縮頁面 document.body.style.zoom = 1 / window.devicePixelRatio // document.documentEle ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類