引入wvjsBridge

H5/src/utils/bridge.js

+var u = navigator.userAgent;
+var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+// 注册jsbridge
+function connectWebViewJavascriptBridge(callback) {
+	if (isAndroid) {
+		if (window.WebViewJavascriptBridge) {
+			callback(WebViewJavascriptBridge)
+		} else {
+			document.addEventListener(
+				'WebViewJavascriptBridgeReady',
+				function () {
+					callback(WebViewJavascriptBridge)
+				},
+				false
+			);
+		}
+		return;
+	}
+	if (isiOS) {
+		if (window.WebViewJavascriptBridge) {
+			return callback(WebViewJavascriptBridge);
+		}
+		if (window.WVJBCallbacks) {
+			return window.WVJBCallbacks.push(callback);
+		}
+		window.WVJBCallbacks = [callback];
+		var WVJBIframe = document.createElement('iframe');
+		WVJBIframe.style.display = 'none';
+		WVJBIframe.src = 'https://__bridge_loaded__';
+		document.documentElement.appendChild(WVJBIframe);
+		setTimeout(function () {
+			document.documentElement.removeChild(WVJBIframe)
+		}, 0)
+	}
+}
+// 调用注册方法
+connectWebViewJavascriptBridge(function (bridge) {
+	if (isAndroid) {
+		bridge.init(function (message, responseCallback) {
+			responseCallback(data);
+		});
+	}
+
+});
\ No newline at end of file

H5/src/views/income/allIncome.vue

 <template>
-	<div class="all-income">
-		<div v-for="item in 10" :key="item.id" class="list-item">
-			<span style="color:#333333">2021-02</span>
-			<span>+989</span>
-		</div>
-	</div>
+  <div class="all-income">
+    <div v-for="item in 10" :key="item.id" class="list-item">
+      <span style="color:#333333">2021-02</span>
+      <span>+989</span>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .all-income {
-	box-sizing: border-box;
-	padding: 10px 16px;
+  box-sizing: border-box;
+  padding: 10px 16px;
 }
 .list-item {
-	box-sizing: border-box;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: 50px;
-	margin-bottom: 10px;
-	padding: 0 15px;
-	font-size: 16px;
-	background-color: #ffffff;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  margin-bottom: 10px;
+  padding: 0 15px;
+  font-size: 16px;
+  background-color: #ffffff;
 }
 </style>
-

H5/src/views/moments/components/momentItem.vue

@@ -9,23 +9,64 @@
       <p class="content">
         这是发布的一些文字内容，文字内容，文字过多显示第二行效果。
       </p>
-			<div class="img-list">
-				<img v-for="item in 4" :key="item.name" src="@/assets/images/avatar.png" alt>
-			</div>
-			<div class="share">
-				<div class="share-item">
-					<img src="@/assets/images/转发.png" alt>
-					<span>12</span>
-				</div>
-				<div class="share-item">
-					<img src="@/assets/images/点赞.png" alt>
-					<span>12</span>
-				</div>
-			</div>
+      <div class="img-list">
+        <img
+          v-for="item in 4"
+          :key="item.name"
+          src="@/assets/images/avatar.png"
+          alt
+        />
+      </div>
+      <!-- <div class="share">
+        <div class="share-item">
+          <img
+            :src="
+              shareSelected
+                ? `${require('@/assets/images/转发_选中.png')}`
+                : `${require('@/assets/images/转发.png')}`
+            "
+            alt
+            @click="onShare"
+          />
+          <span>12</span>
+        </div>
+        <div class="share-item">
+          <img
+            :src="
+              agreeSelected
+                ? `${require('@/assets/images/点赞_选中.png')}`
+                : `${require('@/assets/images/点赞.png')}`
+            "
+            alt
+            @click="onAgree"
+          />
+          <span>12</span>
+        </div>
+      </div> -->
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  name: "MomentItem",
+  data() {
+    return {
+      shareSelected: false,
+      agreeSelected: false
+    };
+  },
+  methods: {
+    onShare() {
+      this.shareSelected = !this.shareSelected;
+    },
+    onAgree() {
+      this.agreeSelected = !this.agreeSelected;
+    }
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 .moment-item {
   margin-bottom: 10px;
@@ -65,39 +106,39 @@
 .detail {
   padding-left: 46px;
   .content {
-		margin-bottom: 10px;
+    margin-bottom: 10px;
     font-family: PingFang-SC-Regular;
     font-size: 14px;
     color: #333333;
   }
-	.img-list {
-		display: flex;
+  .img-list {
+    display: flex;
     flex-wrap: wrap;
-		justify-content: flex-start;
-		align-items: center;
-		img {
-			width: auto;
-			height: 76px;
-			margin: 7px 7px 0 7px;
-		}
-	}
-	.share {
-		display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    img {
+      width: auto;
+      height: 76px;
+      margin: 7px 7px 0 7px;
+    }
+  }
+  .share {
+    display: flex;
     justify-content: flex-end;
     align-items: center;
     flex-wrap: nowrap;
-		.share-item {
-			font-size: 14px;
-			color: #666666;
-			&:nth-child(1) {
-				margin-right: 20px;
-			}
-		}
-		img {
-			width: 16px;
-			height: 14px;
-			margin-right: 5px
-		};
-	}
+    .share-item {
+      font-size: 14px;
+      color: #666666;
+      &:nth-child(1) {
+        margin-right: 20px;
+      }
+    }
+    img {
+      width: 16px;
+      height: 14px;
+      margin-right: 5px;
+    }
+  }
 }
 </style>