1.创建模拟接口数据展示

2.实现页面虚拟功能
3.测试页面效果

pages/index/detailPage/index.vue

@@ -8,19 +8,19 @@
 		    <text class="price-style">￥11999</text> 
 		</view>
 		
-		<view class="share-box">
-			<view>分销商分享给好友，好友购买产品成功后即可获</view>
-			<view>得分享奖励</view>
-			<view>单笔最高可赚￥200.00</view>
-			<view>快去分享吧</view>
-			<button type="default">分享</button>
-		</view>
-		
-		<view class="share-box" style="height: 200upx;margin-top: 2%;">
-			<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
-			<view>￥kSfsDfrtrEjt￥</view>
-			<button type="default">一键复制</button>
-		</view>
+	<view class="share-box">
+		<view>分销商分享给好友，好友购买产品成功后即可获</view>
+		<view>得分享奖励</view>
+		<view>单笔最高可赚￥200.00</view>
+		<view>快去分享吧</view>
+		<button type="default" open-type="share">分享</button>
+	</view>
+	
+	<view class="share-box" style="height: 200upx;margin-top: 2%;" @longpress="copyCode">
+		<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
+		<view>￥kSfsDfrtrEjt￥</view>
+		<button type="default" @click="copyCode">一键复制</button>
+	</view>
 		
 		<view class="product-title">产品详情</view>
 	   
@@ -39,6 +39,13 @@
 		onLoad() {
 
 		},
+		onShareAppMessage() {
+			console.log(111);
+			  return {
+			      title: '分销小助手',
+			      path:'/pages/index/index?inviteId=' + '111'
+			    }
+		},
 		methods: {
 			goDetail(){
 				uni.navigateTo({
@@ -47,6 +54,17 @@
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+		    copyCode(){
+				uni.setClipboardData({
+					data:'xxx',
+					success() {
+						uni.showToast({
+							icon:'none',
+							title:'复制成功'
+						})
+					}
+				})
 			}
 		}
 	}

pages/index/index.vue

@@ -6,30 +6,23 @@
 			<view>得分享奖励</view>
 			<view>单笔最高可赚￥200.00</view>
 			<view>快去分享吧</view>
-			<button type="default">分享</button>
+			<button type="default" open-type="share">分享</button>
 		</view>
 		
-		<view class="share-box" style="height: 200upx;margin-top: 2%;">
+		<view class="share-box" style="height: 200upx;margin-top: 2%;" @longpress="copyCode">
 			<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
 			<view>￥kSfsDfrtrEjt￥</view>
-			<button type="default">一键复制</button>
+			<button type="default" @click="copyCode">一键复制</button>
 		</view>
 		
 		<view class="product-title">推荐产品</view>
 	   
 		<view class="recommend-box">
-			<view class="product-box" @click="goDetail">
-				<image src="/static/bed-bg.png"></image>
+			<view class="product-box" v-for="item in productList" :key="item.id"  @click="goDetail">
+				<image :src="item.imgUrl"></image>
 				<view class="detail-box">
-					<view>甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…</view>
-					<view style="color: #999;">￥11999</view>
-				</view>
-			</view>
-			<view class="product-box">
-				<image src="/static/bed2-bg.png"></image>
-				<view class="detail-box">
-					<view>甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…</view>
-					<view style="color: #999;">￥13999</view>
+					<view>{{item.productTitle}}</view>
+					<view style="color: #999;">￥{{item.price}}</view>
 				</view>
 			</view>
 		</view>
@@ -41,12 +34,45 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				title: 'Hello',
+				productList:[
+					{   
+						id:'1',
+						imgUrl:'/static/bed-bg.png',
+						productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
+						price:'13999'
+					},
+					{   
+						id:'2',
+						imgUrl:'/static/bed2-bg.png',
+						productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
+						price:'15999'
+					},
+					{   
+						id:'3',
+						imgUrl:'/static/bed-bg.png',
+						productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
+						price:'16999'
+					},
+					{   
+						id:'4',
+						imgUrl:'/static/bed2-bg.png',
+						productTitle:'甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…',
+						price:'18999'
+					}
+				]
 			}
 		},
 		onLoad() {
 
 		},
+		onShareAppMessage() {
+			console.log(111);
+			  return {
+			      title: '分销小助手',
+			      path:'/pages/index/index?inviteId=' + '111'
+			    }
+		},
 		methods: {
 			goDetail(){
 				uni.navigateTo({
@@ -55,6 +81,17 @@
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			copyCode(){
+				uni.setClipboardData({
+					data:'xxx',
+					success() {
+						uni.showToast({
+							icon:'none',
+							title:'复制成功'
+						})
+					}
+				})
 			}
 		}
 	}