金鹏信息原生与H5交互项目—app-h5

1. 简介

基于vue开发利用dsbridge简单便捷的与原生交互

2. 基础环境

(vue 2.6.0 +) (nodejs 6.0+)

3. 如何使用

3.1. 安装

npm install dsbridge -S

3.2. 引入

//main.js中
import dsBridge from "dsbridge";
Vue.prototype.dsBridge = dsBridge;

3.3. 使用

  • 打开原生登录页面
dsBridge.call("goToLogin", { name: "xxx", age: "18" }, function(v) {alert(v);})
  • 获取图片
//imageWidth图片宽度
//imageHeight图片高度
//imageType图片类型
 dsBridge.call("updateImage", { imageWidth: "100px", imageHeight: "100px", imageType: "png" }, function(v) {alert(v);})
  • 调起支付
//orderNo订单号
//money金额
//channel支付类型(wx或ali)
 dsBridge.call("pay", { orderNo: "123456", money: 2.34, channel: "ali" }, function(v) {alert(v);})
  • 定位
//csysType坐标类型
dsBridge.call("getLocation", {  }, function(v) {alert(v);})
  • 导航
//csysType坐标类型
//X(x轴坐标)
//Y(y轴坐标)
dsBridge.call("navigateTo", { lon: "113.66", lat: "34.75", address: "" }, function(v) {alert(v);})
  • 关闭原生页面
dsBridge.call("close", { name: "xxx", age: "18" }, function(v) {alert(v);})
  • 设置原生页面title
dsBridge.call("setTitle", { title: "金鹏信息" }, function(v) {alert(v);})

4. 调用示例

4.1. template

4.2. script

5. 鸣谢

dsbridge

源码地址:http://sources.jpsycn.com/dev-plat/h5/app-h5.git

Copyright © jpsycn.com 2018 all right reserved,powered by Gitbook该文件修订时间: 2019-09-10 14:25:57

results matching ""

    No results matching ""