소스 검색

feat: 微信分享

Burt 2 년 전
부모
커밋
6b24232e87
4개의 변경된 파일24개의 추가작업 그리고 2개의 파일을 삭제
  1. 6 2
      src/pages/index/demo/mp-weixin-share.vue
  2. 18 0
      src/pages/index/index.vue
  3. BIN
      src/static/screenshots/wx-share-after.png
  4. BIN
      src/static/screenshots/wx-share-before.png

+ 6 - 2
src/pages/index/demo/mp-weixin-share.vue

@@ -6,8 +6,12 @@
 
 <template>
   <view class="m-10 text-center">
-    <view class="text-8">微信分享页</view>
-    <view class="text-6">请在微信小程序中打开</view>
+    <view class="text-green">微信分享页</view>
+    <view class="text-green-500">请在微信小程序中体验,或者开发者工具</view>
+    <view>1) 默认是不激活”发送给朋友“和”分享到朋友圈“的,如下图</view>
+    <image src="/static/screenshots/wx-share-before.png" mode="widthFix" />
+    <view>2) 增加了onShareAppMessage和onShareTimeline后,就可以微信分享了,如下图</view>
+    <image src="/static/screenshots/wx-share-after.png" mode="widthFix" />
   </view>
 </template>
 

+ 18 - 0
src/pages/index/index.vue

@@ -27,7 +27,25 @@
 
 <script setup lang="ts" name="TestIndex">
 import { ref } from 'vue'
+import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import PagesAutoImport from './components/pages-auto-import.vue'
+/** 激活“分享给好友” */
+onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
+  console.log('options:', options)
+  return {
+    title: '自定义分享标题',
+    path: '/pages/index/index?id=xxx',
+    imageUrl:
+      'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
+  }
+})
+/** 激活“分享到朋友圈”, 注意:需要先激活“分享给好友” */
+onShareTimeline((): Page.ShareTimelineContent => {
+  return {
+    title: '自定义分享标题',
+    query: 'a=1&b=2',
+  }
+})
 
 const list = ref([
   {

BIN
src/static/screenshots/wx-share-after.png


BIN
src/static/screenshots/wx-share-before.png