您现在的位置是：网站首页> 编程资料编程资料

使用uniapp实现发布朋友圈功能_javascript技巧_

2023-05-24 343人已围观

简介使用uniapp实现发布朋友圈功能_javascript技巧_

效果图如下图，样式可根据需求自行调整

template部分

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('上传进度',progress); // }).then(url=>{ // this.imageList.push(url); // this.$emit('update',this.imageList); // }) }) // this.imageList = [...this.imageList,...res.tempFilePaths]; // this.$emit('update',this.imageList); } }) },

预览图片

// 预览图片 preview(item) { uni.previewImage({ current: item, urls: this.imageList }) },

删除图片

// 删除图片 deleteImage(item) { uni.showModal({ content: '是否要删除该图片？', success: (res) => { if (res.confirm) { // 执行删除 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 微信小程序分享、分享朋友圈功能

页内自定义分享按钮
当页面js上没有添加事件“onShareAppMessage”，右上角‘…’不会出现“转发”事件。
如果有事件，但是没有定义事件内容的话，转发的卡片则是当前页面的截屏信息。

官方文档：https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

方式1：小程序右上角原生菜单自带的分享按钮

方式2：在页面中放置的分享按钮

实现如下：
创建一个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') { //这块需要传参，不然链接地址进去获取不到数据 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中引入