mpvue 设置点击按钮分享

超、凢脫俗 2021-07-25 02:31 502阅读 0赞

1、设置button添加属性open-type='share'
    
    2、设置监听函数,与data同级
        onShareAppMessage()
        {
          return{
            title:'转发标题',
            path:'默认路径为根路径,即src,从当前路径查找路径地址',
            imgUrl:'转发图片,默认为当前页面的截图'
          }
        }

代码示例:

<template>
      <div class='bookInfo'>
        <div class="bookInfo2">
          <h1>平凡世界</h1>
          <img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1332495956,1822322480&fm=26&gp=0.jpg" alt="">
          <div class="info">
            <p>作者:jeff</p>
            <p>出版社:jeff factory</p>
            <p>出版日期: null</p>
            <p>定价:￥520</p>
          </div>
        </div>
        <button type="primary" open-type="share">分享给好友</button>
    
        <div class='content'>
          <article>
            <h2>作者简介</h2>
            <section>
              帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅帅
            </section>
          </article>
          <article>
            <h2>内容简介</h2>
            <section>
              炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅炒鸡帅
            </section>
          </article>
    
        </div>
      </div>
    </template>
    
    <script>
      export default{ 
        data()
        { 
          return{ 
    
          }
        },
        mounted()
        { 
          console.log(JSON.parse(this.$mp.query.id));
        },
        onLoad(options)
        { 
          console.log(JSON.parse(options.id));
        },
        onShareAppMessage()
        { 
          return{ 
            title:'书籍详情',
            path:'./pages/detail/main'
          }
        }
      }
    </script>
    
    <style>
      .bookInfo{ 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .bookInfo2>h1{ 
        width: 100%;
        text-align: center;
        font-size: 50rpx;
        font-weight: bold;
      }
      .bookInfo2>img{ 
        width: 500rpx;
        height: 700rpx;
        margin: 0 auto;
      }
    
      .content{ 
        width: 500rpx;
      }
      .content>article{ 
        margin: 50rpx 0;
      }
      .content>article>section{ 
        text-indent:28rpx;
        font-size: 28rpx;
      }
      .content>h2{ 
        text-align: center;
        color:#02a774;
        font-size:30rpx;
        font-weight: bold;
      }
    </style>