使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能
更新時(shí)間：2022年09月27日 15:17:40 作者：一個(gè)喜歡簡(jiǎn)單的前端
這篇文章主要介紹了使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過頁內(nèi)自定義分享按鈕，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
效果圖如下圖，樣式可根據(jù)需求自行調(diào)整
template部分
<view class="flex flex-wrap"> <view v-for="(item,index) in imageList" :key='index' class="flex align-center justify-center pt-2 position-relative"> <image :src="item" class="bg-light rounded" style="" @click="preview(item)"></image> <view class="flex align-center justify-center bg-danger rounded-circle " style="" @click="deleteImage(item)"> <text class="iconfont text-white font-small">X</text> </view> </view> <view v-if="imageList.length < 9" style="" class="flex align-center justify-center" @click="chooseImage"> <view class="flex align-center justify-center bg-light rounded" style="width: 210rpx;height: 210rpx;"> <!-- <text class="text-light-muted" style="font-size: 100rpx;">+</text> --> <image src="../../static/images/ings/circle/add1.png" mode=""></image> </view> </view> </view>
script部分
選擇圖片（通過upload得到每張圖片地址）
chooseImage() {
var that = this
uni.chooseImage({
count: 9 - this.imageList.length,
sizeType: ['compressed'],
success: (res) => {
// 上傳
res.tempFilePaths.forEach(path => {
that.$api.upload({
url: "common/upload",
// filePath: res.tempFilePaths[0],
filePath: path,
success: (res) => {
this.imageList.push(res.fullurl);
this.imageLi.push(res.url)
}
});
// $H.upload('/upload',{
// filePath:path
// },(progress)=>{
// console.log('上傳進(jìn)度',progress);
// }).then(url=>{
// this.imageList.push(url);
// this.$emit('update',this.imageList);
// })
})
// this.imageList = [...this.imageList,...res.tempFilePaths];
// this.$emit('update',this.imageList);
}
})
},預(yù)覽圖片
// 預(yù)覽圖片
preview(item) {
uni.previewImage({
current: item,
urls: this.imageList
})
},刪除圖片
// 刪除圖片
deleteImage(item) {
uni.showModal({
content: '是否要?jiǎng)h除該圖片？',
success: (res) => {
if (res.confirm) {
// 執(zhí)行刪除
let index = this.imageList.findIndex(url => url === item);
if (index !== -1) {
this.imageList.splice(index, 1);
this.imageLi.splice(index, 1);
this.$emit('update', this.imageList);
}
}
}
})
}uniapp 微信小程序分享、分享朋友圈功能
頁內(nèi)自定義分享按鈕
當(dāng)頁面js上沒有添加事件“onShareAppMessage”，右上角‘…’不會(huì)出現(xiàn)“轉(zhuǎn)發(fā)”事件。
如果有事件，但是沒有定義事件內(nèi)容的話，轉(zhuǎn)發(fā)的卡片則是當(dāng)前頁面的截屏信息。
官方文檔：https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
方式1：小程序右上角原生菜單自帶的分享按鈕
方式2：在頁面中放置的分享按鈕
實(shí)現(xiàn)如下：
創(chuàng)建一個(gè)share.js文件
export default {
data() {
return {
}
},
onLoad: function() {
wx.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"]
})
},
onShareAppMessage(res) {
let that = this;
let imageUrl = that.shareUrl || '';
if (res.from === 'button') {
//這塊需要傳參，不然鏈接地址進(jìn)去獲取不到數(shù)據(jù)
let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
return {
title: '商品分享~',
path: path,
imageUrl: imageUrl
};
}
if (res.from === 'menu') {
return {
title: '商通線上商城',
path: '/pages/tabBarPro/index/index',
imageUrl: imageUrl
};
}
},
// 分享到朋友圈
onShareTimeline() {
return {
title: '商通線上商城',
path: '/pages/index/index',
imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
};
},
methods: {
}
}
在main.js中引入
頁面內(nèi)直接這樣寫就好啦
<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> <u-icon name="zhuanfa"></u-icon>分享 <button>
效果如下：
注意：
注意：分享朋友圈和微信好友函數(shù)和 onLoad 等生命周期函數(shù)同級(jí)
到此這篇關(guān)于使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能的文章就介紹到這了,更多相關(guān)uniapp發(fā)布朋友圈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js鍵盤事件實(shí)現(xiàn)人物的行走，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框?qū)嵗a
這篇文章主要介紹了javascript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript執(zhí)行模型的相關(guān)資料。幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
精通Javascript系列之?dāng)?shù)據(jù)類型 字符串
下面先講一下字符串String字符串由零個(gè)或者多個(gè)字符構(gòu)成。字符可以包括字母、數(shù)字、標(biāo)點(diǎn)符號(hào)和空格。2011-06-06
我們?cè)趯W(xué)習(xí)JavaScript中,難免都會(huì)去網(wǎng)上查一些資料,也許偶爾就會(huì)遇到“事件委托”,但是,大多數(shù)時(shí)說的是“事件綁定”,對(duì)于“事件委托”,或是不提,或是淺嘗輒止,對(duì)于我這個(gè)比較好奇的人來說,實(shí)在很頭疼,尤其是想更多的了解“事件委托”的時(shí)候2015-06-06
這篇文章主要介紹了在微信小程序中使用圖表的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript電子時(shí)鐘倒計(jì)時(shí)
這篇文章主要介紹了JavaScript電子時(shí)鐘倒計(jì)時(shí)的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-01-01
Js如何使用ffmpeg進(jìn)行視頻剪輯和畫面截取等功能
在日常處理視頻文件時(shí)常常會(huì)用到視頻片段的截取功能,FFmpeg支持該功能,下面這篇文章主要給大家介紹了關(guān)于Js如何使用ffmpeg進(jìn)行視頻剪輯和畫面截取等功能的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)懸浮按鈕組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了js實(shí)現(xiàn)動(dòng)態(tài)添加或刪除網(wǎng)址功能，以及js實(shí)現(xiàn)網(wǎng)頁收藏功能，感興趣的小伙伴們可以參考一下2015-12-12