鴻蒙OSUniApp 開發的一鍵分享功能#三方框架 #Uniapp

使用 UniApp 開發的一鍵分享功能

在移動應用開發中，分享功能幾乎是必不可少的一環。一個好的分享體驗不僅能帶來更多用戶，還能提升產品的曝光度。本文將詳細講解如何在 UniApp 框架下實現一個簡單高效的一鍵分享功能，適配多個平臺。

各平臺分享機制分析

首先我們需要了解不同平臺的分享機制：

微信小程序的分享主要通過以下兩種方式：

  1. 頁面內分享：通過在頁面中定義 onShareAppMessage 函數，用戶點擊右上角菜單的轉發按鈕時觸發。

  2. 按鈕分享：通過 button 組件，設置 open-type="share"，用戶點擊按鈕時觸發頁面的 onShareAppMessage 函數。

  3. 直接分享：可以通過 Web Share API (僅部分現代瀏覽器支持)。

  4. 社交平臺 SDK：如微信 JSSDK、QQ分享等。

  5. 復制鏈接：生成分享鏈接供用戶手動復制。

了解了這些區別后，我們就可以開始實現我們的一鍵分享功能了。

實現通用的分享工具

首先，我們先創建一個通用的分享工具類，封裝各平臺的分享邏輯：

// utils/share.js/*** 通用分享工具類*/
class ShareUtil {/*** 分享到社交平臺* @param {Object} options 分享參數* @param {string} options.title 分享標題* @param {string} options.summary 分享摘要* @param {string} options.imageUrl 分享圖片* @param {string} options.targetUrl 分享鏈接* @param {Function} options.success 成功回調* @param {Function} options.fail 失敗回調*/static share(options) {// 默認參數const defaultOptions = {title: '這是默認的分享標題',summary: '這是默認的分享摘要',imageUrl: 'https://your-website.com/default-share-image.png',targetUrl: 'https://your-website.com',success: () => {},fail: () => {}};// 合并參數const shareOptions = Object.assign({}, defaultOptions, options);// 根據平臺執行不同的分享邏輯switch (uni.getSystemInfoSync().platform) {case 'android':case 'ios':// App平臺使用uni.sharethis.appShare(shareOptions);break;case 'devtools':case 'mp-weixin':// 微信小程序平臺，返回分享對象給onShareAppMessage使用return this.getWxShareOptions(shareOptions);default:// H5平臺this.h5Share(shareOptions);break;}}/*** App平臺分享實現*/static appShare(options) {// #ifdef APP-PLUSuni.share({provider: 'weixin', // 可選: weixin、sinaweibo、qqtype: 0, // 0:圖文 1:純文字 2:純圖片 3:音樂 4:視頻 5:小程序title: options.title,summary: options.summary,imageUrl: options.imageUrl,href: options.targetUrl,scene: 'WXSceneSession', // WXSceneSession:會話 WXSceneTimeline:朋友圈 WXSceneFavorite:收藏success: (res) => {console.log('分享成功');options.success && options.success(res);},fail: (err) => {console.error('分享失敗', err);options.fail && options.fail(err);}});// #endif}/*** 獲取微信小程序分享參數*/static getWxShareOptions(options) {return {title: options.title,path: `/pages/index/index?targetUrl=${encodeURIComponent(options.targetUrl)}`,imageUrl: options.imageUrl,success: options.success,fail: options.fail};}/*** H5平臺分享實現*/static h5Share(options) {// #ifdef H5// 檢查瀏覽器是否支持 Web Share APIif (navigator.share) {navigator.share({title: options.title,text: options.summary,url: options.targetUrl,}).then(() => {console.log('分享成功');options.success && options.success();}).catch((err) => {console.error('分享失敗', err);options.fail && options.fail(err);// 降級處理：不支持分享時復制鏈接this.copyShareLink(options);});} else {// 降級處理：不支持 Web Share API 時復制鏈接this.copyShareLink(options);}// #endif}/*** 復制分享鏈接（H5降級方案）*/static copyShareLink(options) {// #ifdef H5uni.setClipboardData({data: options.targetUrl,success: () => {uni.showToast({title: '鏈接已復制，請粘貼給好友',icon: 'none'});options.success && options.success();},fail: (err) => {uni.showToast({title: '復制失敗，請長按鏈接復制',icon: 'none'});options.fail && options.fail(err);}});// #endif}
}export default ShareUtil;

在頁面中使用分享功能

接下來，我們在頁面中使用上面封裝的分享工具：

<!-- pages/article/detail.vue -->
<template><view class="article-container"><!-- 文章內容 --><view class="article-content"><view class="article-title">{{ article.title }}</view><view class="article-info"><text class="author">{{ article.author }}</text><text class="time">{{ article.publishTime }}</text></view><rich-text :nodes="article.content"></rich-text></view><!-- 底部分享欄 --><view class="share-bar"><button class="share-btn" @tap="handleShare"><text class="iconfont icon-share"></text><text>一鍵分享</text></button><!-- 微信小程序專用分享按鈕 --><!-- #ifdef MP-WEIXIN --><button class="share-btn" open-type="share"><text class="iconfont icon-wechat"></text><text>分享給好友</text></button><!-- #endif --></view></view>
</template><script>
import ShareUtil from '@/utils/share.js';export default {data() {return {article: {id: '',title: '如何成為一名優秀的前端開發者',author: '前端小菜鳥',publishTime: '2023-12-20',content: '<p>這是文章內容...</p>',coverImg: 'https://example.com/cover.jpg'},shareUrl: ''};},onLoad(options) {// 獲取文章IDthis.article.id = options.id || '1';// 實際項目中這里通常會請求文章詳情this.loadArticleDetail();// 生成分享鏈接this.shareUrl = this.generateShareUrl();},// 微信小程序分享配置onShareAppMessage() {return ShareUtil.share({title: this.article.title,summary: this.article.title,imageUrl: this.article.coverImg,targetUrl: this.shareUrl});},// App端分享到朋友圈配置（僅微信小程序支持）// #ifdef MP-WEIXINonShareTimeline() {return {title: this.article.title,imageUrl: this.article.coverImg,query: `id=${this.article.id}`};},// #endifmethods: {// 加載文章詳情loadArticleDetail() {// 實際項目中這里會請求后端APIconsole.log('加載文章ID:', this.article.id);// uni.request({...})},// 生成分享鏈接generateShareUrl() {// 根據環境生成不同的分享鏈接let baseUrl = '';// #ifdef H5baseUrl = window.location.origin;// #endif// #ifdef MP-WEIXINbaseUrl = 'https://your-website.com';// #endif// #ifdef APP-PLUSbaseUrl = 'https://your-website.com';// #endifreturn `${baseUrl}/pages/article/detail?id=${this.article.id}`;},// 處理分享按鈕點擊handleShare() {// 微信小程序不需要處理，因為有專用的分享按鈕// #ifndef MP-WEIXINShareUtil.share({title: this.article.title,summary: this.article.title,imageUrl: this.article.coverImg,targetUrl: this.shareUrl,success: () => {uni.showToast({title: '分享成功',icon: 'success'});},fail: (err) => {console.error('分享失敗', err);uni.showToast({title: '分享失敗',icon: 'none'});}});// #endif}}
};
</script><style lang="scss">
.article-container {padding: 30rpx;.article-content {margin-bottom: 100rpx;.article-title {font-size: 36rpx;font-weight: bold;margin-bottom: 20rpx;}.article-info {display: flex;font-size: 24rpx;color: #999;margin-bottom: 30rpx;.author {margin-right: 20rpx;}}}.share-bar {position: fixed;bottom: 0;left: 0;right: 0;display: flex;justify-content: space-around;padding: 20rpx;background-color: #fff;border-top: 1px solid #eee;.share-btn {display: flex;flex-direction: column;align-items: center;font-size: 24rpx;background-color: transparent;padding: 10rpx 30rpx;&::after {border: none;}.iconfont {font-size: 40rpx;margin-bottom: 5rpx;}}}
}
</style>

實現分享海報功能

除了直接分享功能外，在一些場景下，我們還需要生成分享海報，這在社交軟件中非常常見，可以增強分享的辨識度。下面我們實現一個簡單的海報生成和保存功能：

<!-- components/share-poster.vue -->
<template><view class="poster-container" v-if="visible"><view class="mask" @tap="hide"></view><view class="poster-content"><view class="poster-card"><image class="poster-image" :src="posterUrl" mode="widthFix"></image></view><view class="button-group"><button class="poster-btn cancel" @tap="hide">取消</button><button class="poster-btn save" @tap="savePoster">保存到相冊</button></view></view></view>
</template><script>
export default {props: {visible: {type: Boolean,default: false},articleInfo: {type: Object,default: () => ({})}},data() {return {posterUrl: '',generating: false};},watch: {visible(val) {if (val && !this.posterUrl && !this.generating) {this.generatePoster();}}},methods: {// 隱藏海報hide() {this.$emit('update:visible', false);},// 生成海報async generatePoster() {try {this.generating = true;// 創建畫布const ctx = uni.createCanvasContext('posterCanvas', this);// 畫布尺寸const canvasWidth = 600;const canvasHeight = 900;// 繪制背景ctx.fillStyle = '#ffffff';ctx.fillRect(0, 0, canvasWidth, canvasHeight);// 繪制文章標題ctx.fillStyle = '#333333';ctx.font = 'bold 30px sans-serif';this.drawText(ctx, this.articleInfo.title, 40, 80, 520, 30);// 繪制封面圖await this.drawImage(ctx, this.articleInfo.coverImg, 40, 150, 520, 300);// 繪制文章摘要ctx.fillStyle = '#666666';ctx.font = '26px sans-serif';this.drawText(ctx, this.articleInfo.summary, 40, 480, 520, 26);// 繪制二維碼提示ctx.fillStyle = '#999999';ctx.font = '24px sans-serif';ctx.fillText('掃描二維碼閱讀全文', 150, 800);// 繪制二維碼await this.drawImage(ctx, this.articleInfo.qrCodeUrl, 200, 600, 200, 200);// 完成繪制ctx.draw(true, () => {setTimeout(() => {// 將畫布導出為圖片uni.canvasToTempFilePath({canvasId: 'posterCanvas',success: (res) => {this.posterUrl = res.tempFilePath;this.generating = false;},fail: (err) => {console.error('導出海報失敗', err);this.generating = false;uni.showToast({title: '生成海報失敗',icon: 'none'});}}, this);}, 300);});} catch (error) {console.error('生成海報錯誤', error);this.generating = false;uni.showToast({title: '生成海報失敗',icon: 'none'});}},// 繪制文本，支持多行截斷drawText(ctx, text, x, y, maxWidth, lineHeight, maxLines = 3) {if (!text) return;let lines = [];let currentLine = '';for (let i = 0; i < text.length; i++) {currentLine += text[i];const currentWidth = ctx.measureText(currentLine).width;if (currentWidth > maxWidth) {lines.push(currentLine.slice(0, -1));currentLine = text[i];}}if (currentLine) {lines.push(currentLine);}// 限制最大行數if (lines.length > maxLines) {lines = lines.slice(0, maxLines);lines[maxLines - 1] += '...';}// 繪制每一行lines.forEach((line, index) => {ctx.fillText(line, x, y + index * lineHeight);});},// 繪制圖片，返回PromisedrawImage(ctx, url, x, y, width, height) {return new Promise((resolve, reject) => {if (!url) {resolve();return;}uni.getImageInfo({src: url,success: (res) => {ctx.drawImage(res.path, x, y, width, height);resolve();},fail: (err) => {console.error('獲取圖片信息失敗', err);reject(err);}});});},// 保存海報到相冊savePoster() {if (!this.posterUrl) {uni.showToast({title: '海報還未生成完成',icon: 'none'});return;}// 獲取保存到相冊權限uni.authorize({scope: 'scope.writePhotosAlbum',success: () => {uni.saveImageToPhotosAlbum({filePath: this.posterUrl,success: () => {uni.showToast({title: '保存成功',icon: 'success'});this.hide();},fail: (err) => {console.error('保存圖片失敗', err);uni.showToast({title: '保存失敗',icon: 'none'});}});},fail: () => {uni.showModal({title: '提示',content: '需要您授權保存圖片到相冊',confirmText: '去授權',cancelText: '取消',success: (res) => {if (res.confirm) {uni.openSetting();}}});}});}}
};
</script><style lang="scss">
.poster-container {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;.mask {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.7);}.poster-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;.poster-card {background-color: #fff;border-radius: 12rpx;overflow: hidden;padding: 20rpx;.poster-image {width: 100%;}}.button-group {display: flex;justify-content: space-between;margin-top: 40rpx;.poster-btn {width: 45%;height: 80rpx;line-height: 80rpx;border-radius: 40rpx;font-size: 28rpx;&.cancel {background-color: #f5f5f5;color: #666;}&.save {background-color: #fa6400;color: #fff;}}}}
}
</style>

然后在文章詳情頁添加海報分享按鈕和組件：

<!-- 在pages/article/detail.vue中添加 -->
<template><view class="article-container"><!-- 原有內容 --><!-- ... --><!-- 底部分享欄增加海報按鈕 --><view class="share-bar"><!-- 原有按鈕 --><!-- ... --><!-- 海報分享按鈕 --><button class="share-btn" @tap="showPoster"><text class="iconfont icon-poster"></text><text>生成海報</text></button></view><!-- 海報組件 --><share-poster :visible.sync="posterVisible" :article-info="posterInfo"></share-poster></view>
</template><script>
import ShareUtil from '@/utils/share.js';
import SharePoster from '@/components/share-poster.vue';export default {components: {SharePoster},data() {return {// 原有數據// ...// 海報相關posterVisible: false,posterInfo: {}};},methods: {// 原有方法// ...// 顯示海報showPoster() {// 準備海報數據this.posterInfo = {title: this.article.title,coverImg: this.article.coverImg,summary: '這是文章摘要，實際項目中可能需要從文章內容中提取...',qrCodeUrl: 'https://example.com/qrcode.jpg'  // 實際開發中需要動態生成};// 顯示海報組件this.posterVisible = true;}}
};
</script>

常見問題與解決方案

1. 小程序分享無法攜帶太多參數

微信小程序在分享時，path參數有長度限制，無法攜帶過多的查詢參數。

解決方案：使用短ID或者短鏈接，后端提供一個短鏈接服務。

// 使用短ID替代完整參數
return {title: this.article.title,path: `/pages/article/detail?sid=abc123`,  // 使用短IDimageUrl: this.article.coverImg
};

2. App端分享圖片不顯示

在App端分享時，如果圖片是相對路徑或者小程序專有路徑，可能導致分享圖片無法顯示。

解決方案：確保分享的圖片是完整的HTTP/HTTPS URL，必要時可以先將本地圖片上傳到服務器。

// 確保圖片URL是完整路徑
if (imageUrl.indexOf('http') !== 0) {// 如果不是以http開頭，可能需要轉換imageUrl = 'https://your-domain.com' + imageUrl;
}

3. H5端分享兼容性問題

Web Share API 目前并非所有瀏覽器都支持，特別是在較老的瀏覽器上。

解決方案：添加降級處理，不支持 Web Share API 時提供復制鏈接功能。

// 代碼中已實現了降級處理
if (navigator.share) {// 使用 Web Share API
} else {// 降級為復制鏈接this.copyShareLink(options);
}

4. 海報保存權限問題

用戶可能拒絕授予保存圖片到相冊的權限。

解決方案：添加權限說明和引導，如果用戶拒絕權限，提供跳轉到設置頁面的選項。

// 代碼中已實現了權限處理
uni.authorize({scope: 'scope.writePhotosAlbum',success: () => {// 有權限，直接保存},fail: () => {// 沒有權限，提示用戶并引導去設置頁面uni.showModal({title: '提示',content: '需要您授權保存圖片到相冊',confirmText: '去授權',cancelText: '取消',success: (res) => {if (res.confirm) {uni.openSetting();}}});}
});

性能優化與體驗提升

  1. 預加載分享圖片：提前下載和緩存分享圖片，避免分享時的延遲。
  2. 海報緩存：可以緩存已生成的海報，避免重復生成。
  3. 增加分享動畫：添加簡單的動畫效果，提升用戶體驗。
  4. 跟蹤分享數據：記錄用戶的分享行為，進行數據分析。
// 預加載分享圖
onReady() {// 預加載分享圖片uni.getImageInfo({src: this.article.coverImg,success: (res) => {// 緩存圖片路徑this.cachedImagePath = res.path;}});
}

總結

通過本文，我們詳細講解了如何在 UniApp 中實現一鍵分享功能，包括：

  1. 不同平臺分享機制的分析
  2. 封裝通用分享工具類
  3. 頁面中集成分享功能
  4. 實現分享海報生成與保存
  5. 常見問題的解決方案
  6. 性能優化建議

分享功能看似簡單，但要做好跨平臺適配和用戶體驗，還是需要考慮很多細節。希望本文能給大家在開發 UniApp 分享功能時提供一些幫助和思路。

在實際項目中，你可能還需要根據具體業務需求進行更多定制，比如增加更多分享渠道、自定義分享內容等。歡迎在評論區分享你的經驗和想法！

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

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

相關文章

Vue-監聽屬性

Vue-監聽屬性

監聽屬性 簡單監聽 點擊切換名字&#xff0c;來回變更Tom/Jerry&#xff0c;輸出 你好&#xff0c;Tom/Jerry 代碼 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>監聽屬性</title><!-- …
閱讀更多...
DeepSeek 賦能物聯網：從連接到智能的跨越之路

DeepSeek 賦能物聯網：從連接到智能的跨越之路

目錄 一、引言&#xff1a;物聯網新時代的開啟二、DeepSeek 技術揭秘2.1 DeepSeek 是什么2.2 DeepSeek 技術優勢 三、DeepSeek 與物聯網的融合之基3.1 物聯網發展現狀與挑戰3.2 DeepSeek 帶來的變革性突破 四、DeepSeek 在物聯網的多元應用場景4.1 智慧電力&#xff1a;開啟能源…
閱讀更多...
3.6/Q1，GBD數據庫最新文章解讀

3.6/Q1，GBD數據庫最新文章解讀

文章題目&#xff1a;Global, regional, and national burden of geriatric depressive disorders in people aged 60 years and older: an analysis of the Global Burden of Disease Study 2021 DOI&#xff1a;10.1186/s12991-025-00560-2 中文標題&#xff1a;60 歲及以上人…
閱讀更多...
LVGL學習筆記

LVGL學習筆記

文章目錄 一、 LVGL移植教程（GD32）一 并行驅動 LED二三一、 LVGL移植教程（GD32） 參考鏈接 1.GD32+LVGL移植教程（超詳細）——基于GD32F303X系列MCU 一 并行驅動 LED 根據您提供的引腳信號（DCLK、DISP、HSYNC、VSYNC、DE），可以判斷這是一款采用 TTL/Parallel RGB 接口…
閱讀更多...
軟件架構之--論微服務的開發方法1

軟件架構之--論微服務的開發方法1

論微服務的開發方法1 摘要 2023年 2月，本人所在集團公司承接了長三角地區某省漁船圖紙電子化審查系統項目開發，該項目旨在為長三角地區漁船建造設計院、以及漁船圖紙審查機構提供一個便捷的漁船圖紙電子化審查服務平臺。在此項目中，我作為項目組成員參與項目的建設工作，并…
閱讀更多...
如何在終端/命令行中把PDF的每一頁轉換成圖片（PNG）

如何在終端/命令行中把PDF的每一頁轉換成圖片（PNG）

今天被對象安排了一個任務&#xff1a; 之前自己其實也有這個需要&#xff0c;但是吧&#xff0c;我懶&#xff1a;量少拖拽&#xff0c;量大就放棄。但這次躲不過去了&#xff0c;所以研究了一下有什么工具可以做到這個需求。 本文記錄我這次發現的使用 XpdfReader 的方法。…
閱讀更多...
mac安裝cast

mac安裝cast

背景 pycharm本地運行腳本時提示cast沒有安裝 問題原因 腳本嘗試調用cast命令&#xff08;以太坊開發工具foundry中的子命令&#xff09;&#xff0c;但您的系統未安裝該工具。 從日志可見&#xff0c;錯誤發生在通過sysutil.py執行shell命令時。 解決方案 方法1&#xf…
閱讀更多...
【搭建Node-RED + MQTT Broker實現AI大模型交互】

【搭建Node-RED + MQTT Broker實現AI大模型交互】

搭建Node-RED MQTT Broker實現AI大模型交互 搭建Node-RED MQTT Broker實現AI大模型交互一、系統架構二、環境準備與安裝1. 安裝Node.js2. 安裝Mosquitto MQTT Broker3. 配置Mosquitto4. 安裝Node-RED5. 配置Node-RED監聽所有網絡接口6. 啟動Node-RED 三、Node-RED流程配置1. …
閱讀更多...
算法第21天 | 第77題. 組合、216. 組合總和 III、17. 電話號碼的字母組合

算法第21天 | 第77題. 組合、216. 組合總和 III、17. 電話號碼的字母組合

回溯基礎概念 什么是回溯&#xff1f; 如何實現回溯&#xff1f; 第77題. 組合 題目 思路與解法 carl的講解&#xff1a; 回溯搜索法 class Solution:def combine(self, n: int, k: int) -> List[List[int]]:self.path []self.res []self.backtracking(n, k, 1)retu…
閱讀更多...
嵌入式硬件篇---拓展板

嵌入式硬件篇---拓展板

文章目錄 前言 前言 本文簡單介紹了拓展板的原理以及使用。
閱讀更多...
【深度學習基礎】從感知機到多層神經網絡：模型原理、結構與計算過程全解析

【深度學習基礎】從感知機到多層神經網絡：模型原理、結構與計算過程全解析

【深度學習基礎】從感知機到多層神經網絡&#xff1a;模型原理、結構與計算過程全解析 1. 引言 神經網絡的重要性&#xff1a; 作為人工智能的核心技術之一&#xff0c;神經網絡通過模擬人腦神經元的工作機制&#xff0c;成為解決復雜模式識別、預測和決策任務的利器。從圖像分…
閱讀更多...
sparkSQL讀入csv文件寫入mysql（2）

sparkSQL讀入csv文件寫入mysql（2）

&#xff08;二&#xff09;創建數據庫和表 接下來&#xff0c;我們去創建一個新的數據庫&#xff0c;數據表&#xff0c;并插入一條數據。 -- 創建數據庫 CREATE DATABASE spark; -- 使用數據庫 USE spark;-- 創建表 create table person(id int, name char(20), age int);-- …
閱讀更多...
JVM如何處理多線程內存搶占問題

JVM如何處理多線程內存搶占問題

目錄 1、堆內存結構 2、運行時數據 3、內存分配機制 3.1、堆內存結構 3.2、內存分配方式 1、指針碰撞 2、空閑列表 4、jvm內存搶占方案 4.1、TLAB 4.2、CAS 4.3、鎖優化 4.4、逃逸分析與棧上分配 5、問題 5.1、內存分配競爭導致性能下降 5.2、偽共享&#xff08…
閱讀更多...
Ubuntu---omg又出bug了

Ubuntu---omg又出bug了

自用遇到問題的合集 250518——桌面文件突然消失 ANS&#xff1a;參考博文
閱讀更多...
正則表達式與文本處理的藝術

正則表達式與文本處理的藝術

引言 在前端開發領域&#xff0c;文本處理是一項核心技能。正則表達式作為一種強大的模式匹配工具&#xff0c;能夠幫助我們高效地處理各種復雜的文本操作任務。 正則表達式基礎 什么是正則表達式&#xff1f; 正則表達式是一種用于匹配字符串中字符組合的模式。它由一系列…
閱讀更多...
初學c語言15（字符和字符串函數）

初學c語言15（字符和字符串函數）

一.字符串分類函數 頭文件&#xff1a;ctype.h 作用&#xff1a;判斷是什么類型的字符 函數舉例&#xff1a; 函數 符合條件就為真 islower判斷是否為小寫字符&#xff08;a~z&#xff09;isupper判斷是否為大寫字符&#xff08;A~Z&#xff09;isdigit十進制數字&#xf…
閱讀更多...
12-串口外設

12-串口外設

一、串口外設的基本概述 1、基本定義 串口通信&#xff0c;通過在通信雙方之間以比特位&#xff08;bit&#xff09;的形式逐一發送或接收數據&#xff0c;實現了信息的有效傳遞。其通信方式不僅簡單可靠&#xff0c;而且成本很低。 2、stm32的串口 下面是兩個MCU的數據交互&…
閱讀更多...
NE555雙音門鈴實驗

NE555雙音門鈴實驗

1腳為地。通常被連接到電路共同接地。 2腳為觸發輸入端。 3腳為輸出端&#xff0c;輸出的電平狀態受觸發器的控制&#xff0c;而觸發器受上比較器6腳和下比較器2腳的控制。當觸發器接受上比較器A1從R腳輸入的高電平時&#xff0c;觸發器被置于復位狀態&#xff0c;3腳輸出低電…
閱讀更多...
Redis分布式鎖實現

Redis分布式鎖實現

概述 為什么要要分布式鎖 在并發編程中&#xff0c;我們通過鎖&#xff0c;來避免由于競爭而造成的數據不一致問題。 通常&#xff0c;我們以synchronized 、Lock來使用它。Java中的鎖&#xff0c;只能保證在同一個JVM進程內中執行 如果需要在分布式集群環境下的話&#xff0…
閱讀更多...
軟件設計師-錯題筆記-網絡基礎知識

軟件設計師-錯題筆記-網絡基礎知識

1. 解析&#xff1a; 1.子網劃分相關知識&#xff1a; 在IPv4地址中&#xff0c;/27表示子網掩碼為255.255.255.224&#xff0c;它將一個C類網絡&#xff08;默認子網掩碼255.255.255.0&#xff09;進一步劃分 對于子網掩碼255.255.255.224&#xff0c;其對應的二進制為111…
閱讀更多...
最新文章

Copyright @ 2022~2023