# 安装
# 一. 安装包
- npm 安装
npm i -S @dolphin-iot/jsbridge-sdk 或者 npm install @dolphin-iot/jsbridge-sdk --save-dev
1
2
2
- yarn 安装
yarn add @dolphin-iot/jsbridge-sdk
1
2
3
2
3
升级接口模块
使用 cnpm install -S + 模块
name+ 版本号，推荐使用cnpm,此处使用npm在部分版本下有问题。
# 升级到最新版本
cnpm install -S @dolphin-iot/jsbridge-sdk@latest
# 升级到指定版本，例如:
cnpm install -S @dolphin-iot/jsbridge-sdk@ + 版本号
# 使用0.0.30版本：
cnpm install -S @dolphin-iot/jsbridge-sdk@0.2.0
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 手动修改
package.json文件下的模块的版本号,然后执行以下命令：
cnpm install(推荐)
#或者
npm update
#或者
npm install
1
2
3
4
5
6
2
3
4
5
6
# 二. 入口文件安装DolphinBridge(main.js)
import jsbridge from '@dolphin-iot/jsbridge-sdk'
Vue.use(jsbridge);
1
2
3
4
2
3
4
注：
@dolphin-iot/jsbridge-sdk' 只适用于新H5容器中使用,
老H5容器请使用 iosbridge
# 三. html模板文件引入原生交互依赖的文件。
<!-- 以vue-cli@3.x生成项目模板为例 -->
<!-- jsbridge.min.js 路径为 /public/jsbridge.min.js -->
<!-- /public/index.html -->
<head>
<script type="text/javascript" src="jsbridge.min.js"></script>
</head>
<!-- 以vue-cli@2.x生成项目模板： -->
<!-- jsbridge.min.js 放置在 /static/jsbridge.min.js -->
<!-- /index.html -->
<head>
<script type="text/javascript" src="static/jsbridge.min.js"></script>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
注：
以上引入方式仅供参考，
项目间引入jsbridge文件时，请结合项目具体配置来引入jsbridge文件
# 四. 调用方式
<template>
<div class="app">
<div>{{message}}</div>
<button @click="clickHandler">快速上手</button>
</div>
</template>
<script>
export default {
components: {
},
data:() => ({
message: 'hello world'
}),
methods: {
clickHandler() {
this.$bridge
.getSystemInfo()
.then((res) => {
console.log("getSystemInfo-res", res);
})
.catch((err) => {
console.log("getSystemInfo-err", err);
});
}
}
}
</script>
<style scoped>
.app {
width: 750px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# 五. 按需导出与使用
上述使用为vue2项目全局引入与挂载到全局与使用，也可以单独导出 Bridge 对象，自行挂载到项目中以及使用。
import { Bridge } from ' @dolphin-iot/jsbridge-sdk'
Bridge.getSystemInfo()
.then(res => {
console.log("getSystemInfo-res", res);
})
.catch(err => {
console.log("getSystemInfo-err", err);
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 六. 本地项目调试
在美的美居app(sit版本)中进行本地项目调试
- 启动本地项目服务，将对应的项目服务地址生成对应的二维码；
- 在美居中扫描上述步骤生成的二维码，美居中扫码选项存在的位置如下：
安卓：我的 》 设置 》 关于美的美居 》 长按3秒美居logo后出现【扫一扫】选项，点击【扫一扫】，扫描二维码进行访问；
iOS: 我的 》 设置 》 关于美的美居 》 测试使用 》 点击 【混合扫码】选项，扫码二维码。
注：
如果 npm 安装较慢，可以切换到淘宝源，使用cnpm安装
切换到淘宝镜像：npm config set registry https://registry.npm.taobao.org
更新日志 →