安装

#一. 安装包

npm 安装

npm i -S @dolphin-iot/jsbridge-sdk  或者 npm install @dolphin-iot/jsbridge-sdk --save-dev

yarn 安装

yarn add @dolphin-iot/jsbridge-sdk

升级接口模块
使用 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

手动修改package.json文件下的模块的版本号,然后执行以下命令：

cnpm install(推荐)
#或者
npm update 
#或者
npm install

#二. 入口文件安装DolphinBridge(main.js)

import jsbridge from '@dolphin-iot/jsbridge-sdk'
Vue.use(jsbridge);

注：

@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>

下载bridge.min.js

注：

以上引入方式仅供参考，
项目间引入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>

#五. 按需导出与使用

上述使用为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);
  })

#六. 本地项目调试

在美的美居app(sit版本)中进行本地项目调试

启动本地项目服务，将对应的项目服务地址生成对应的二维码；
在美居中扫描上述步骤生成的二维码，美居中扫码选项存在的位置如下：
安卓：我的》设置》关于美的美居》长按3秒美居logo后出现【扫一扫】选项，点击【扫一扫】，扫描二维码进行访问；
iOS: 我的》设置》关于美的美居》测试使用》点击【混合扫码】选项，扫码二维码。

注：

如果 npm 安装较慢，可以切换到淘宝源，使用cnpm安装

切换到淘宝镜像：npm config set registry https://registry.npm.taobao.org

posted on 2024-12-16 09:41 AtlasLapetos 阅读(21) 评论(0) 收藏举报