小伙伴们在用 vue 开发 h5 项目特别是移动端的项目, 很多都是打包后挂载在原生 App 上的, 那就少不了与原生交互了, 我最近就是在坐这个, 踩了一些坑, 拿出来给大家分享下.
0. 通过 url 传输数据:(一般是在入口页面传下 App 的用户信息进来供 vue h5 使用)
- 1 methods: {
- 2 // 接收 url 后的数据
- 3 urltext() {
- 4 let loc = location.href; 6 let n1 = loc.length;// 地址的总长度
- 7 let n2 = loc.indexOf("=");// 取得 = 号的位置
- 8 let outToken = loc.substr(n2 + 1, n1 - n2);// 从 = 号后面的内容
- 9 console.log(loc,n1,n2,outToken)
- 10 this.outTokenPost(outToken) // 传到处理函数
- 11 },
- 12 }
1. 原生 App 提供一个接口对象的引用 (例如一个扫码的接口, 可能还有回调函数以获得扫码结果)
思路就是万物通过 Windows 进行交互
- // 将 vue 组件的要回调的函数暴露出去
- mounted:function(){
- // 将 subscanQRCallBack 方法绑定到 Windows 下面, 提供给外部调用
- Windows['scanQRCallBack'] = (result) => {
- this.subscanQRCallBack(result)
- }
- },
- methods:{
- scan(){
- // alert('开始扫码了')
- Windows.client.startScanQR('OS 与 js 交互',scanQRCallBack) // 通过 Windows 调用 App 提供的 client 对象
- },
- subscanQRCallBack(result){
- // alert('扫码结果 6466:'+result);
- this.scanPost(result)
- },
- }
来源: https://www.cnblogs.com/nogodie/p/10029858.html