转发分享

小程序寄生在大流量的App中，因此转发共享功能非常重要，能实现病毒性传播。

在原生的微信小程序有一个onShareAppMessage方法，它会返回一个对象。只要定义这个方法，那页面顶部就会自动出一个转发按钮，让用户进行转发。

而快应用是没有这样的API，也没有这样的按钮，一切都需要手动实现。我们可以通过 React.api.showActionSheet创建一个右上角菜单，然后让某一栏为一个转发按钮，当用户点击它时实现这个功能。

与onShow 一样，我们娜娜奇除了提供页面级别的分享钩子，也提供全局级别的分享钩子，分别称为onShare与onGlobalShare。

  1. // pages/pagexx/index.js
  2. import React from '@react';
  3. class P extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  6.         this.state = {
  7.             text: 'this is first line\nthis is second line'
  8.         };
  9.     }
  11.     onShare() {
  12.             var navigateToUrl = this.props.path;
  13.             return {
  14.                 title: '预订火车票 - 去哪儿旅行',
  15.                imageUrl: 'https://s.aaa.com/bbb/ccc.jpg',
  16.                 path: navigateToUrl
  17.             };
  18.     }
  20.     remove() {
  21.         var textAry = this.state.text.split('\n');
  22.         if (!textAry.length) return;
  23.         textAry.pop();
  24.         this.setState({
  25.             text: textAry.join('\n')
  26.         });
  27.     }
  29.     render() {
  30.         return (
  31.             <div class="container">
  32.                 <div class="item">
  33.                     <h2 class="item-list-hd">progress</h2>
  34.                     <div class="btn-area">
  35.                         <progress percent="20" show-info />
  36.                         <progress percent="40" show-info stroke-width="12" />
  37.                         <progress percent="60" show-info color="pink" />
  38.                         <progress percent="80" show-info active />
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.         );
  43.     }
  44. }
  46. export default P;

app.js中需要添加一个onShowMenu方法，专门给快应用生成右上角菜单。

  2. class Demo extends React.Component {
  3.     static config = {
  4.         window: {
  5.             backgroundTextStyle: 'light',
  6.             // navigationBarBackgroundColor: '#0088a4',
  7.             navigationBarTitleText: 'mpreact',
  8.             navigationBarTextStyle: '#fff'
  9.         },
  10.         tabBar: {
  11.             'color': '#929292',
  12.             'selectedColor': '#00bcd4',
  13.             'borderStyle': 'black',
  14.             'backgroundColor': '#ffffff',
  15.             'list': [/**/ ]
  16.         }
  17.     };
  18.     globalData = {
  19.         ufo: 'ufo'
  20.     };
  21.     onGlobalShare() {
  22.         var navigateToUrl = '/pages/index/index';
  23.         return {
  24.             title: '预订火车票 - 去哪儿旅行',
  25.             imageUrl: 'https://s.aaa.com/bbb/ccc.jpg',
  26.             path: navigateToUrl
  27.         };
  28.     };
  29.     onLaunch() {
  30.         // eslint-disable-next-line
  31.         console.log('App launched');
  32.     },
  33.     //快应用想实现 分享转发， 关于， 保存桌面
  34.     onShowMenu(pageInstance, app){
  35.          if(process.env.ANU_ENV === 'quick'){
  36.             var api = React.api;
  37.             api.showActionSheet({
  38.                 itemList: ['转发', '保存到桌面', '关于', '取消'],
  39.                     success: function (ret) {
  40.                         switch (ret.index) {
  41.                             case 0: //分享转发
  42.                                 var fn = pageInstance.onShare || app.onGlobalShare;
  43.                                 var obj = fn && fn();
  44.                                 if (obj){
  45.                                     obj.data = obj.data || obj.path;
  46.                                     obj.success = obj.success || function(a){
  47.                                         console.log(a, '分享成功')
  48.                                     }
  49.                                     obj.fail = obj.fail || function(a){
  50.                                         console.log(a, '分享失败')
  51.                                     }
  52.                                     api.share(obj);
  53.                                 }
  54.                                 break;
  55.                             case 1:
  56.                                 // 保存桌面
  57.                                 api.createShortcut();
  58.                                 break;
  59.                             case 2:
  60.                                 // 关于
  61.                                     api.getSystemInfo({
  62.                                         success: function(appInfo){
  63.                                             api.redirectTo({
  64.                                                 url: `pages/about/index?brand=${appInfo.brand}&version=${appInfo.version}`
  65.                                             });
  66.                                         }
  67.                                     });
  68.                                 break;
  69.                             case 3:
  70.                                 // 取消
  71.                                 break;
  72.                         }
  73.                     }
  74.                });
  75.             }
  76.         }
  77.     }
  78. }
  80. // eslint-disable-next-line
  81. export default App(new Demo());