uniapp - 微信小程序

一、background-image 大圖不顯示的問題

解決方法:

1、使用網絡地址;2、使用 base64

urlTobase64(filePath) {// #ifdef MP-WEIXINlet img = `${filePath}`,imgBase64 = wx.getFileSystemManager().readFileSync(img, "base64"),base64Url = `data:image/png;base64,${imgBase64}`;console.log("data:image/png;base64", "圖片轉換成功");return base64Url// #endif
},
<!-- #ifdef MP-WEIXIN -->
<view class="inner-box" :style="{backgroundImage:`url(${$utils.urlTobase64('/static/image/top.png')})`}">
<!-- #endif --><!-- #ifdef APP --><view class="inner-box"><!-- #endif --></view>.inner-box {background-image: url('/static/image/top.png');}

二、uni.$ emit() uni.$on() 不生效

解決方法:

放到 onReady() 方法里 ,onLoad() 方法 監聽不到

三、高德定位

解決方法:

高德微信小程序SDK amap-wx.130.js下載地址

import amapWX from '../utils/amap-wx.130.js'
let utils = {getAmapWXLocation() {// #ifdef MP-WEIXINreturn new Promise((resolve, reject) => {const amapPlugin = new amapWX.AMapWX({key: '9a000f67903479b1f49cc05c59057108'});amapPlugin.getRegeo({success: (res) => {let data = res[0]console.log('定位成功', data)let position = {longitude: data.longitude,latitude: data.latitude,address: data.regeocodeData.formatted_address,}console.log('position: ', position);resolve(position)},fail(err) {reject(err)console.log('定位失敗', err)}});})// #endif}
}
export default utils;

調用

getLocationInfo() {// #ifdef MP-WEIXINthis.$utils.getAmapWXLocation().then(loc => {this.sLatitude = loc.latitude;this.sLongitude = loc.longitude;this.sLocation = loc.address;console.log('loc: ', loc);})// #endif
}

四、image 無法加載
在這里插入圖片描述
分析問題所在:/pages/template/undefined/,路徑有問題;
因為 $imgBaseUrl 這個路徑 是寫在 main.js 里邊的

 <image :src="`${$imgBaseUrl}${img}`">

解決方法

export default {data() {return {imgBaseUrl: this.$imgBaseUrl,}}
}<image :src="`${imgBaseUrl}`">

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/62927.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/62927.shtml
英文地址,請注明出處:http://en.pswp.cn/web/62927.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

DETR: End-to-End Object Detection with Transformers論文學習

論文地址&#xff1a;https://arxiv.org/pdf/2005.12872 代碼地址&#xff1a;https://github.com/facebookresearch/detr 相關學習視頻&#xff1a;https://space.bilibili.com/94779326/lists?sid1531941 標題前言&#xff1a; DETR 是 Facebook 團隊于 2020 年提出的基于…

LeetCode 24反轉鏈表

單鏈表反轉&#xff1a;詳細解析與代碼實現 在數據結構的學習過程中&#xff0c;鏈表是一個非常重要且有趣的部分&#xff0c;而單鏈表的反轉操作更是常考的基礎知識點。今天就來和大家詳細講講如何實現單鏈表的反轉&#xff0c;并通過代碼示例來加深理解呀。 題目 給定單鏈…

Redis學習筆記之——學習計劃

Redis——Remote Dictionary Server&#xff0c;開源、基于內存、速度快、key-value... Redis做為一個高性能的鍵值存儲系統&#xff0c;廣泛應用于緩存、會話存儲、分布式鎖以及其他需要快速訪問的數據場景中。熟悉掌握redis&#xff0c;似乎已成為廣大碼農們必備的一項技能。…

網絡安全教學博客(二):常見網絡安全威脅剖析

在上一篇博客中&#xff0c;我們了解了網絡安全的基礎概念和重要性。今天&#xff0c;讓我們深入探討一下常見的網絡安全威脅&#xff0c;以便我們能夠更好地識別和防范它們。 惡意軟件&#xff08;Malware&#xff09; 病毒&#xff08;Virus&#xff09;&#xff1a;病毒是一…

Vue3狀態管理:Pinia架構設計分析

Vue3狀態管理:Pinia架構設計分析 介紹 在Vue.js開發中&#xff0c;狀態管理是一個非常重要的部分。隨著Vue3的發布&#xff0c;Pinia作為一種新的狀態管理架構也相繼問世。本文將對Pinia架構進行深入分析&#xff0c;幫助讀者了解其設計原理、特點以及在實際項目中的應用。 架構…

【IDEA】啟動報錯

今天啟動IDEA報錯 報錯信息&#xff1a; Cannot connect to already running IDE instance. Exception: Process 5,444 is still running 打開任務管理器&#xff0c;關掉進程ID5444的任務

socket編程UDP-實現停等機制(接收確認、超時重傳)

在下面博客中&#xff0c;我介紹了利用UDP模擬TCP連接、按數據包發送文件的過程&#xff0c;并附上完整源碼。 socket編程UDP-文件傳輸&模擬TCP建立連接脫離連接&#xff08;進階篇&#xff09;_udp socket發送-CSDN博客 下面博客實現的是滑動窗口機制&#xff1a; sock…

uniapp小程序的錨點定位(將頁面滾動到目標位置)

小程序中&#xff0c;a頁面跳轉到b頁面&#xff0c;跳轉后滾動定位到b頁面的特定位置。 1.uni.pageScrollTo傳遞一個scrollTop參數可以滾動到特定位置。2.可以通過 uni.createSelectorQuery()等獲取定位元素的位置信息。3.uni.getSystemInfoSync()獲取設備的導航欄和狀態欄高度…

php基礎:命名空間

1.PHP 命名空間可以解決以下兩類問題&#xff1a; 1.用戶編寫的代碼與PHP內部的類/函數/常量或第三方類/函數/常量之間的名字沖突。 2.為很長的標識符名稱(通常是為了緩解第一類問題而定義的)創建一個別名&#xff08;或簡短&#xff09;的名稱&#xff0c;以提高源代碼的可讀…

分布式 CAP理論 總結

前言 相關系列 《分布式 & 目錄》《分布式 & CAP理論 & 總結》《分布式 & CAP理論 & 問題》 分布式 分布式的核心是將大型業務拆解成多個子業務以使之在不同的機器上執行。分布式是用于解決單個物理機容量&性能瓶頸問題而采用的優化手段&#xf…

python xpath解析筆記

與bs4的區別 bs4有很多屬性和方法&#xff0c;而xpath只有一個方法&#xff0c;是通過不同的xpath表達式實現很多功能的。 html例子 定位 tree.xpath(‘/html/head/title’) 返回列表。 開頭的斜杠表示從根節點遍歷。 中間的斜杠表示層級。&#xff08;相當于bs4中的>…

Q學習(Q-Learning)詳解

?作者簡介&#xff1a;2022年博客新星 第八。熱愛國學的Java后端開發者&#xff0c;修心和技術同步精進。 &#x1f34e;個人主頁&#xff1a;Java Fans的博客 &#x1f34a;個人信條&#xff1a;不遷怒&#xff0c;不貳過。小知識&#xff0c;大智慧。 &#x1f49e;當前專欄…

樹狀數組詳解

概述 樹狀數組&#xff08;Binary Indexed Tree&#xff0c;簡稱BIT&#xff09;&#xff0c;是一種數據結構&#xff0c;用于處理區間查詢和更新問題。它是一種可以高效地在對數級別時間復雜度內進行單點更新和區間查詢的數據結構。樹狀數組通常用于解決以下兩類問題&#xf…

freeswitch(開啟支持MCU視頻會議,使用mod_av模塊)

親測版本centos 7.9系統–》 freeswitch1.10.9 本人freeswitch安裝路徑(根據自己的路徑進入) /usr/local/freeswitch/etc/freeswitch場景說明: 有些場景想使用視頻會議MCU融合畫面進行開會使用方法: 第一步:下載插件 yum install -y epel-release yum install

【大數據技術基礎】【記錄Ubuntu 16.04升級到18.04】Ubuntu的一個版本升級到另一個版本

在 Ubuntu 操作系統中進行軟件更新和系統升級 Ubuntu Kylin 16.04 LTS 系統進行系統升級到 Ubuntu 18.04.6 LTS 版本 升級提示&#xff1a;系統彈出提示框&#xff0c;告知用戶有新版本的 Ubuntu 可用&#xff0c;詢問用戶是否想要升級。 認證窗口&#xff1a;顯示了一個認證…

這是一個vue3 + scss的數字滾動效果

介紹: 當數字變化時&#xff0c;只改變變化的數字位&#xff0c;其余的不變&#xff0c;可以遞增、遞減、驟變、負數也可以&#xff0c;但是樣式要根據具體的項目需求去改&#xff1b; 效果1、增加數字&#xff1a; 效果2、減少數字&#xff1a; 使用方法&#xff1a; <te…

TortoiseGit的下載、安裝和配置

一、TortoiseGit的簡介 tortoiseGit是一個開放的git版本控制系統的源客戶端&#xff0c;支持Winxp/vista/win7.該軟件功能和git一樣 不同的是&#xff1a;git是命令行操作模式&#xff0c;tortoiseGit界面化操作模式&#xff0c;不用記git相關命令就可以直接操作&#xff0c;讀…

最新版Chrome瀏覽器加載ActiveX控件之Adobe PDF閱讀器控件

背景 Adobe PDF閱讀器控件是一個ActiveX控件&#xff0c;用于在Windows平臺上顯示和操作PDF文件。它提供了一系列方法和屬性&#xff0c;可以實現對PDF文件的加載、顯示、搜索、打印、保存等操作。 allWebPlugin中間件是一款為用戶提供安全、可靠、便捷的瀏覽器插件服務的中間件…

linux在沒網的情況下如何校驗時間 超詳細拿來即用

一、沒有校時服務器的話 1、手動修改 sudo date --set"2024-06-17 13:44:00"二、有校時服務器的話 1、手動校時 ntpdate 14.193.73.22、自動校時 寫一個校時服務腳本 14.193.73.2 是校驗時間服務器 #!/bin/sh while true dontpdate 14.193.73.2sleep 5;hwclock…

源碼分析之Openlayers中的控件篇Control基類介紹

概述 Openlayers 中內置了9類控件&#xff0c;這9類控件都是基于Control類&#xff0c;而Control類則是繼承于BaseObject類&#xff0c;如下圖所示&#xff1a; 如上&#xff0c;這9類控件分別是&#xff1a; Attribution&#xff1a;屬性控件FullScreen:全屏控件MousePositi…