feat(微信小程序分享): 通过postMessag实现设置微信小程序分享

nuxt.config.js

@@ -82,7 +82,7 @@ export default {
     { src: '~/plugins/v-mask', mode: 'client' },
     { src: '~/plugins/vconsole', mode: 'client' },
     { src: '~/plugins/callapp', mode: 'client' },
-    // '~/plugins/jweixin',
+    '~/plugins/jweixin',
     // '~/plugins/umeng-datasources',
     // '@/plugins/vant',
   ],

pages/activity/invite-user/index.vue

@@ -143,7 +143,22 @@ export default {
       ];
     },
   },
-  mounted() {},
+  mounted() {
+    this.$userAgent.isMiniProgram &&
+      this.$wx.miniProgram.postMessage({
+        data: {
+          action: 'updateAppMessageShareData',
+          params: {
+            title: '双子星云手机',
+            path: '/pages/home/home',
+            imageUrl:
+              location.origin +
+              require('~/assets/image/activity/invite-user/bg@2x.png'),
+            // promise: null,
+          },
+        },
+      });
+  },
   methods: {
     async share() {
       // console.log(this);

pages/test/jweixin.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-container>
+    <div class="">
+      <v-btn @click="getEnv()">getEnv</v-btn>
+      <v-btn @click="postMessage()">postMessage</v-btn>
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {
+  auth: false,
+  mounted() {
+    this.$wx.miniProgram.postMessage({
+      data: {
+        action: 'updateAppMessageShareData',
+        params: {
+          title: '双子星云手机',
+          path: '/pages/home/home',
+          imageUrl:
+            location.origin +
+            require('~/assets/image/activity/invite-user/bg@2x.png'),
+          // promise: null,
+        },
+      },
+    });
+  },
+  methods: {
+    getEnv() {
+      this.$wx.miniProgram.getEnv((res) => {
+        console.log('🚀 ~ file: jweixin.vue ~ line 14 ~ getEnv ~ res', res);
+      });
+    },
+    postMessage() {
+      this.$wx.miniProgram.postMessage({
+        data: {
+          now: Date.now(),
+        },
+      });
+    },
+  },
+};
+</script>

plugins/jweixin.js

@@ -1,7 +1,7 @@
 import wx from 'jweixin-module';
 
 // import Vue from 'vue';
-import { getConfig } from '~/api/wx/index.js';
+// import { getConfig } from '~/api/wx/index.js';
 
 export default function (c, i) {
   // Vue.config.optionMergeStrategies.wxReady = function (toVal, fromVal) {
@@ -14,37 +14,37 @@ export default function (c, i) {
   //   return [];
   // };
 
-  const { app } = c;
+  // const { app } = c;
   i('wx', wx);
 
-  app.router.afterEach(async (to, from) => {
-    // 微信js签名注册
-    try {
-      // if (to.matched[0].instances.default) {
-      //   to.matched[0].instances.default.$emit('wxReady');
-      // } else {
-      //   console.log(to.matched[0].components.default);
+  // app.router.afterEach(async (to, from) => {
+  //   // 微信js签名注册
+  //   try {
+  //     // if (to.matched[0].instances.default) {
+  //     //   to.matched[0].instances.default.$emit('wxReady');
+  //     // } else {
+  //     //   console.log(to.matched[0].components.default);
 
-      //   // to.matched[0].components.default.mixin({
-      //   //   mounted() {
-      //   //     console.log('wxReady');
-      //   //     this.$emit('wxReady');
-      //   //   },
-      //   // });
-      // }
-      const res = await getConfig(c, location.href);
-      await new Promise((resolve, reject) => {
-        wx.config({
-          debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
-          appId: res.data.appId, // 必填，公众号的唯一标识
-          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
-          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
-          signature: res.data.signature, // 必填，签名
-          jsApiList: [], // 必填，需要使用的 JS 接口列表
-        });
-        wx.ready(resolve);
-        wx.error(reject);
-      });
-    } catch (error) {}
-  });
+  //     //   // to.matched[0].components.default.mixin({
+  //     //   //   mounted() {
+  //     //   //     console.log('wxReady');
+  //     //   //     this.$emit('wxReady');
+  //     //   //   },
+  //     //   // });
+  //     // }
+  //     // const res = await getConfig(c, location.href);
+  //     // await new Promise((resolve, reject) => {
+  //     //   wx.config({
+  //     //     debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
+  //     //     appId: res.data.appId, // 必填，公众号的唯一标识
+  //     //     timestamp: res.data.timestamp, // 必填，生成签名的时间戳
+  //     //     nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
+  //     //     signature: res.data.signature, // 必填，签名
+  //     //     jsApiList: [], // 必填，需要使用的 JS 接口列表
+  //     //   });
+  //     //   wx.ready(resolve);
+  //     //   wx.error(reject);
+  //     // });
+  //   } catch (error) {}
+  // });
 }