微信JS-SDK實(shí)現(xiàn)自定義分享功能崖瞭,分享給朋友古徒,分享到朋友圈

分享出去的內(nèi)容,可以通過jssdk進(jìn)行修改读恃。

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開發(fā)
wx.ready(function () {
    // 分享給朋友
    wx.onMenuShareAppMessage({
      title: '{sh:$wxShare.title}', // 商品名
      desc: '{sh:$wxShare.desc}', // 店鋪名
      link: '{sh:$wxShare.link}', // 商品購(gòu)買地址
      imgUrl: '{sh:$wxShare.imgUrl}', // 分享的圖標(biāo)
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });

    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: '{sh:$wxShare.title}', // 商品名
      link: '{sh:$wxShare.link}', // 商品購(gòu)買地址
      imgUrl: '{sh:$wxShare.imgUrl}', // 分享的圖標(biāo)
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
});
</script>

3.后臺(tái)獲取wxShare數(shù)據(jù)

/**** 獲取微信分享數(shù)據(jù) ****/
$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);

這里的地址代态,必須為絕對(duì)地址寺惫。否則相對(duì)地址,微信無法識(shí)別蹦疑。

如果不設(shè)置西雀,就會(huì)是默認(rèn)的標(biāo)題,默認(rèn)的logo歉摧,默認(rèn)的詳情艇肴。
設(shè)置了事件,就會(huì)按照自己想要的內(nèi)容分享出去叁温。

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">[站外圖片上傳中……(2)]</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">[站外圖片上傳中……(3)]</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">
                [站外圖片上傳中……(4)]
                <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">
            [站外圖片上傳中……(5)]
            <strong>長(zhǎng)按二維碼 識(shí)別圖中二維碼</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>轉(zhuǎn)發(fā)商品鏈接或商品二維碼圖片給微信好友冲九;
                <br/>
                <br/>
                <strong>第二步:</strong>從您轉(zhuǎn)發(fā)的鏈接或圖片進(jìn)入商城的好友,系統(tǒng)將自動(dòng)鎖定成為您的客戶跟束,他們?cè)谖⑿派坛侵匈?gòu)買任何商品莺奸,您都可以獲得分銷傭金;
                <br/>
                <br/>
                <strong>第三步:</strong>您可以在分銷中查看【我的團(tuán)隊(duì)】和【分銷傭金】冀宴。好友確認(rèn)收貨后灭贷,傭金可提現(xiàn)。
                <br/>
                <br/>
            </div>
        </div>
    </div>
    <include file="./Tpl/Store/Public/Public_foot.html" />
</body>
<include file="./Tpl/Store/Wx_config.html"/>
<script>
// 微信JSSDK開發(fā)
wx.ready(function () {
    // 分享給朋友
    wx.onMenuShareAppMessage({
      title: '{sh:$wxShare.title}', // 商品名
      desc: '{sh:$wxShare.desc}', // 店鋪名
      link: '{sh:$wxShare.link}', // 商品購(gòu)買地址
      imgUrl: '{sh:$wxShare.imgUrl}', // 分享的圖標(biāo)
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });

    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: '{sh:$wxShare.title}', // 商品名
      link: '{sh:$wxShare.link}', // 商品購(gòu)買地址
      imgUrl: '{sh:$wxShare.imgUrl}', // 分享的圖標(biāo)
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
});
</script>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末略贮,一起剝皮案震驚了整個(gè)濱河市甚疟,隨后出現(xiàn)的幾起案子仗岖,更是在濱河造成了極大的恐慌,老刑警劉巖古拴,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件箩帚,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡黄痪,警方通過查閱死者的電腦和手機(jī)紧帕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來桅打,“玉大人是嗜,你說我怎么就攤上這事⊥ξ玻” “怎么了鹅搪?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)遭铺。 經(jīng)常有香客問我丽柿,道長(zhǎng),這世上最難降的妖魔是什么魂挂? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任甫题,我火速辦了婚禮,結(jié)果婚禮上涂召,老公的妹妹穿的比我還像新娘坠非。我一直安慰自己,他們只是感情好果正,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布炎码。 她就那樣靜靜地躺著,像睡著了一般秋泳。 火紅的嫁衣襯著肌膚如雪潦闲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天迫皱,我揣著相機(jī)與錄音矫钓,去河邊找鬼。 笑死舍杜,一個(gè)胖子當(dāng)著我的面吹牛新娜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播既绩,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼概龄,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了饲握?” 一聲冷哼從身側(cè)響起私杜,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤蚕键,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后衰粹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锣光,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年铝耻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了誊爹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡瓢捉,死狀恐怖频丘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情泡态,我是刑警寧澤搂漠,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站某弦,受9級(jí)特大地震影響桐汤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜靶壮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一怔毛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧亮钦,春花似錦、人聲如沸充活。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽混卵。三九已至映穗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間幕随,已是汗流浹背蚁滋。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赘淮,地道東北人辕录。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像梢卸,于是被迫代替她去往敵國(guó)和親走诞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理蛤高,服務(wù)發(fā)現(xiàn)蚣旱,斷路器碑幅,智...
    卡卡羅2017閱讀 134,651評(píng)論 18 139
  • 先來看看微信分享效果: 在沒有集成微信分享js-sdk前是這樣的:沒有摘要,縮略圖任意抓取正文圖片 在集成微信分享...
    思?jí)鬚HP閱讀 7,421評(píng)論 6 4
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 園林131 蔡欣潔 01 1.辰山植物園植物景觀豐富塞绿,請(qǐng)例舉十張植物景觀照片沟涨,結(jié)合形式美法則,分析該處植物景觀...
    雞蛋花旁的一棵菜閱讀 1,110評(píng)論 0 0
  • 親子日記第六天异吻,今天的事說起來比較多裹赴。因?yàn)槊魈煲荚嚵怂越裉烊リ柟獯蟮谰毧紙?chǎng),去了以后教練說要在那練一天涧黄,因...
    AA穩(wěn)穩(wěn)閱讀 239評(píng)論 0 1