fe / yoho-js-sdk · Commits

Go to a project

Authored by 沈志敏
Commit 11ecdd6cb1afef613c6c3daac3f523946224913a 1 parent de07541b

update readme

Inline Side-by-side
Showing 4 changed files with 127 additions and 29 deletions
@@ -3,19 +3,120 @@ @@ -3,19 +3,120 @@
3 ## 封装实现的功能 3 ## 封装实现的功能
4 4
5 ### 1. 用户相关 5 ### 1. 用户相关
6 - 1. 获取用户的信息和状态  
7 - 2. 登录  
8 - 3. 收藏商品 6 + 1. 获取用户的信息和状态
  7 + 2. 验证登录
  8 + 3. 收藏商品
9 9
10 ### 2. 促销相关 10 ### 2. 促销相关
11 - 1. 优惠券领取  
12 - 2. YOHO币领取 11 + 1. 优惠券领取
  12 + 2. YOHO币领取
13 13
14 ### 3. 分享相关 14 ### 3. 分享相关
15 - 1. 分享到微信好友  
16 - 2. 分享到朋友圈  
17 - 3. 记录和上报分享信息 15 + 1. 分享到微信好友
  16 + 2. 分享到朋友圈
18 17
19 ### 4. 个性化展示 18 ### 4. 个性化展示
20 - 1. 个性化数据页面内元素标记  
21 - 2. 获取数据绑定到界面  
  19 + 1. 个性化数据页面内元素标记
  20 + 2. 获取数据绑定到界面
  21 +
  22 +
  23 +## 使用说明
  24 + 1. 本插件jssdk 依赖于jQuery, 所以请先加载 jQuery;
  25 + 2. 然后加载本插件jssdk；
  26 +
  27 +## 功能说明
  28 + 1. 获取用户信息和状态：
  29 + app： url中的uid 来判断用户是否登录
  30 + 浏览器：jsonp调用接口来判断用户是否登录
  31 +
  32 + 2. 验证登录：auth()
  33 + 若用户未登录，则会将所以的 `<a class="auth">`标签的`href`属性 替换为 登录url
  34 +
  35 + 3. 收藏商品：favout(skn)
  36 + 收藏传入`skn`所相对应的商品
  37 +
  38 + 4. 优惠券领取:
  39 + 给 <a> 标签加上`yoho-conpon`类名，并加上 `data-token` 属性，值为后台生成的 token。
  40 +
  41 + 示例：
  42 +
  43 + ```html
  44 + <a class="yoho-conpon" href="javascript:;" data-token="29-6ea9ab1baa0efb9e19094440c317e21b">
  45 + <h1>领券按钮</h1>
  46 + </a>
  47 + ```
  48 +
  49 + 5. 有货币领取：
  50 + 给 <a> 标签加上`yoho-coin`类名，并加上 `data-token` 属性，值为后台生成的 token。
  51 +
  52 + 示例：
  53 +
  54 + ```html
  55 + <a class="yoho-coin" href="javascript:;" data-token="22e369853df766fa44e1ed0ff613f563bd">
  56 + <h1>有货币领取按钮</h1>
  57 + </a>
  58 + ```
  59 +
  60 + 6. 分享相关：
  61 +
  62 + 如果需要定制分享参数时，通过<input type="hidden">方式自定义
  63 +
  64 + 示例：
  65 +
  66 + ```html
  67 + <input id="shareLink" type="hidden" value="http://feature.yoho.cn/1228/1228MEMBER/index.html">
  68 + <input id="shareDesc" type="hidden" value="VIP专场劲爆开启->VIP独享4重福利，超值冬品限时5折，更有专享年终福利券等你抢！">
  69 + <input id="shareImg" type="hidden" value="http://feature.yoho.cn/public/shareimg/1228member.png">
  70 + <input id="shareTitle" type="hidden" value="【YOHO!BUY有货】12月28日潮集会员日">
  71 + ```
  72 +
  73 + 7. 个性化推荐：
  74 + 7.1. 定义商品图片显示的宽高
  75 +
  76 + 示例：value的值格式: "宽x高"
  77 +
  78 + ```html
  79 + <input id="imgwh" type="hidden" value="450x500">
  80 + ```
  81 +
  82 + 7.2. 定义商品模版
  83 +
  84 + 示例：
  85 +
  86 + ```html
  87 + <div class="feature-product-info">
  88 + <a class="product-detail" href='http://item.yohobuy.com/product/pro_330189_424569/PUMADUPLEXEVOPARTYDiBangXie36146103.html?from=search-s-51184789_1_1&openby:yohobuy={"action":"go.productDetail","params":{"product_id":"330189","from":"search-s-51184789_1_1"}}'>
  89 + <div>
  90 + <img class="product-detail-img" src="http://img10.static.yhbimg.com/goodsimg/2016/11/21/12/01c6529b3ecdc8c6085a48446f331fae4c.jpg?imageMogr2/thumbnail/450x500/extent/450x500/background/d2hpdGU=/position/center/quality/60">
  91 + </div>
  92 + <div class="product-detail-text">
  93 + <div class="name">
  94 + <span class="product-name">双贴袋连帽棉夹克【两色可选】</span>
  95 + </div>
  96 + <div class="price">
  97 + <span class="sale-price">¥589.00</span>
  98 + <span class="market-price">¥779.00</span>
  99 + </div>
  100 + </div>
  101 + </a>
  102 + <a class="product-brand" href="http://m.yohobuy.com/product/index/brand?shop_id=1540">
  103 + <span class="brand-name">Life After Life</span>
  104 + <span class="brand-go">进入店铺</span>
  105 + </a>
  106 + </div>
  107 + ```
  108 +
  109 + 详细说明：
  110 +
  111 + 以下class名 需要固定不变，引入的 jssdk 会通过class名 来做动态替换
  112 +
  113 + ```
  114 + .feature-product-info： 标示一个商品item
  115 + .brand-name： 店铺名称（如果不需要显示店铺，可不需要）
  116 + a.product-brand： 进入店铺的url （如果不需要显示店铺，可不需要）
  117 + a.product-detail： 进入商品详情页 url
  118 + .product-detail-img： 商品图片
  119 + .product-name： 商品名称
  120 + .sale-price： 销售价格
  121 + .market-price： 市场价格
  122 + ```
@@ -12,9 +12,9 @@ $(function() { @@ -12,9 +12,9 @@ $(function() {
12 openapp.init(); 12 openapp.init();
13 13
14 user.init().then(uid => { 14 user.init().then(uid => {
15 - user.auth(uid); // 权限验证  
16 individuation.init(uid); // 个性化推荐 15 individuation.init(uid); // 个性化推荐
17 promotion.init(uid); // 促销 16 promotion.init(uid); // 促销
  17 + user.auth(); // 权限验证
18 share.init(); // 分享 18 share.init(); // 分享
19 utils.init(); 19 utils.init();
20 }); 20 });
@@ -22,7 +22,5 @@ $(function() { @@ -22,7 +22,5 @@ $(function() {
22 22
23 export default { 23 export default {
24 auth: user.auth, 24 auth: user.auth,
25 - favout: user.favout,  
26 - getCoupon: promotion.getCoupon,  
27 - getCoin: promotion.getCoin 25 + favout: user.favout
28 }; 26 };
@@ -171,7 +171,5 @@ export default { @@ -171,7 +171,5 @@ export default {
171 init(uid) { 171 init(uid) {
172 _initCoin(uid); // 初始化有货币 172 _initCoin(uid); // 初始化有货币
173 _initCoupon(uid); // 初始化优惠券 173 _initCoupon(uid); // 初始化优惠券
174 - },  
175 - getCoin: _getCoin,  
176 - getCoupon: _getCoupon 174 + }
177 }; 175 };
@@ -12,41 +12,42 @@ let _noLoginUrl = function() { @@ -12,41 +12,42 @@ let _noLoginUrl = function() {
12 }; 12 };
13 13
14 export default { 14 export default {
  15 + uid: '',
15 noLoginUrl: _noLoginUrl, 16 noLoginUrl: _noLoginUrl,
16 init() { 17 init() {
17 - let uid = 14459668;  
18 - //let uid; 18 + let _this = this;
  19 +
19 if (!utils.isApp()) { 20 if (!utils.isApp()) {
20 // 获取当前登录用户信息 21 // 获取当前登录用户信息
21 return jsonp({ 22 return jsonp({
22 url: '//m.yohobuy.com/passport/login/user?callback=?' 23 url: '//m.yohobuy.com/passport/login/user?callback=?'
23 }).then(function(res){ 24 }).then(function(res){
24 if (res.code === 200) { 25 if (res.code === 200) {
25 - uid = res.data; 26 + _this.uid = res.data;
26 } 27 }
27 - return $.Deferred().resolve(uid); 28 + return $.Deferred().resolve(_this.uid);
28 }, function() { 29 }, function() {
29 - return $.Deferred().resolve(uid); 30 + return $.Deferred().resolve(_this.uid);
30 }); 31 });
31 } else { 32 } else {
32 - uid = utils.queryString().uid;  
33 - return $.Deferred().resolve(uid); 33 + _this.uid = utils.queryString().uid;
  34 + return $.Deferred().resolve(_this.uid);
34 } 35 }
35 }, 36 },
36 - auth(uid) {  
37 - if (!uid) { 37 + auth() {
  38 + if (!this.uid) {
38 let noLoginUrl = _noLoginUrl(); 39 let noLoginUrl = _noLoginUrl();
39 40
40 $('a.auth').attr('href', noLoginUrl); 41 $('a.auth').attr('href', noLoginUrl);
41 } 42 }
42 }, 43 },
43 - favout(skn, uid) {  
44 - if (!skn || !uid) { 44 + favout(skn) {
  45 + if (!skn || !this.uid) {
45 return; 46 return;
46 } 47 }
47 48
48 jsonp({ 49 jsonp({
49 - url: `//service.yoho.cn/activity/favorite/addFavorite?productSkn=${skn}&uid=${uid}&callback=?`, 50 + url: `//service.yoho.cn/activity/favorite/addFavorite?productSkn=${skn}&uid=${this.uid}&callback=?`,
50 }).then(function(res) { 51 }).then(function(res) {
51 if (res.code === 200) { 52 if (res.code === 200) {
52 utils.showTip({ 53 utils.showTip({