微信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程序设计有所帮助。

Javascript 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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
You might like
php文件操作实例代码
2012/05/10 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
node.js中express-session配置项详解
2017/05/31 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
大学军训感言
2014/01/10 职场文书
应届生求职信
2014/05/31 职场文书
企业法人代表任命书
2014/06/06 职场文书
治安消防安全责任书
2014/07/23 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
社区党员干部承诺书
2015/05/04 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫