美学 JS-SDK

美学 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()