使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能
效果圖如下圖,樣式可根據(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)文章
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個(gè)小東西,ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04基于es6三點(diǎn)運(yùn)算符的使用方法(實(shí)例講解)
下面小編就為大家?guī)硪黄谌c(diǎn)運(yùn)算符的使用方法(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10JS截取字符串 subStr()、substring()、slice() 方法示例詳解
這篇文章主要介紹了JS截取字符串 subStr()、substring()、slice() 方法,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Javascript發(fā)送AJAX請(qǐng)求實(shí)例代碼
這篇文章主要介紹了Javascript發(fā)送AJAX請(qǐng)求的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08js window.onload 加載多個(gè)函數(shù)和追加函數(shù)詳解
本篇文章主要是對(duì)js window.onload 加載多個(gè)函數(shù)和追加函數(shù)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理
這篇文章主要介紹了JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理,本文總結(jié)出了mouse事件的一些定論,并分別給出了JavaScript和JQuery測(cè)試代碼,需要的朋友可以參考下2015-06-06