新建分支

main.js

@@ -4,6 +4,9 @@ import uView from 'uview-ui'
 import request from 'common/request.js'
 import "./common/icon/iconfont.css"
 
+import share from './common/share.js' //引入分享API
+Vue.mixin(share)
+
 Vue.prototype.$request = request
 Vue.use(uView)
 

pages/vlog/scenicList/scenicList.vue

@@ -5,14 +5,14 @@
 				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
 				<view class="title">
 					<text>[ 样片1 ]</text>
-					<u-icon name="share"></u-icon>
+					<button class="btnn" open-type="share"><u-icon name="share"></u-icon></button>
 				</view>
 			</view>
 			<view class="item">
 				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
 				<view class="title">
 					<text>[ 样片2 ]</text>
-					<u-icon name="share"></u-icon>
+					<button class="btnn" open-type="share"><u-icon name="share"></u-icon></button>
 				</view>
 			</view>
 		</view>
@@ -47,7 +47,11 @@
 	.content{padding: 0 20rpx;height: 100%;width: 100%;background-color: #192033;
 		.item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center;
 			.video{height: 350rpx;border-radius: 10rpx;width: 100%;}
-			.title{height: 60rpx;display: flex;align-items: center;justify-content: space-between;font-weight:bold;color: #fff;font-size: 32rpx;padding: 0 10rpx;}
+			.title{height: 60rpx;margin-top: 20rpx;
+				text{float: left;height: 60rpx;line-height: 60rpx;color: #FFE600;font-weight: bold;}
+				.btnn{height: 60rpx;width: 60rpx;line-height: 60rpx;float: right;text-align: center;padding: 0;margin: 0;background-color: #192033;color: #fff;
+				}
+			}
 		}
 	
 		.bottom{height: 150rpx;width: 100%;position: relative;position: fixed;bottom: 0;right:0rpx;

pages/vlog/vlogIndex/vlogIndex.vue

@@ -39,7 +39,7 @@
 			<view class="shuxian"></view>
 			<view>定制我的照片集</view>
 		</view>
-		<navigator url="../vlogList/vlogList">
+		<navigator url="">
 			<view class="photoGallery">
 				<image class="img" src="../../../static/img/vlog/icon/bg.jpg"></image>
 				<view class="access"></view>
@@ -82,6 +82,13 @@
 export default {
     data() {
         return {
+			share:{
+			    title:'vlog1231231',
+			    path:'/pages/index/index',
+			    imageUrl:'',
+			    desc:'',
+			    content:''
+			},
 			search:"",//景区
 			list: [
 				{
@@ -98,11 +105,15 @@ export default {
     },
 	onLoad(){//代替 vue 里面的 created
 		this.openCamera()
+		
 	},
 	onReady() {//代替 vue 里面的 mounted
 	},
+	onShareAppMessage(res){
+		success:(res=>{console.log(res);})
+	},
     methods: {
-		openCamera(){//用户首次进入打开摄像头
+		openCamera(){//用户首次进入打开摄像头权限
 			uni.authorize({
 				scope:'scope.camera',
 				success: (res) => {

pages/vlog/vlogList/vlogList.vue

@@ -3,11 +3,11 @@
 		<view v-if="1" style="padding-top: 30rpx;">
 			<view class="item">
 				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
-					<view class="btnn">分享下载</view>
+					<button class="btnn" open-type="share">分享下载</button>
 			</view>
 			<view class="item">
 				<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  @error="error" controls></video>
-				<view class="btnn">分享下载</view>
+				<button class="btnn" open-type="share">分享下载</button>
 			</view>
 		</view>
 		<view v-else class="empty">
@@ -30,37 +30,6 @@
 				aa:1
 			}
 		},
-		onLoad(){
-			wx.showShareMenu({
-				withShareTicket:true,
-				menus:["shareAppMessage","shareTimeline"]
-			})
-		},
-		onShareAppMessage(res) {//发送给朋友
-			// 此处的openid为分享者的部分信息，需要传递给其他人
-			let openid = uni.getStorageSync('openid');
-			if (openid) {
-				return {
-					title: '胖丁旅游',
-					type: 0,
-					path: '/pages/index/index?id=' + openid,
-					summary: "",
-					imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
-				}
-			}
-		},
-		onShareTimeline(res) {//分享到朋友圈
-			let openid = uni.getStorageSync('openid');
-			if (openid) {
-				return {
-					title: '胖丁旅游',
-					type: 0,
-					query: 'id=' + openid,
-					summary: "",
-					imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
-				}
-			}
-		},
 		methods: {
 			error(e){//视频播放出错触发函数
 				uni.showModal({content: e.target.errMsg,showCancel: false})
@@ -74,7 +43,7 @@
 	.content{padding: 0 20rpx;height: 100%;width: 100%;text-align: center;
 		.item{box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 0 10rpx;border-radius: 10rpx;background-color: #192033;margin-bottom:30rpx;text-align: center;
 			.video{height: 350rpx;border-radius: 10rpx;width: 100%;}
-			.btnn{display: inline-block;font-size:28rpx;border-radius:40rpx;text-align: center;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;}
+			.btnn{display: inline-block;font-size:28rpx;border-radius:40rpx;text-align: center;background-color: #FFE600;margin: 30rpx 0;font-weight: bold;}
 		}
 		.empty{text-align: center;padding-top: 30rpx;
 			.empty1{height: 200rpx;background:linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);line-height: 200rpx;border-radius: 10rpx;margin-bottom: 300rpx;