请选择 进入手机版 | 继续访问电脑版

开启3.0小程序的分享到朋友圈功能

使用教程 使用教程 685 人阅读 | 0 人回复

#优化和建议#  
[注意]分享到朋友圈,打开后暂时无法正常访问帖子内容。这是由于3.0小程序使用的框架会在进入小程序时统一使用路由跳转到指定页面,而从朋友圈打开小程序是“单页模式”,不具备跳转功能,所以会一直显示loading图标,需要点“进入小程序”按钮后才能展示。
目前并不完善,希望官方尽快适配!
1、修改分享功能组件/common/utils/withShare/withShare.js,如图1图2
完整代码如下

  1. import Taro from '@tarojs/taro';
  2. import Toast from '@discuzq/design/dist/components/toast';
  3. import goToLoginPage from '@common/utils/go-to-login-page';
  4. import { inject, observer } from 'mobx-react';
  5. /**
  6. * @param {boolean} needShareline 是否需要分享到朋友圈
  7. * @param {boolean} needLogin 是否需要登录
  8. * @returns
  9. */
  10. function withShare(opts = {}) {
  11.   // 设置默认
  12.   const defalutTitle = '阿派派软件';
  13.   let defalutPath = 'pages/index/index';
  14.   defalutPath = `/pages/index/index?path=${encodeURIComponent(defalutPath)}`;
  15.   let menus = [];
  16.   const { needShareline = true, needLogin = true } = opts;
  17.   menus = ['shareAppMessage'];
  18.   if(needShareline){
  19.     menus.push('shareTimeline');
  20.   }
  21.   return function demoComponent(Component) {
  22.     @inject('user')
  23.     @observer
  24.     class WithShare extends Component {
  25.       componentDidMount() {
  26.         let launchOptions = Taro.getLaunchOptionsSync();
  27.         if(launchOptions.scene != 1154){
  28.           Taro.showShareMenu({
  29.             withShareTicket: true,
  30.             menus,
  31.           });
  32.         }
  33.   
  34.         if (super.componentDidMount) {
  35.           super.componentDidMount();
  36.         }
  37.       }
  38.       onShareAppMessage = (res) => {
  39.         const { user } = this.props;
  40.         // 是否必须登录
  41.         if (needLogin && !user.isLogin()) {
  42.           Toast.info({ content: '请先登录!' });
  43.           goToLoginPage({ url: '/subPages/user/wx-auth/index' });
  44.           const promise = Promise.reject();
  45.           return {
  46.             promise,
  47.           };
  48.         }
  49.         const data = res.target?.dataset?.shareData || '';
  50.         let shareData = '';
  51.         if (this.getShareData && typeof this.getShareData === 'function') {
  52.           shareData = this.getShareData({ ...data, from: res.from });
  53.         }
  54.         const { title = defalutTitle, path = defalutPath, imageUrl = '' } = shareData;
  55.         const encodePath = `/pages/index/index?path=${encodeURIComponent(path)}`;
  56.         return {
  57.           title,
  58.           path: encodePath,
  59.           imageUrl,
  60.         };
  61.       }
  62.       onShareTimeline = () => {
  63.         const { user } = this.props;
  64.         // 是否必须登录
  65.         if (needLogin && !user.isLogin()) {
  66.           Toast.info({ content: '请先登录!' });
  67.           goToLoginPage({ url: '/subPages/user/wx-auth/index' });
  68.           const promise = Promise.reject();
  69.           return {
  70.             promise,
  71.           };
  72.         }
  73.         let shareData = '';
  74.         if (this.getShareData && typeof this.getShareData === 'function') {
  75.           shareData = this.getShareData({ from: 'timeLine' });
  76.         }
  77.         const { title = defalutTitle, path = defalutPath, imageUrl = '' } = shareData;
  78.         return {
  79.           title,
  80.           query: {
  81.             path:encodeURIComponent(path),
  82.           },
  83.           imageUrl,
  84.         };
  85.       }
  86.       render() {
  87.         return super.render();
  88.       }
  89.     }

  90.     return WithShare;
  91.   };
  92. }

  93. export default withShare;
复制代码
2、在需要分享的页面配置文件中加入
  1. enableShareTimeline:true
复制代码
经测试,每个页面均需修改两个配置文件才能生效,否则自定义分享标题无效!
首页:mini/src/pages/home/index.config.js和mini/src/subPages/home/index.config.js
其他页面:mini/src/subPages/页面名/index.config.js和mini/src/layout/页面名/index.config.js

7YKdyEeSnreXzf8hQXKxoYlHXbPvI7kzyztIO9Pm.webp.jpg

C7uXLq52DHbYbwvR3fzj9TWGFWgGHU1Z1zRexflH.webp.jpg

ExRzG08OPUaO65IbUOCtyr33OdxMWsvg2kfpK25Z.webp.jpg


1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 本站管理QQ:564252584,唯一联系方式!
3. 请勿发布有损他人权益和违法内容,后果自负,请各位知悉!
回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则