收藏
回答

mpvue开发小程序分享朋友圈无法自定义标题?

mpvue开发的小程序使用ononShareTimeline自定义标题和图片不生效,还是采用的默认名称和图片

回答关注问题邀请回答
收藏

5 个回答

  • ?.
    ?.
    2020-07-16

    手动修改一下mpvue这个包,在node_modules里面找到mpvue

    在index里面,搜索下onShareAppMessage找到
    // 用户点击右上角分享
    onShareAppMessage: rootVueVM.$options.onShareAppMessage
      ? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null,
    
    z在这一段代码下面添加一个处理就可以了
    // 分享朋友圈
    onShareTimeline: rootVueVM.$options.onShareTimeline
      ? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : null,
    


    最好也在LIFECYCLE_HOOKS这个数组中把onShareTimeline这个添加进去
    var LIFECYCLE_HOOKS = [
      'beforeCreate',
      'created',
      'beforeMount',
      'mounted',
      'beforeUpdate',
      'updated',
      'beforeDestroy',
      'destroyed',
      'activated',
      'deactivated', 'onLaunch',
      'onLoad',
      'onShow',
      'onReady',
      'onHide',
      'onUnload',
      'onPullDownRefresh',
      'onReachBottom',
      'onShareAppMessage',
      'onShareTimeline',
      'onPageScroll',
      'onTabItemTap',
      'attached',
      'ready',
      'moved',
      'detached'
    ];
    
    然后打包,完美解决
    
    如果项目中因为页面问题引入了例如mpvue-factory这种插件的还需要处理一下,用下面这个文件去处理吧,两个问题一起处理。
    
    再高级一点的话,可以写一个fix命令,复制我下面的,放到build文件夹,检查下你们的相对路径是不是对的,不对的话改一下你们的文件目录指向,然后自己去package里面加命令执行这个文件,直接命令跑一下就可以
    
    var chalk = require('chalk')
    var path = require('path')
    var fs = require('fs')
    var data = ''
    var dataFactory = ''
    
    const hookConfig = '\'onShareAppMessage\','
    const hookFn = '// 用户点击右上角分享\n' +
      '      onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
      '        ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,'
    const mpVueSrc = '../node_modules/mpvue/index.js'
    const mpVueFactorySrc = '../node_modules/mpvue-page-factory/index.js'
    
    const factoryHook = 'onShareAppMessage: App.onShareAppMessage ?\n' +
      '      function (options) {\n' +
      '        var rootVueVM = getRootVueVm(this);\n' +
      '        return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
      '      } : null,'
    try {
      data = fs.readFileSync(path.join(__dirname, mpVueSrc), 'utf-8')
      if (data.indexOf('onShareTimeline') === -1) {
        data = replaceHook(data)
      }
      fs.writeFileSync(path.join(__dirname,  mpVueSrc), data)
    } catch (e) {
      console.error(e)
    }
    
    try {
      dataFactory = fs.readFileSync(path.join(__dirname, mpVueFactorySrc), 'utf-8')
      if (dataFactory.indexOf('onShareTimeline') === -1) {
        dataFactory = replaceFactoryHook(dataFactory)
      }
      fs.writeFileSync(path.join(__dirname,  mpVueFactorySrc), dataFactory)
    } catch (e) {
      console.error(e)
    }
    
    // 处理mpvue框架中没有处理onShareTimeline方法的问题
    function replaceHook(str) {
      let res = str.replace(hookConfig, '\'onShareAppMessage\',\n' +
        '  \'onShareTimeline\',')
      res = res.replace(hookFn, '// 用户点击右上角分享\n' +
        '      onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
        '        ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,\n' +
        '\n' +
        '      // 分享朋友圈\n' +
        '      onShareTimeline: rootVueVM.$options.onShareTimeline\n' +
        '        ? function (options) { return callHook$1(rootVueVM, \'onShareTimeline\', options); } : null,')
    
      return res
    }
    
    // 处理mpvue-factory插件中没有处理onShareTimeline方法的问题
    function replaceFactoryHook(str) {
      let res = str.replace(factoryHook, 'onShareAppMessage: App.onShareAppMessage ?\n' +
        '      function (options) {\n' +
        '        var rootVueVM = getRootVueVm(this);\n' +
        '        return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
        '      } : null,\n' +
        '\n' +
        '    // 用户点击右上角分享\n' +
        '    onShareTimeline: App.onShareTimeline ?\n' +
        '      function (options) {\n' +
        '        var rootVueVM = getRootVueVm(this);\n' +
        '        return callHook$1(rootVueVM, \'onShareTimeline\', options);\n' +
        '      } : null,')
      return res
    }
    console.log(chalk.green(
      '  Tip: fix mpvue_share Success!'
    ))
    
    2020-07-16
    有用 4
    回复 14
    • Kilig
      Kilig
      2020-07-16
      谢谢呀,解决了。
      2020-07-16
      回复
    • ?.
      ?.
      2020-07-16回复Kilig
      不客气,刚刚发现这个问题
      2020-07-16
      回复
    • 林小强
      林小强
      2020-07-16
      根据上面的方法一,改了mpvue,打包后,依旧是没有触发onShareTimeline,奇怪了呀
      2020-07-16
      回复
    • ?.
      ?.
      2020-07-16回复林小强
      你多找几个页面试试,有用pageFactory这个库吗?
      2020-07-16
      回复
    • ?.
      ?.
      2020-07-16回复林小强
      如果用了这个库也要相应修改一个地方,用我推荐的第二个方法吧,写个js,去执行下就好
      2020-07-16
      回复
    查看更多(9)
  • 小张
    小张
    2020-07-13

    使用第三方框架(mpvue、taro、uniapp)都会这样,需要等框架作者更新支持!

    使用原生写法则不会出现这个问题了。

    2020-07-13
    有用 3
    回复 5
    • Kilig
      Kilig
      2020-07-13
      好的谢谢
      2020-07-13
      回复
    • 小张
      小张
      2020-07-13回复Kilig
      觉得有帮助的话,帮忙点个 “有用”
      2020-07-13
      回复
    • sulps
      sulps
      2020-07-14
      那如果用的是mpvue  是不是就没法改变图片和标题了
      2020-07-14
      回复
    • 小张
      小张
      2020-07-14回复sulps
      也是可以改的,具体操作可以到mpvue的github issue查看/提问
      2020-07-14
      回复
    • ?.
      ?.
      2020-07-16
      可以先手动改下mpvue的包处理下,下面有示例
      2020-07-16
      回复
  • Mr.z
    Mr.z
    2020-08-27

    wepy 项目框架 分享朋友圈 只能全部是默认的标题跟图标 自定义的显示不出来

    2020-08-27
    有用
    回复
  • 大番薯
    大番薯
    2020-07-15

    留名,解决了麻烦告知一下

    2020-07-15
    有用
    回复 1
    • Kilig
      Kilig
      2020-07-16
      看楼上
      2020-07-16
      回复
  • 肥喵
    肥喵
    2020-07-15

    同样问题,mpvue还没有人更新了。留名,解决了我再来

    2020-07-15
    有用
    回复 1
    • Kilig
      Kilig
      2020-07-16
      看解决方案
      2020-07-16
      回复
登录 后发表内容
问题标签