YaohuiHou/THAM

卡车之家weex开发--native与js通信

THAW

卡车之家weex开发--native与js通信

link

---

THAW 模块名 （truckhome and weex）在此模块下进行扩展和补充。

---

• 返回按钮
• 主动获取客户端信息
• 拨打电话
• 拍照或从手机相册中选图接口
• 监听上传图片回调
• 获取经纬度
• 根据经纬度显示地图
• 判断是否登录
• 去登录
• url跳转
• webView标题
• 登录回调
• 地理位置提交
• 分享
• 显示正在加载弹层
• 隐藏正在加载弹层
• 响应客户端返回按键
• 关闭应用，直接退出
• 如果请求失败，返回格式

返回按钮

文档位置：https://weex-project.io/cn/references/advanced/extend-to-android.html

<!-- weex -->
<template>
  <div>
    <div class="header">
      <div class="back" @click="back">
        <div class="icon"></div>
      </div>
    </div>
</template>

<script>
  export default {
    methods:{
      back:function(){
        //  判断是否为路由跳转
        if (this.$route && this.$route.params.id) {
          this.$router.push('/')
          return ;
        }
        //   native操作
        weex.requireModule('THAW').onGoBack("1");
        return ;
      }
    }
  }
</script>

点击事件执行的时候给客户端传一个定好的值‘1’，告诉客户端需要做的操作

主动获取客户端信息

在客户端打开页面的时候主动向native端传值1，module回调，通过onGetData方法通知，将得到的 信息进行操作

<script>
    export default {
        created () {
            var me = this;
            var THAW = weex.requireModule('thaw');
            THAW.onGetData('1',function(ret) {  
                me.userid = ret.userid;
                me.userName = ret.userName;
                //执行操作
            }
        }
    }
</script>

这里是进入每个页面后得到用户信息，格式json，{'userid':'123456','userName':'牛逼啦123'}
这个操作在created中执行，且this必须在外定义，否则找不到

拨打电话

拨打电话和第一个点击返回按钮是一样的意思，这次用的是onGoCall方法，将电话号码传给调取电话功能。

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').onGoCall("400-800-1616");
        }
    }
</script>

拍照或从手机相册中选图接口

点击按钮弹出询问用户调取摄像头还是图库，传递"album",代表只调取图库，如果传递 "camera"，代表只调取摄像头，默认两者都有。返回图片的预览地址 返回JSON：{state:"success":data:'预览地址'}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').chooseImage();
        }
    }
</script>

监听上传图片回调

用户上传图片的时候监听是否上传成功，返回JSON：{imageUpload:'图片预览地址'}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
let globalEvent = weex.requireModule('globalEvent');
<script>
    export default {
        call (){
            //   native操作
            globalEvent.addEventListener('chooseImageCallBack',function(res){

            });
        }
    }
</script>

获取经纬度

获取用户当前设备所在位置的经纬度。 返回JSON：{state:"success":data{latitude:'',longitude:''}}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').getLocation();
        }
    }
</script>

根据经纬度显示地图

发送经纬度调取地图，标注位置点始终在所发送的经纬度，如果有第三个参数，第三个参数为"auto",那么标注位置始终为地图的中心点，并返回地图中心点的经纬度和地址名称 返回JSON：{state:"success":data{latitude:'',longitude:'',name:''}}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').onShowMap({latitude : ' ',longitude : ' ',type:'auto'});
        }
    }
</script>

判断是否登录

判断用户是否登陆，登陆返回用户的id，未登录返回为0，返回JSON：{state:'success',data:'0'}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').onIsLogin();
        }
    }
</script>

去登录

调起登陆弹层

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').onGoLogin();
        }
    }
</script>

url跳转

url跳转，需要传一个参数，参数为需要跳转的url地址

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').goUrl('需要跳转的url地址');
        }
    }
</script>

webView标题

在m站中发送标题名称 app需要在头部使用该标题

<!--html-->
<body>
    
</body>

<!--js-->
<script>
    document.addEventListener('WebViewJavascriptBridgeReady', function(){
         WebViewJavascriptBridge.callHandler('onChangeWebTitle',{"changeWebTitle":'标题名称'});
    });
</script>

登录回调

点击去登陆的时候监听用户登陆是否成功，如果成功返回用户的userId 返回JSON：{userId:''}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
let globalEvent = weex.requireModule('globalEvent');
<script>
    export default {
        call (){
            //   native操作
            globalEvent.addEventListener('onGoLoginCallBack',function(data){
                
            })
        }
    }
</script>

地理位置提交

点击按钮返回用户选择的经纬度和街道名称 返回JSON：{longitude:'',latitude:'',address:''}

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
let globalEvent = weex.requireModule('globalEvent');
<script>
    export default {
        call (){
            //   native操作
            globalEvent.addEventListener('onLocationCommit',function(res){

            });
        }
    }
</script>

分享

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    export default {
        call (){
            //   native操作
            weex.requireModule('THAW').onShowShare({
                title: "", // 分享标题
                desc: "", // 分享描述
                link: "", // 分享链接
                imgUrl: "" // 分享图标
            });
        }
    }
</script>

显示正在加载弹层

   接受一个string参数，正在加载的文案显示为所传的参数

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
     let thaw = weex.requireModule('THAW')
     export default {
        call (){
            //   native操作
            thaw.onShowLoading('正在加载中...');
        }
    }
</script>

隐藏正在加载弹层

   隐藏正在加载的弹层

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
     let thaw = weex.requireModule('THAW')
     export default {
        call (){
            //   native操作
            thaw.onHideLoading();
        }
    }
</script>

响应客户端返回按键

   app返回键做出对应操作

<!--html-->
<template>
    <div @click="call" class="phone"></div>
</template>

<!--js-->
<script>
    let globalEvent = weex.requireModule('globalEvent');
     export default {
        call (){
            //   native操作
            globalEvent.addEventListener('onRespondNativeBack',function(data){
                
            })
        }
    }
</script>

关闭应用，直接退出

   直接返回到app页面

<!--html-->
<template>
    <div @click="back" class="back"></div>
</template>

<!--js-->
<script>
     let thaw = weex.requireModule('THAW')
     export default {
        back (){
            //   native操作
            thaw.onGoBack();
        }
    }
</script>

如果请求失败，返回格式

JSON：{state:error,data,"失败原因"}