title: 分享組件-2.0.1
type: guide
date: 2017-04-20 17:00:00
order: 7
分享流程圖
- 暫缺, 后繼補充
分享效果圖
- 暫缺, 后繼補充
git目錄
。。。
快速使用
一. 加載依賴庫; 如果已有引入無需再次引入. 依賴庫有:
zepto.js
aladdin.js (口袋3.0庫文件, 在口袋3.0內分享里需要,如不投到放口袋可不引入)
注意：
1.share、aladdin、zepto有依賴關系。 依次順序為zepto--->aladdin--->share
2.aladdin需要更新最新版
二. 加載分享組件; 分享組件最新版本地址:
直接引用:
測試: /app_com/share/2.0.0/js/share.js
生產: /app_com/share/2.0.0/js/share.js
umd版依賴zepto、aladdin、jWeixin、rymApp
jWeixin與rymApp下載
三. 初始化分享參數
頁面加載完后調用window.shareMode.shareInit(options), options為對象, 具體參數請參考初始化參數說明
四. 訂制特殊場景分享; 如與正常流程有差異，需與產品經理于翠翠對接。
初始化參數說明
初始化參數是一個對象，主要包含“自定義分享文案”、“業務統計系列參數”、“ucp微信授權參數”、“控制UI參數”、“其他參數”5部分
一、 自定義分享文案
{
// 自定義分享4項, title, content, picture, url
shareObj: {
// 分享title 必傳
title: '分享測試title',
// 分享簡介 必傳
content: '分享測試content',
// 分享縮略圖 必傳
picture: '/brop-cmp/act/assets/share/img/paBankLogo.png'
},
// 分享url, 折分為3部分
shareUrlObj: {
// 分享url, 包含請求協議,域名,目錄,文件名 必傳
url: location.origin + location.pathname,
// 分享頁面需求參數, 可以為空, 如果有值以"?"開頭 umMode userType 破冰業務等邏輯字段,非公共,在此傳遞
search: '',
// 分享頁面需求hash值 可以為空 如果有值以"#"開頭
hash: ''
}
}
二、業務統計系列參數
{
// 業績統計8大項, 根據實際需求傳值
paramObj: {
// 反顯推薦人信息使用，根據實際需要傳。反顯優化級：登錄態用戶信息 > options入參 > url上rec_no值 > 口袋sessionStorage > 記憶功能（localStorage）
rec_no: '',
// 推薦人類型
rec_type: '',
// 外部媒體來源, 取來源(url)media_source的值
media_source: '',
// 渠道來源, 取來源(url)channel_source的值
channel_source: '',
// 獲客渠道, 取來源(url)source的值
source: '',
// 獲客路徑, 取來源(url)outerSource的值
outerSource: '',
// 活動ID號, 取來源(url)activity_Id的值
activity_Id: '',
// 活動的訂單流水號。空值，由mgm平臺隨機生成
activity_FlowId: ''
}
}
三、控制UI參數
{
// UI展示與隱藏。 0-不展示 1-展示 必傳
sharChannelArr: {
// 分享按鈕 0-不展示 1-展示
btn: "0",
// 微信好友及朋友圈
wx: "1",
// QQ空間
qqZone: "1",
// 新浪微博
sina: "1",
// 二維碼
erweima: "1"
}
}
四、ucp微信授權參數
{
// 調用ucp需求參數，
ucpParamObj: {
// 公眾號appId 必傳
appId: '',
// 微應用號 必傳
weappNo: '',
// 請求ucp接口地址 必傳
ucp_url: '',
// 頁面域名 必傳
backUrl: location.origin,
// 必傳
openid: ''
}
}
五、其他參數
{
// 其他統計參數; 非必傳, 有實際統計需求時使用
otherObj: {
// 意向客戶
intentCust: '',
// 產品編碼
productCode: '',
// 推廣單位代碼
pubOrgCode: '',
// 分享頁面類型；1-產品頁; 2-活動頁; 3-資訊頁; 4-名片; 5-直播
sceneCode: '',
// 推薦人姓名
recName: ''
},
// 是否自定義樣式 1-自定義; 默認為空
customCSS: '1',
// 埋點頁面title 建議傳值; 默認為document.title
webtrendsTitle: '',
// 運行環境, stg, prd 建議傳值; 初始值為prd, 如域名中帶stg強制修改為stg
environment: 'stg',
// 是否是口袋APP2.0 建議傳值; 初始值為false，如ua中能取到'paebank_app_running_anchor'強制修改為true
isKDAPP2: false,
// 當前活動ID, 必傳 產品經理包興麗分配
pactivityId: ''
}
全部參數示例
var options = {
// 自定義分享4項, title, content, picture, url
shareObj: {
// 分享title 必傳
title: '分享測試title',
// 分享簡介 必傳
content: '分享測試content',
// 分享縮略圖 必傳
picture: '/brop-cmp/act/assets/share/img/paBankLogo.png'
},
// 分享url, 折分為3部分
shareUrlObj: {
// 分享url, 包含請求協議,域名,目錄,文件名 必傳
url: location.origin + location.pathname,
// 分享頁面需求參數, 可以為空, 如果有值以"?"開頭 umMode userType 破冰業務等邏輯字段,非公共,在此傳遞
search: '',
// 分享頁面需求hash值 可以為空 如果有值以"#"開頭
hash: ''
},
// 業績統計8大項, 根據實際需求傳值
paramObj: {
// 反顯推薦人信息使用，根據實際需要傳。反顯優化級：登錄態用戶信息 > options入參 > url上rec_no值 > 口袋sessionStorage > 記憶功能（localStorage）
rec_no: '',
// 推薦人類型
rec_type: '',
// 外部媒體來源, 取來源(url)media_source的值
media_source: '',
// 渠道來源, 取來源(url)channel_source的值
channel_source: '',
// 獲客渠道, 取來源(url)source的值
source: '',
// 獲客路徑, 取來源(url)outerSource的值
outerSource: '',
// 活動ID號, 取來源(url)activity_Id的值
activity_Id: '',
// 活動的訂單流水號。空值，由mgm平臺隨機生成
activity_FlowId: ''
},
// 調用ucp需求參數
ucpParamObj: {
// 公眾號appId 必傳
appId: '',
// 微應用號 必傳
weappNo: '',
// 請求ucp接口地址 必傳
ucp_url: '',
// 頁面域名 必傳
backUrl: location.origin,
// 必傳
openid: ''
},
// 調用ucp需求參數， ucp系統提供 必傳
ucpParamObj: {
// 公眾號appId 必傳
appId: '',
// 微應用號 必傳
weappNo: '',
// 請求ucp接口地址 必傳
ucp_url: '',
// 頁面域名
backUrl: location.origin,
// 必傳
openid: ''
},
// 其他統計參數; 非必傳, 有實際統計需求時使用
otherObj: {
// 意向客戶
intentCust: '',
// 產品編碼
productCode: '',
// 推廣單位代碼
pubOrgCode: '',
// 分享頁面類型；1-產品頁; 2-活動頁; 3-資訊頁; 4-名片; 5-直播
sceneCode: '',
// 推薦人姓名
recName: ''
},
// 是否自定義樣式 1-自定義; 默認為空
customCSS: '1',
// 埋點頁面title 建議傳值; 默認為document.title
webtrendsTitle: '',
// 運行環境, stg, prd 建議傳值; 初始值為prd, 如域名中帶stg強制修改為stg
environment: 'stg',
// 是否是口袋APP2.0 建議傳值; 初始值為false，如ua中能取到'paebank_app_running_anchor'強制修改為true
isKDAPP2: false,
// 當前活動ID, 必傳 產品經理包興麗分配
pactivityId: ''
}
使用案例
請參考：
/bank/test/share/shareDemo.html
使用建議
一、 使用分享組件加一下中間層
因為分享組件需適配各特性團隊不同需求，造成初始參數過多，不易理解維護。
但同一個項目調用分享組件的入參應該是一致的。因此，建議各特性團隊對使用分享組件做一次封裝，減少各頁面調用分享組件的入參。
參考demo: bank/test/act/demo.shtml
中間層代碼：activity-public.js（請自行維護更新，分享組件不維護activity-public.js）
二、 參數的傳進行公共封裝調用
由于8個業績統計參數字段即有駝峰又有下劃線，命名不規范，并需要在所有頁面傳遞。故建議對此功能做統一處理
功能分兩部分：
- 跳轉到其他頁面。建議封裝統一跳轉頁面函數，統一處理業績統計參數。
- 提交給后臺。對請求進行統一封，增加公共業績統計參數，字段名與數據平臺sdc保持一致；參數值優先取url，沒值后取cookie
常見問題
1、 3.0場景，使3.0測試包配置運行環境不是stg，造成獲取不到登錄態，分享流程中斷
2、 環境跨域問題。需要獲取登錄態的場景要能正常訪問到rsb 域名，登錄態要與統一認證中心打通
3、 直接使用微信右上角分享將統計不到業務
4、 分享url長度超過255個字符造成任意門、微博分享失敗
5、 分享文案觸發微信誘導分享規則造成分享展示不正常
誘導分享請參考： http://blog.sina.com.cn/s/blog_a0d71a9d0102wkok.html
