新增加跳转小程序组件

src/components/launchWeapp/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="navi-container">
+        <div class="fake-btn" id="weappBtn">点击跳转小程序</div>
+        <wx-open-launch-weapp @launch="launch" appid="wx6163d215ef686f78" path="pages/home/index.html"
+            style="position: absolute;top: 0;left: 0;width: 100%;height: 50px;z-index: 10;">
+            <script type="text/wxtag-template">
+          <style>.btn {width: 100%;height: 50px;position: absolute;left: 0;top: 0;z-index: 99;background: transparent;border: none;}</style>
+          <button class="btn" id="NaviToMini"></button>
+        </script>
+        </wx-open-launch-weapp>
+    </div>
+</template>
+<script>
+import { setConfig } from '@/utils/jweixin'
+
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+        setConfig()
+    },
+    methods: {
+        launch(e) {
+            console.log("获取小程序 允许 按钮 操作回调", e)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.navi-container {
+    position: relative;
+    width: 200px;
+    height: 30px;
+    margin: 18px auto;
+   
+    .fake-btn {
+        width: 180px;
+        height: 30px;
+        margin: 0 auto;
+        border-radius: 25px;
+        border: 1px solid rgba(62, 134, 255);
+        color: #fff;
+        font-size: 16px;
+        text-align: center;
+        line-height: 30px;
+        z-index: 1;
+        background: linear-gradient(to right, #3e86ff, #5f9af9);
+    }
+}
+</style>

src/main.js

@@ -28,6 +28,7 @@ Vue.prototype.$tips = Tips
 //开发环境使用，生产环境自动取消
 import Vconsole from 'vconsole'
 import Perfect from '@/components/Perfect'
+Vue.config.ignoredElements = ["wx-open-launch-weapp"];
 Vue.component('Perfect', Perfect)
 if (process.env.NODE_ENV !== 'production') {
   new Vconsole()

src/utils/jweixin.js

@@ -8,7 +8,8 @@ export const setConfig = function (jsApiList = []) {
       timestamp: res.data.timestamp,
       nonceStr: res.data.nonceStr,
       signature: res.data.signature,
-      jsApiList
+      jsApiList,
+      openTagList:['wx-open-launch-weapp']
     })
   })
 }

src/views/houseQR/index.vue

@@ -54,7 +54,7 @@
           <div class="title"><span>服务矩阵</span></div>
           <div class="my_community flex flex-wrap">
             <div style="width: 25%" class="flex flex-y flex-center1 flex-center2" v-for="(item, index) in serverList"
-            :key="index" @click="handelCLickJump">
+              :key="index" @click="handelCLickJump(item)">
               <img :src="item.imgSrc" class="img_33 m-top16" alt="" />
               <span class="font-size14 m-top10">{{ item.title }}</span>
             </div>
@@ -67,12 +67,16 @@
         url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect"
         size="small">关注</van-button>
     </div>
+    <van-popup v-model="showLaunch" round>
+          <launch-weapp v-if="showLaunch"></launch-weapp>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import { getHouseInfoQR } from '@/api/house'
 import { Notify } from 'vant'
+import launchWeapp from '@/components/launchWeapp/index'
 export default {
   name: 'houseQR',
   data() {
@@ -133,10 +137,12 @@ export default {
         },
         {
           imgSrc: require('@/assets/images/houseQR/bot_4.png'),
-          title: '电子社保'
+          title: '电子社保',
+          type: 'security'
         }
       ],
-      formData: null
+      formData: null,
+      showLaunch:false
     }
   },
   created() {
@@ -145,9 +151,11 @@ export default {
     this.getHouseInfo()
   },
   mounted() {
-    setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
     this.share()
   },
+  components:{
+    launchWeapp
+  },
   methods: {
     share() {
       let than = this
@@ -181,7 +189,10 @@ export default {
     handelCLickJump(item) {
       if (item.path) {
         this.$router.push({ path: item.path })
-      } else {
+      }else if(item.type === 'security'){
+        this.showLaunch = true;
+      }
+       else {
         Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' })
       }
     }