首页
所有分类
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 相关文章推荐
JavaScript Timer实现代码
Feb 17 Javascript
js事件(Event)知识整理
Oct 11 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
js实现数字跳动到指定数字
Aug 25 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
死锁(3) 裁剪图片(1) Flask(2) reduce()(1) Python(3) 生命周期(1) 进度条(1) springCloud(6) 信号同步(1) 鲲鹏(1)
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
用ODBC的分页显示
2006/10/09 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php教程之phpize使用方法
2014/02/12 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
javascript常见用法总结
2014/05/22 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
vue3.0自定义指令（drectives)知识点总结
2020/12/27 Vue.js
Python实现FTP上传文件或文件夹实例（递归）
2017/01/16 Python
R vs. Python 数据分析中谁与争锋？
2017/10/18 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Django的性能优化实现解析
2019/07/30 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
洲际酒店集团大中华区：IHG中国
2016/08/17 全球购物
阳光体育：Sunny Sports（购买露营和远足设备）
2018/08/07 全球购物
2014年文学毕业生自我鉴定
2014/04/23 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python