首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

Posted in Javascript onNovember 25, 2016

本文实例讲述了微信JS-SDK自定义分享功能。分享给大家供大家参考，具体如下：

分享出去的内容，可以通过jssdk进行修改。

1.配置jssdk

Wx_config.html

<?php
import("@.ORG.jssdk");
$jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret'));
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'chooseImage',
      'uploadImage'
    ]
  });
</script>

2.加入分享给朋友，分享到朋友圈事件

<script>
// 微信JSSDK开发
wx.ready(function () {
  // 分享给朋友
  wx.onMenuShareAppMessage({
   title: '{sh:$wxShare.title}', // 商品名
   desc: '{sh:$wxShare.desc}', // 店铺名
   link: '{sh:$wxShare.link}', // 商品购买地址
   imgUrl: '{sh:$wxShare.imgUrl}', // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
  // 分享到朋友圈
  wx.onMenuShareTimeline({
   title: '{sh:$wxShare.title}', // 商品名
   link: '{sh:$wxShare.link}', // 商品购买地址
   imgUrl: '{sh:$wxShare.imgUrl}', // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
});
</script>

3.后台获取wxShare数据

/**** 获取微信分享数据 ****/
$shop_id = $this->_get('shop_id','intval');
$wxShare['title'] = $goodsData['name'];
$wxShare['desc'] = $store['name'];
$wxShare['imgUrl']= $this->siteUrl.$goodsData['logoimg'];
$wxShare['link'] = $this->siteUrl.U('Goods/info',array('id'=>$goodsData['id'],'shop_id'=>$shop_id));
$this->assign('wxShare',$wxShare);

这里的地址，必须为绝对地址。否则相对地址，微信无法识别。

 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

如果不设置，就会是默认的标题，默认的logo，默认的详情。
设置了事件，就会按照自己想要的内容分享出去。

4.我要分销页面，源码

<!DOCTYPE html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta name="format-detection" content="telephone=no" />
  <title>【{sh:$store.name}】{sh:$goodsData.name}</title>
  <link type="text/css" rel="stylesheet" href="{sh::PUB}css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="{sh::PUB}css/font-awesome.min.css">
  <script src="{sh::PUB}js/jquery-1.10.2.min.js" type="text/javascript"></script>
  <style>
  body {
    background-color: #EFEFEF;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
  }
  .item-bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.4) none repeat scroll !important;
    width: 100%;
    color: #fff;
    line-height: 25px;
    padding-right: 5px;
    text-align: left;
    font-size: 13px;
    padding-left: 10px;
  }
  .qrcode img {
    width: 95%;
  }
  .qrcode strong {
    color: #cc0033;
    text-align: center;
    padding: 20px;
    display: block
  }
  .tip .title {
    height: 30px;
    margin: 10px;
    vertical-align: middle;
    line-height: 30px;
  }
  .tip .title img {
    padding: 5px;
    float: left;
  }
  .tip .title div {
    width: 100%;
    margin-left: 5px;
    height: 1px;
    background-color: #cc0033;
  }
  .tip .content {
    margin-left: 15px;
    margin-right: 15px;
    color: gray;
  }
  .tip .content strong {
    color: black;
  }
  .row_1 {
    width: 100%;
    display: -webkit-box;
    background-color: white;
    margin-bottom: 15px;
  }
  .row_2 {
    width: 100%;
    position: relative;
    background-color: white;
  }
  .row_2_1 {
    display: -webkit-box;
    margin-bottom: 10px;
  }
  .popover {
    display: inline;
    left: 80px;
    top: 10px;
    width: 70%;
  }
  .headimg {
    margin: 10px 10px;
  }
  .item-img {
    position: relative;
  }
  .price {
    color: #CC3300;
    font-size: 16px;
  }
  .money {
    display: inline-grid;
    font-size: 16px;
    padding: 10px 5px 5px 5px;
  }
  .sale {
    font-size: 14px;
    padding-left: 10px;
    color: gray;
  }
  .money_img {
    width: 70px;
    padding: 5px;
  }
  .popover-content {
    font-size: 14px;
  }
  </style>
</head>
<body>
  <div class="row_1">
    <div class="left"><img class="money_img" src="{sh::RES}public/img/t2.png"></span>
    </div>
    <div class="right">
      <div class="money">分销佣金
        <font color='#CC0000'>{sh:$commission}</font>元</div>
      <div class="sale">已销售
        <font color='#CC0000'>
          <php>echo ($goodsData['salecount'] + $goodsData['fakemembercount']);</php>
        </font>件</div>
    </div>
  </div>
  <div class="row_2">
    <if condition="$wxuserData.nickname neq ''">
      <div clas="row_2_1">
        <div class="left"><img src="{sh:$wxuserData.headimgurl}" width="70px" class="headimg"></div>
        <div class="popover right">
          <div class="arrow"></div>
          <div class="popover-content">
            <p>我是
              <font color='#FF9900'>{sh:$wxuserData.nickname}</font>，
              <br/><span>我为<font color='#FF9900'>{sh:$store.name}</font>代言。</span></p>
          </div>
        </div>
      </div>
    </if>
    <div class="row_2_2">
      <div class="item-img">
        <img class="item-img-logo" src="{sh:$goodsData.logoimg}" width="100%">
        <div class="item-bottom">
          <span>{sh:$goodsData.name}</span>
          <div>
            <span class="price">¥<strong>{sh:$goodsData.price}</strong></span>
            <small><s>¥{sh:$goodsData.oprice}</s></small>
          </div>
        </div>
      </div>
    </div>
    <div class="row_2_3 qrcode text-center">
      <img src="{sh:$goodsData.qrcode}" width="100%">
      <strong>长按二维码 识别图中二维码</strong>
    </div>
  </div>
  <div class="row_3 tip">
    <div class="title">
      <i class="fa fa-sitemap"></i><span> 分销如何赚钱</span>
    </div>
    <div class="content">
      <div>
        <strong>第一步：</strong>转发商品链接或商品二维码图片给微信好友；
        <br/>
        <br/>
        <strong>第二步：</strong>从您转发的链接或图片进入商城的好友，系统将自动锁定成为您的客户，他们在微信商城中购买任何商品，您都可以获得分销佣金；
        <br/>
        <br/>
        <strong>第三步：</strong>您可以在分销中查看【我的团队】和【分销佣金】。好友确认收货后，佣金可提现。
        <br/>
        <br/>
      </div>
    </div>
  </div>
  <include file="./Tpl/Store/Public/Public_foot.html" />
</body>
<include file="./Tpl/Store/Wx_config.html"/>
<script>
// 微信JSSDK开发
wx.ready(function () {
  // 分享给朋友
  wx.onMenuShareAppMessage({
   title: '{sh:$wxShare.title}', // 商品名
   desc: '{sh:$wxShare.desc}', // 店铺名
   link: '{sh:$wxShare.link}', // 商品购买地址
   imgUrl: '{sh:$wxShare.imgUrl}', // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
  // 分享到朋友圈
  wx.onMenuShareTimeline({
   title: '{sh:$wxShare.title}', // 商品名
   link: '{sh:$wxShare.link}', // 商品购买地址
   imgUrl: '{sh:$wxShare.imgUrl}', // 分享的图标
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
});
</script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

- Author -

牛逼的霍啸林

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 #Javascript
摩纳哥购物网站(1) 罗马尼亚购物网站(10) 匈牙利购物网站(11) 亚洲购物网站(6) 北美洲购物网站(1) 乌克兰购物网站(27) 缅甸购物网站(1) 希腊购物网站(6) 越南购物网站(9) 巴基斯坦购物网站(2)
You might like
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jquery中radio checked问题
2015/03/16 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python Web框架Tornado运行和部署
2020/10/19 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python机器学习之神经网络（一）
2017/12/20 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python中with用法讲解
2020/02/07 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
阿提哈德航空官方网站：Etihad Airways
2017/01/06 全球购物
Europcar意大利：汽车租赁
2019/07/07 全球购物
给客户的道歉信
2014/01/13 职场文书
报关报检委托书
2014/04/08 职场文书
教师产假请假条
2014/04/10 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
领导新年致辞2016
2015/07/29 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js