修改默认端口号为指定端口号。
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,'我是回调函数')