当前位置:   article > 正文

微信小程序-页面分享 onShareAppMessage_实现 电商平台 onshareappmessage 分享 imageurl 合成图片

实现 电商平台 onshareappmessage 分享 imageurl 合成图片

效果


js

  1. let app = getApp();
  2. Page({
  3. data: {
  4. img: "/images/1.jpg"
  5. },
  6. onLoad() {
  7. },
  8. showShareMenu() {
  9. wx.showShareMenu();
  10. console.log("显示了当前页面的转发按钮");
  11. },
  12. hideShareMenu() {
  13. wx.hideShareMenu();
  14. console.log("隐藏了当前页面的转发按钮");
  15. },
  16. onShareAppMessage: (res) => {
  17. if (res.from === 'button') {
  18. console.log("来自页面内转发按钮");
  19. console.log(res.target);
  20. }
  21. else {
  22. console.log("来自右上角转发菜单")
  23. }
  24. return {
  25. title: '妹子图片',
  26. path: '/pages/share/share?id=123',
  27. imageUrl: "/images/1.jpg",
  28. success: (res) => {
  29. console.log("转发成功", res);
  30. },
  31. fail: (res) => {
  32. console.log("转发失败", res);
  33. }
  34. }
  35. }
  36. })

html

  1. <view class="view">
  2. <image class="cover-9" src="{{img}}" bindtap="img"></image>
  3. <view class="window-1">
  4. <button type="default" id="open" bindtap="showShareMenu">开启分享</button>
  5. <button type="warn" id="close" bindtap="hideShareMenu">关闭分享</button>
  6. </view>
  7. <button type="primary" open-type="share" data-name="pageShare" id="share">点击分享</button>
  8. </view>

css

  1. page{
  2. height: 100%;
  3. }
  4. .view{
  5. width: 100%;
  6. height: 100%;
  7. }
  8. .window-1{
  9. display: flex;
  10. flex-direction: row;
  11. margin: 20rpx 0;
  12. }
  13. .cover-9{
  14. width: 688rpx;
  15. height: 75%;
  16. margin: 0 30rpx;
  17. border:2rpx solid;
  18. border-radius:5px;
  19. }
  20. button{
  21. margin: 0 10rpx;
  22. width: 100%;
  23. }
  24. #share{
  25. width: 730rpx;
  26. }

意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

更多小程序文章:http://blog.csdn.net/zzwwjjdj1/article/details/79351547
关注公众号:


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/267807?site
推荐阅读
相关标签
  

闽ICP备14008679号