微信公众号开发

微信小程序之分享当前页面截图给微信好友

本文主要是介绍微信小程序之分享当前页面截图给微信好友，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

参考链接：https://blog.csdn.net/qq_39410252/article/details/121278343

效果图：

实现步骤：

1. 建一个微信小程序项目

 

 2. 将其路径添加进app.json

  "pages": [
    "pages/Share/Share"
  ],

 

3. 在Share.wxml中添加一个button 

<!--miniprogram/pages/Share/Share.wxml-->
<text>miniprogram/pages/Share/Share.wxml</text>
<button type="default" open-type="share" class="clear-style">分享给好友</button>

 

4. 在Share.wxss中为button设置样式

/* miniprogram/pages/Share/Share.wxss */
.clear-style{
  border: none;
  border-radius: 0;
  background-color: transparent !important;
  padding: 0rpx !important;
  margin: 0rpx !important;
  text-align: left;
  height: 140rpx;
}

.clear-style::after{
  border: none;
}

 

5. 在Share.js中更新分享按钮触发函数

查看分享函数各参数意义：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {
    return {
      title: '邀请您使用XXX小程序',
      path: '/pages/show/show', // 当对方点击你分享的小程序时到达的页面
      imageUrl: 'https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'  //转发时显示此图片，若没有此参数，默认是传送当前页面截图
    }

  }

 

上述效果图中是不带imageUrl时的效果。

这篇关于微信小程序之分享当前页面截图给微信好友的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航