首页
所有分类
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的开发个代阴影的对话框效果代码
Jul 28 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
三子棋(2) data(4) name_scope (1) 数据表(1) Keras(3) 字符集(1) variable_scope(1) 神经网络(7) character(1) mysql(6)
You might like
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Python 冒泡，选择，插入排序使用实例
2015/02/05 Python
Python创建系统目录的方法
2015/03/11 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
学python安装的软件总结
2019/10/12 Python
Python控制台实现交互式环境执行
2020/06/09 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
美国内衣品牌：Leonisa
2016/08/14 全球购物
运行时异常与一般异常有何异同？
2014/01/05 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
厨师长岗位职责
2014/03/02 职场文书
实习推荐信
2014/05/10 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
学生会个人总结范文
2015/02/15 职场文书
2019班干部竞选演讲稿范本！
2019/07/08 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python