图库详情增加分享功能

pages-chart/chartDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <web-view :src="url"></web-view>
+  <web-view :src="url" @message="handleGetMessage"></web-view>
 </template>
 
 <script>
@@ -7,12 +7,61 @@ import {h5BaseUrl} from '../utils/config'
 export default {
     data () {
         return {
-            url:''
+            url:'',
+            msgObj:{},//{title:分享的标题,shareImg:分享的图片,params:页面参数}
+
         }
     },
     onLoad(options) {
-        const timestamp=new Date().getTime()
-        this.url=`${h5BaseUrl}/hzyb/chart/detail?ChartInfoId=${options.chartInfoId}&token=${this.$store.state.user.token}&searchVal=${options.searchVal}&MyChartId=${options.MyChartId}&MyChartClassifyId=${options.MyChartClassifyId}&timestamp=${timestamp}`
+        this.init(options)
+        // const timestamp=new Date().getTime()
+        // this.url=`${h5BaseUrl}/hzyb/chart/detail?ChartInfoId=${options.chartInfoId}&token=${this.$store.state.user.token}&searchVal=${options.searchVal}&MyChartId=${options.MyChartId}&MyChartClassifyId=${options.MyChartClassifyId}&timestamp=${timestamp}`
+    },
+    onShareAppMessage() {
+        let paramsStr=''
+        for(const key in this.msgObj.params){
+            if(!paramsStr){
+                paramsStr=`${key}=${this.msgObj.params[key]}`
+            }else{
+                paramsStr=`${paramsStr}&${key}=${this.msgObj.params[key]}`
+            }
+        }
+        return {
+            title:this.msgObj.title||'ETA图库',
+            path:`/pages-chart/chartDetail?${paramsStr}`,
+            imageUrl:this.msgObj.shareImg||''
+        }
+    },
+
+    methods: {
+        init(options){
+            const queryObj={
+                ChartInfoId:options.chartInfoId,
+                searchVal:encodeURIComponent(options.searchVal),//避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent
+                MyChartId:options.MyChartId,
+                MyChartClassifyId:options.MyChartClassifyId,
+                token:this.$store.state.user.token||uni.getStorageSync("token"),
+                timestamp:new Date().getTime(),//防止缓存
+            }
+            console.log('要处理的参数',queryObj);
+            let queryObjStr=''
+            for (const key in queryObj) {
+                if(!queryObjStr){
+                    queryObjStr=`${key}=${queryObj[key]}`
+                }else{
+                    queryObjStr=`${queryObjStr}&${key}=${queryObj[key]}`
+                }
+            }
+            console.log('拼接字符串：',queryObjStr);
+            this.url=`${h5BaseUrl}/hzyb/chart/detail?${queryObjStr}#wechat_redirect`
+        },
+
+        // 获取到用户点击转发时从h5页面传来的参数
+        handleGetMessage(e){
+            const data=e.detail.data[e.detail.data.length-1]
+            console.log('h5传来的数据',data);
+            this.msgObj=data
+        }
     }
 }
 </script>