1.0.45 • Published 3 months ago

nvue2 v1.0.45

Weekly downloads
-
License
ISC
Repository
-
Last release
3 months ago

npm version patch npm publish

此插件专用于uni-app的nVue

安装:npm install nuve2

  1. 在任意目录创建文件:config.js,结构见当前目录下/example/config.js;

  2. 在项目根目录App.vue: 其中config.js指向实际位置

<script>
	import install from 'nvue2/install';
	import config from '@/common/config';
	
	//扩展方法,可以引入多个,在页面中直接用:this.runtime....
	import runtime from '@/common/runtime';
	
	//可以引入多个
	import mixin from '@/common/mixin';
	
	export default {
		computed: {
			...install(config, { runtime }, [mixin])
		},
	}
</script>
  1. 控件引用:
  • 在每个实际的nvue文件顶部引入:import 'nvue2';
  • 非APP项目只需在首页(pages.json的第一个页面)引入一次,其他页面:
<script>
	// #ifdef APP-PLUS || H5
	import 'nvue2';
	// #endif
	
	………………
	
</script>
  1. 对象调用:
  • 各页面可以直接调用本插件的几个基础对象:app,api,db,pages,例:this.$api.post(...),
  • 也就是在这几个名称前加$号,这几个对象合称为kernel对象;
  1. WebSocket侦听: WebSocket在APP启动时就与服务器连接,而且只有一个连接,收发方法:
  • 发送: - 方法1:this.$send(action,message),无回调发送 - 方法2:this.$send(action,message).then(res=>{}),有回调发送 - 实际发送的数据结构如下,注意其中index,在服务端返回数据时要带上,否则有回调发送不工作。
{
	action: action,
	time: Date.now(),
	index: index,
	message: message,
}
  • 接收:
  1. 在需要受理全局广播的页面methods中添加onSocketMessage(data) {}方法,此方法只能接收到所有无回调发送的结果;
  2. 注册了侦听的页面在发生回退的时候将取消当前页面的侦听,但是若页面的回退不是点击原生回退或其他情况发生页面跳转,而且跳转后不再需要继续侦听,需要在触发方法内执行this.unlisten();;否则会造成侦听列表过长。
  • 服务器返回:
  1. 客户端发送的数据中index作为标识,要原样带回,若不带回,则将按无回调发送处理,也就是会被全局侦听处理;
  2. 客户端发送的action作为服务器端处理标识,返回也要返回action,但这是向客户端发送的处理标识,自行定义自行处理即可。
  3. 例如发送{action:'register',…………},服务端返回{action:"newuser",……},则在需要处理newuser的页面中自行处理:
onSocketMessage(data) {
	switch(data.action){
		…………后续处理
	}
}
  1. 所有全局侦听都收到这些数据,当然也可以同时处理。
  2. config.socket中定义了result对象,则上面所有返回值都是new result(DATA,KERNEL)的对象,DATA是服务器返回的数据原样,没有json序列化,若没有带result对象,则返回的数据是经过json序列化的。
  3. 也可以不采用上述方案,而是用uniapp自带的全局侦听方案:定义result对象,在result的constructor中uni.$emit(eventName,OBJECT)触发,在需要的地方uni.$on(eventName,callback)uni.$once(eventName,callback)

引入组件

pages.json中:

"easycom": {
	"autoscan": true,
	"custom": {
		"^vue2-(.*)": "nvue2/components/$1/$1.vue"
	}
}

引入css

App.vue中

@import "nvue2/css/public.scss";
1.0.45

3 months ago

1.0.44

3 months ago

1.0.43

3 months ago

1.0.42

3 months ago

1.0.41

3 months ago

1.0.39

3 months ago

1.0.38

3 months ago

1.0.40

3 months ago

1.0.37

4 months ago

1.0.36

4 months ago

1.0.35

4 months ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.34

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.26

1 year ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.7

2 years ago

1.0.2

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

3 years ago

1.0.0

3 years ago