修改默认端口号为指定端口号。

1、打开项目中的 manifest.json 文件

2. 点击h5 设置,修改端口

3.重启服务

uniapp 组件通讯

uni.$emit(eventName,OBJECT)

触发全局的自定义事件,附加参数都会传给监听器回调函数。

属性

类型

描述

eventName

String

事件名

OBJECT

Object

触发事件携带的附加参数

代码示例

uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。

属性

类型

描述

eventName

String

事件名

callback

Function

事件的回调函数

代码示例


uni.$on('update',function(data){
		console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
	})


uni.$once(eventName,callback)

监听全局的自定义事件,事件由 uni.$emit 触发,但仅触发一次,在第一次触发之后移除该监听器。

属性

类型

描述

eventName

String

事件名

callback

Function

事件的回调函数

代码示例


uni.$once('update',function(data){
		console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
	})


uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性

类型

描述

eventName

Array<String>

事件名

callback

Function

事件的回调函数

  • 如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
  • 如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;
  • 如果同时提供了事件与回调,则只移除这个事件回调的监听器;
  • 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;

注意事项

  • uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
  • 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听
  • 注意 uni.$on 定义完成后才能接收到 uni.$emit 传递的数据

uniapp--H5与app端交互

native.js

调取安卓或ios原生方法


判断为ios 
function checkIsAppleDevice() {
	var u = navigator.userAgent,
		app = navigator.appVersion;

	var ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

	var iPad = u.indexOf("iPad") > -1;

	var iPhone = u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1;

	if (ios || iPad || iPhone) {
		return true;
	} else {
		return false;
	}
}

//获取id
function getUserIdId() {
	if (checkIsAppleDevice()) {
		window.webkit.messageHandlers.getUserIdId.postMessage({});
	} else {
		Android.getUserIdId();
	}
}
module.exports = {
    checkIsAppleDevice
    getUserIdId
}


 NativeCallback,js 在app.vue初始化完毕后挂载到window 

window.NativeCallback = NativeCallback;

当调用native.getUserIdId判断ios或者Android app端收到NativeCallback .getUserIdId调用返回id

触发全局的自定义事件 getUserIdId,附加参数都会传给监听器回调函数。

const NativeCallback = {
  getUserIdId: (userIdId) => {
  	uni.$emit('getUserIdId', userIdId)
  },
}
export default NativeCallback;

func,js

监听全局的自定义事件,getUserIdId

const func = { 
getUserIdId(callback) {
  
  	try {
  		native.getUserIdId()
  		uni.$once('getUserIdId', res => {
  			console.debug('native getUserIdId =>res=' + res)
  			callback(res)
  		})
  	} catch (e) {
  		console.log('getUserIdId err=>' + e.message)
  		callback(false)
  	}
  },
}

export default func;

main,js挂载使用

import Func from './common/func.js';
Vue.prototype.$Func = Func;
    this.$Func.getUserIdId((res) => {
          this.userIdId = res
        })

  回调函数

  回调函数就是传递一个参数化的函数,就是将这个函数作为一个参数传到另一个主函数里面,当那一个主函数执行完之后,再执行传进去的作为参数的函数。走这个过程的参数化的函数 就叫做回调函数。换个说法也就是被作为参数传递到另一个函数(主函数)的那个函数就叫做 回调函数。

        简单来说:回调函数即别人调用了这个函数,即函数作为参数传入另一个函数。

        1. 自己定义的函数

        2. 自己没调用

        3. 函数最终执行了

function test(value){   //这就是回调函数
    console.log(value)
}
function main(test,value){ //test作为一个参数传递进来
    console.log(value)   
    test(value)     // 我是回调函数
}
main(test,'我是回调函数')