引入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

@@ -24,4 +24,3 @@
   background-color: #ffffff;
 }
 </style>
-

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

@@ -10,22 +10,63 @@
         这是发布的一些文字内容，文字内容，文字过多显示第二行效果。
       </p>
       <div class="img-list">
-				<img v-for="item in 4" :key="item.name" src="@/assets/images/avatar.png" alt>
+        <img
+          v-for="item in 4"
+          :key="item.name"
+          src="@/assets/images/avatar.png"
+          alt
+        />
       </div>
-			<div class="share">
+      <!-- <div class="share">
         <div class="share-item">
-					<img src="@/assets/images/转发.png" alt>
+          <img
+            :src="
+              shareSelected
+                ? `${require('@/assets/images/转发_选中.png')}`
+                : `${require('@/assets/images/转发.png')}`
+            "
+            alt
+            @click="onShare"
+          />
           <span>12</span>
         </div>
         <div class="share-item">
-					<img src="@/assets/images/点赞.png" alt>
+          <img
+            :src="
+              agreeSelected
+                ? `${require('@/assets/images/点赞_选中.png')}`
+                : `${require('@/assets/images/点赞.png')}`
+            "
+            alt
+            @click="onAgree"
+          />
           <span>12</span>
         </div>
-			</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;
@@ -96,8 +137,8 @@
     img {
       width: 16px;
       height: 14px;
-			margin-right: 5px
-		};
+      margin-right: 5px;
+    }
   }
 }
 </style>