微信小程序实现朋友圈分享功能，以及保存图片到手机功能

谁践踏了优雅 2023-03-03 11:20 1阅读 0赞

## 分享到朋友圈 ##

代码展示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]  
效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]

**onShareAppMessage(Object object)参数：**

监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

return的参数：

<table> 
 <thead> 
  <tr> 
   <th>字段</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>from</td> 
   <td>String</td> 
   <td>转发事件来源（button：页面内转发按钮；menu：右上角转发菜单）</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>Object</td> 
   <td>如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined</td> 
  </tr> 
  <tr> 
   <td>webViewUrl</td> 
   <td>String</td> 
   <td>页面中包含web-view组件时，返回当前web-view的url</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>字段</th> 
   <th>说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>转发标题</td> 
   <td>当前小程序名称</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>转发路径</td> 
   <td>当前页面 path ，必须是以 / 开头的完整路径</td> 
  </tr> 
  <tr> 
   <td>imageUrl</td> 
   <td>自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。</td> 
   <td>使用默认截图</td> 
  </tr> 
 </tbody> 
</table>

**onShareTimeline()的参数：**

只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮  
自定义转发内容（暂只在 Android 平台支持，不支持自定义页面路径）

<table> 
 <thead> 
  <tr> 
   <th>字段</th> 
   <th>说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>自定义标题，即朋友圈列表页上显示的标题</td> 
   <td>当前小程序名称</td> 
  </tr> 
  <tr> 
   <td>query</td> 
   <td>自定义页面路径中携带的参数，如 path?a=1&amp;b=2 的 “?” 后面部分</td> 
   <td>当前页面路径携带的参数</td> 
  </tr> 
  <tr> 
   <td>imageUrl</td> 
   <td>自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。</td> 
   <td>默认使用小程序 Logo</td> 
  </tr> 
 </tbody> 
</table>

## 保存图片到手机 ##

**实例代码：**

js：

WXML：

<view bindtap="opentop">分享</view>
      
      
      <canvas canvas-id="img" style="width: 275px; height: 475px;position:absolute;left:0;top:-1000px;opacity:0;z-index:-100;">  </canvas>
        
      
      <view class="open" wx:if="{ {show}}" catchtouchmove="preventTouchMove">
      <view class="top_floor" bindtap="closetop"></view>
      <view class="o_main">
        <image class="o_goods_img" mode='aspectFill' src="{ {back_img}}"></image>
        <view class="o_title">
          { { goods_data.name}}
        </view>
        <view class="o_price"><text>¥</text>{ { sku.old_sell_price}}</view>
        <view class='o_price1'>¥{ { sku.market_price}}</view>
        <view class="o_price_p">{ { bg_explain}}</view>
        <view class="o_img_box">
          <image class="o_code_img" mode='aspectFit' src="{ {img}}"></image>
          <image class="o_head" src="{ {headimg}}"></image>
        </view>
        <view class="o_tc">长按识别小程序码，查看商品</view>
      </view>
      <view class="o_btn" bindtap='saveimg'>保存图片</view>
    </view>

效果图：

点击分享二字之后，弹出如下图，再点击保存图片就可以了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/3b82fd3ae90b4021aa66b3d8f0d0c329.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/9c52c83fcb604319bb102ca47bb789c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70]: /images/20230208/cadfe838a48349e09227ab858a95376e.png