亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用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)文章

最新評(píng)論