關於微信小程式原生組件與uniApp混合開發過程遇到的問題與解決方式

来源:https://www.cnblogs.com/XuZiYan/archive/2023/05/22/17420625.html
-Advertisement-
Play Games

2022年的程式員節, #大齡程式員去哪兒了#成為了社交媒體上最火的話題之一,程式員的職場成長問題在社會上引起了廣泛關註。 有2位在技術領域摸爬滾打很多年的開發者,35歲後的他們,有70後,有80後,依然在編程開發,依然有離職創業的勇氣,努力實現自己的人生價值。走進他們的故事,你會發現,這個世上沒有 ...


前言:

  在實際開發過程中,尤其是小程式的開發,我們常常會遇到一些在文檔中解決不了的問題,在這裡,我就淺談一下我遇到的一些問題

1.小程式的構建框架是uni-app,卻突然被要求用原生的微信小程式代碼來開發,到最後要整合到uni-app裡面

這個整合問題,uni-app官網就有解決方式,這裡就不多說,直接上鏈接

https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html

2.整合之後,就輪到傳參問題了,本著能省事與提高開發效率,於後期方便維護整改,在這裡,我是直接要傳到微信原生組件的數據直接丟在集合裡面,在微信組件那邊直接從集合裡面拿我們要傳過去的數據

uni-app頁面

<template>
  <
view class="foot-box">   <view-xxx :xxxList="datalist"/>   </view>
</template>
<script>
  export default {
    data() {
      return {
        xxxList:{
          'name': '張三',
          'age': 16
        }
      }
    }
  }
</script>

微信組件

  Component({
  /** * 組件的屬性列表 */ properties: { xxxList: Object },
 attached: function () {
   console.log(this.properties.
xxxList)
 },
 data:{},
 methods:{}
})

這樣,我們在uni-app的vue頁面就把我們想要傳給微信原生組件的數據給傳遞過去了

3.為了後期的維護方便,我們都會寫一個公用的api.js文件,這個文件裡面存儲的是介面的地址,為了後期維護便利,本人採用的是將所有的請求都寫在引用組件的父頁面下,而不在組件裡面調用請求。

但是,在這裡我們要註意,由於是混合開發,uni-app裡面的一些js寫法與微信組件原生的寫法不一樣!!!,所以在各自的文檔中並沒有提及在整合其他組件時,組件調用頁面的函數,經過本人踩坑,去網上收集資料,弄出一個可行的方式

廢話不多說,上示例

uniapp頁面

<template>
  <view class="foot-box">
     <view-xxx :xxxList="datalist"  v-on:brool = "getfunction" />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        xxxList:{
          'name': '張三',
          'age': 16
        }
      }
    },
            methods:{
                getfunction(){
                     console.log(11111)
                }     
            }
  }
</script>                                                                                            

微信組件js頁面

  /**
   * 組件的屬性列表
   */
  properties: {
    xxxList: Object
  },

  /**
   * 組件的初始數據
   */
  data: {},
  /**
   * 組件的方法列表
   */
  methods: {
  //組件頁面上的點擊事件 btngoToOtherPage: function(e){ this.triggerEvent("brool",data) }, } })

這樣,我們就能在uni-app裡面建一個專門存放api的文件夾,便於後期維護

關於uni-app引用微信組件導致的樣式變形,可以在網上搜尋 微信組件樣式穿透  ,結合微信官方給出的文檔中的 樣式隔離 ,就可以解決

以上,就是本人分享的一些開發經驗,希望能幫助到各位遇到和我一樣難題卻找不到解決思路的人


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

-Advertisement-
Play Games
更多相關文章
  • 主機操作系統:windows11 虛擬機操作系統:centos7、kali vmware版本:16 (27條消息) 超詳細虛擬機與主機網路連接以及互Ping不通問題的解決_虛擬機無法ping通主機_一隻傻陽陽的博客-CSDN博客 通過此連接中的教程,事實上幾乎沒有進行什麼配置,僅配置了centos7 ...
  • # 概述 Typecho是一款輕量級的開源PHP博客系統,它簡單易用,界面整潔,性能高效,主題、插件眾多。我使用的是騰訊雲輕量伺服器,Typecho的應用模版,一鍵安裝環境。構建自己的博客網站,記錄生活、分享經驗。 ## 購買功能變數名稱、備案、申請SSL 這樣在之後創建完typecho伺服器,就會在ngi ...
  • 本文是線上問題處理案例系列之一,旨在通過真實案例向讀者介紹發現問題、定位問題、解決問題的方法。本文講述了從垃圾回收耗時過長的表象,逐步定位到資料庫連接池保活問題的全過程,並對其中用到的一些知識點進行了總結。 ...
  • 摘要:本文詳細梳理分析了DWS服務面臨軟硬體故障場景和對應的修複原理,希望藉此能夠讓你對DWS的集群故障修複有個全面深入的瞭解。 本文分享自華為雲社區《GaussDB(DWS)故障修複系統性介紹》,作者: 聞鮮生。 DWS是一個分散式架構的MPP集群,物理部署上涉及數百數千台主機和對應的磁碟,以及這 ...
  • **本系列為:MySQL資料庫詳解,為千鋒資深教學老師獨家創作** **致力於為大家講解清晰MySQL資料庫相關知識點,含有豐富的代碼案例及講解。如果感覺對大家有幫助的話,可以【關註】持續追更\~** **文末有本文重點總結,技術類問題,也歡迎大家和我們溝通交流!** ![在這裡插入圖片描述](ht ...
  • 《1萬多條司法資格考試題庫ACCESS版》搜集了大量司法資格考試試題,包括試卷一、試卷二、試卷三、試卷四等科目。同類的資料庫有《9萬多條執業醫師資格考試題庫ACCESS資料庫》、《6萬多條會計從業資格考試題庫ACCESS版》、《近7萬多條證券從業資格考試題庫ACCESS版》、《1萬多條一級建造師資格 ...
  • 摘要:MySQL一張表最多能存多少數據? 本文分享自華為雲社區《為什麼MySQL單表不能超過2000萬行?》,作者: GaussDB 資料庫 。 最近看到一篇《我說MySQL每張表最好不要超過2000萬數據,面試官讓我回去等通知》的文章,非常有趣。 文中提到,他朋友在面試的過程中說,自己的工作就是把 ...
  • 數學上有一個“計算漢明重量”的問題,即求取一個二進位位中非 0 的數量。使用 Redis 提供的 Bitmap 統計時恰恰是這樣一個問題,學習後能發現解決辦法卻是如此巧妙。 ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...