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