与原生交互(uniapp 篇)

一. uniapp主动给原生APP 传值信息

1. uniapp -> 安卓:
    window.JsCallNative['方法名'](参数)
                    
    已封装好方法,使用示例:
    //引入文件
    import { andriodjs, iosjs } from "@/common/appfunc.js"
                    
    // 参数
    let param = {
        'url': 'https://www.baidu.com'
    }
    const datafor = {
        name: 'showView',            // 方法名
        data: JSON.stringify(param)   //  统一传json 字符串对象
    }
     andriodjs(datafor)


2. uniapp -> IOS:
    window.webkit.messageHandlers['方法名'].postMessage(参数);
                    
    已封装好方法,使用示例:
    //引入文件
    import { andriodjs, iosjs } from "@/common/appfunc.js"
                    
    // 参数
    let param = {
        'url': 'https://www.baidu.com'
    }
    const datafor = {
        name: 'showView',            // 方法名
        data: JSON.stringify(param)   //  统一传json 对象字符串
    }
    iosjs(datafor)
二. uniapp 主动获取 原生数据信息
1. uniapp -> 安卓:
    const info = window.JsCallNative.方法名();
                        
    示例: 
    const info = window.JsCallNative.getUserInfo();

 2. uniapp -> IOS:
    说明: 由于 uniapp 无法像安卓一样主动获取 IOS 中的方法信息,所以我们需要让 uniapp 先触发一个方法告知IOS, 然后 IOS 在主动注入 JS 方法进行让 uniapp 页面获取信息

    示例:
     // 绑定事件到 window 层
     window.方法名 = this.方法名
    // 在methods中定义方法,获取数据信息
    方法名(e) {
        console.log('--打印获取的信息', e)
    }
三. 原生APP 主动调用 uniapp 中的方法.
 1. 安卓 ->  uniapp:(注意:安卓那边必须穿 json 字符串)

    // 现将方法挂载到 window 上
    window.方法名 = this.方法名
    // 直接在methods中定义方法,获取数据信息
    方法名(e) {
        console.log('--打印获取的信息', e)
    }
                 
    示例:
    onLoad() {
        window.passMsgFromAndroid = this.passMsgFromAndroid
    },
                         
     methods: {
       // 获取用户信息
        passMsgFromAndroid(e) {
            uni.showToast({
                title: e + '222',
                    icon: 'none',
                duration: 1000
               });
             },
         }

 2. IOS -> uniapp

     // 绑定事件到 window 层
        window.方法名 = this.方法名
     // 在methods中定义方法,获取数据信息
        方法名(e) {
            console.log('--打印获取的信息', e)
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容