@netease-beauty/js-sdk

[![build status](https://g.hz.netease.com/beauty/beauty-js-sdk/badges/master/build.svg)](https://g.hz.netease.com/beauty/beauty-js-sdk/commits/master) [![coverage report](https://g.hz.netease.com/beauty/beauty-js-sdk/badges/master/coverage.svg)](https://g

Stats

StarsIssuesVersionUpdatedCreatedSize
@netease-beauty/js-sdk
2.3.03 years ago4 years agoMinified + gzip package size for @netease-beauty/js-sdk in KB

Readme

美学 JS-SDK

build status coverage report

美学 JS-SDK 是为第三方开发者提供的网页开发工具包。

通过美学JS-SDK,网页开发者可以打开APP、判断是否在APP中,还可以在APP中获取到获取网络情况、进行登录、获取/编辑用户信息、分享等。

安装

Install with yarn:

$ yarn add @netease-beauty/js-sdk

Install with npm:

$ npm install @netease-beauty/js-sdk

引入

// 推荐
import beauty from '@netease-beauty/js-sdk'

或直接引入 https://m.mei.126.net/beauty-js-sdk-[version].js,使用window.beauty.

变量

  • User Agent:beauty.ua
  • 是否在美学APP中:beauty.inApp
  • APP当前版本:beauty.version
  • 网络情况:beauty.networkType( 'WIFI', '4G', 'UNKNOW', 等)
  • 是否为WIFI网络:beauty.isWifi

注意:

1. iOS < 1.4.0 以及 Android <= 1.4.0 无法正确判断网络情况,beauty.networkType === `UNKNOW` 且 `beauty.isWifi === undefined`
2. Android 1.4.0 版本开始才可以判断是否在App中,之前版本 `beauty.inApp === false` 且 `beauty.version === undefined`,但可以调用其它接口

配置

beauty.config({
  debug: true, // 开启调试模式,调用api时相关信息会在客户端alert
  refresh(data, callback) {} // 页面刷新处理函数
}).then(function () {
  // sdk就绪(jsbridge已注入且jssdk配置完成),这里可以进行一些初始化工作
  }, function (errMsg) {
  // 失败
})

SCHEME

获取url
// type: 类型
// restParams:0~n个字符串参数,用于格式化scheme
// options: 最后一个参数如果是对象类型,则将对象的key和value作为query附加到url上
beauty.getURLScheme(type: string, ...restParams, options?: <object>)
当前支持的类型
// version: 从该版本开始支持,早于该版本getURLScheme将返回null
const URL_SCHEME = {
  webview: { url: 'webview' },
  // 产品
  product: { url: 'product/{0}' },
  // 品牌
  brand: { url: 'brand/{0}' },
  // 心得
  note: { url: 'record/{0}' },
  editNote: { url: 'recordeditor' },
  editTrialReport: { url: 'recordeditor', version: '1.5.0' },
  // 合辑
  repo: { url: 'repo/{0}'},
  // 标签
  tag: { url: 'tag/{0}' },
  // 视频
  video: { url: 'video/{0}' },
  // 问答
  questionList: { url: 'questionList', version: '1.4.3' },
  question: { url: 'question/{0}', version: '1.4.3' },
  answer: { url: 'answer/{0}', version: '1.4.3' },
  // 地址
  editAddress: { url: 'trial/order/{0}/addressEdit', version: '1.5.0' }
}
示例
const url = beauty.getURLScheme('product', 123, {
  'da_location': 2
})
// url === 'nemeixue://product/123?da_location=2'

接口

在美学APP中打开页面
beauty.launchApp({
  redirect: 'http://mkt.mei.163.com/blabla', // app中需要打开的网页地址
  degradedLink: '' // app打开失败后重定向到该链接,缺省将会根据平台信息打开应用宝,itunes或下载页
})

// or 缺省写法
beauty.launchApp('http://mkt.mei.163.com/blabla')
是否登录
beauty.isLogin().then(function (isLogin) {
  // 返回 true || false
}, function (errMsg) {
  // 异常处理
})
登录

拉起网易美学 App 的登录 UI

beauty.login().then(function (user) {
  // 返回当前用户信息
}, function (errMsg) {
  // 异常处理
})
获取当前用户信息
beauty.getUserInfo().then(function (user) {
  // 返回当前用户信息
}, function (errMsg) {
  // 异常处理
})
编辑用户信息

拉起编辑用户信息 UI

beauty.editUserInfo().then(function (user) {
  // 返回更新后的用户信息
}, function (errMsg) {
  // 异常处理
})
分享
beauty.share({
  guideTitle: '先分享再申领哦!', // 可选参数,引导标题
  title: 'EGF、干细胞、脐带血精华……护肤品中的“伪概念”你信了多少?-配方师Rex', // 分享标题
  subTitle: '作为一名护肤品研发人员,我觉得市场部的同事要比我们辛苦的多,因为', // 分享描述
  shareType: 1, //分享方式(1链接,3图片),其中图片模式在1.3.1版本引入
  url: 'http://mei.163.com/repo/prx5cff609f0c71a67fed1a6ce0e016a381', // 分享链接
  imageUrl: 'https://beauty.nosdn.127.net/beauty/img/1383b5fb-1a4b-4c00-90bf-81ec983c07a3.jpg' // 分享图
  channel: [1, 2], // 可选参数,支持的分享渠道,缺省为所有渠道
}).then(function () {
  // 分享成功
}, function (errMsg) {
  // 分享失败
})

其中渠道的具体代码:

1. 微信好友
2. 微信朋友圈
3. QQ好友
4. QQ空间
6. 新浪微博
7. 复制链接
预览图片
beauty.previewImage({
  urls: [
    'http://beauty.nos.netease.com/beauty/img/a505a6ec-7330-446e-9a37-c19af7f76855.jpg',
    'https://beauty.nosdn.127.net/beauty/img/b52dbbd7-0229-437c-bfe7-6b255aca7880.jpg'
  ], // 被预览的图片列表
  current: 1 // 当前图片下标
})
版本比较
beauty.compareVersion('1.5.0') // 被比较的版本号

返回值:

0. 当前版本与被比较的版本一致
1. 当前版本较新
-1. 当前版本较旧
null. 版本信息有误
检测是否开启推送,未开启则弹出提醒弹窗
beauty.checkPushSwitchState()

任务

如果调用接口时不确定SDK是否完成初始化,则可以创建一个任务。

任务会被添加到任务队列中,初始化完成后会依次调用队列中的任务。(如果创建任务时初始化已完成,则直接执行任务。)

beauty.task(name: string,  ...theArgs)

例如:

beauty.task('enableRefresh')

刷新页面

如果需要下拉刷新功能,需要在config函数中传入刷新函数:

beauty.config({
  refresh(data, callback) {
    // 更新数据逻辑
    // ...
    // 更新数据后通知客户端更新完成
    callback()
  }
})
// 启动下拉刷新,此时如果不确定SDK是否完成初始化,就创建一个任务
beauty.task('enableRefresh')
// 取消下拉刷新
beauty.disableRefresh()

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.