[JavaScript知识库]uniapp混合开发总结

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

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

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

3.重启服务

uniapp 组件通讯

uni.$emit(eventName,OBJECT)

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

代码示例

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

uni.$on(eventName,callback)

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

代码示例

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

uni.$once(eventName,callback)

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

代码示例

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

uni.$off([eventName, callback])

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

• 如果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,'我是回调函数')

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系