【Taro开发】-分享给好友/朋友圈（十二）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui

实现效果：
1.页面自定义按钮分享给好友
2.监听右上角按钮分享到朋友圈（目前仅支持android）

宣传海报及生成二维码，并保存图片将在后续文章更新

---

提示：以下是本篇文章正文内容，下面案例可供参考

<Button
   id={item.value}
   openType='share'
>
 转发给好友
</Button>

  /**
   * 右上角分享/自定义按钮
   */
  onShareAppMessage = (res) => {
    if (res.from === "button") {//页面按钮
      return {
        title: `详情`,
        path: `/pages/index/codeDetail/index?id=${id}&url=${codeUrl}`
      };
    }else{
    //用户点击右上角分享
    }
  }

  /**
   * 监听右上角	分享朋友圈
   * */
  onShareTimeline = async (res) => {
    let shareData = {
      title: '小程序点餐',
      path: '/pages/scanQrcode/scanQrcode',  // 分享的路径
      imageUrl： '',  // 分享的图片链接
    }
    return shareData；
  }

相应页面的config.js

  enableShareAppMessage: true 分享好友
  enableShareTimeline: true   分享朋友圈