vue，angular，微信小程序的一些不同(持续更新)

最近在学uni-app，发现和vue，微信小程序语法差不多，但公司技术栈是angular，已经接近一年没使用vue和微信小程序了，所以在这里小小总结下(基于自己)，勿喷。

啊啊啊啊，最近这几个有点搞昏了，如有错误请指出，谢谢。

一、数据绑定

1. vue

html部分

<span>{{authorName}}</span>
<img :src="imgSrc">

注: 这里遇到个问题 当我 写成 imgSrc: ‘./assets/logo.png’ 时图片加载失败
此时将代码改成 imgSrc: require(’./assets/logo.png’)即可

js部分

export default {
  data(){
	return {
		authorName: 'ycy',
		imgSrc: require('./assets/logo.png')
	}  
  }
}

// 修改的话
this.authorName = 'ycy2';

2. angular

html部分

<span>{{authorName}}</span>
<img src={{imgSrc}}>

js部分

public authorName: string = 'ycy';
public imgSrc: string = './assets/logo.png';

// 修改的话
this.authorName = 'ycy2';

3. 微信小程序

html部分

<text>{{authorName}}</text>
<image src="{{imgSrc}}"></image>

注:
微信小程序没有img标签，取而代之的是image
没span等标签，确认代之的是text等等

js部分

data: {
    authorName: 'ycy',
    imgSrc: './assets/logo.png'
}

// 修改的话
this.setData({authorName: 'ycy2'});

这里比较下来还是vue和angular的修改方式方便多了

二、列表渲染

// 初始列表数据
list: [
	{name: 'zhangsan', sex: '男'},
	{name: 'lisi', sex: '女'}
]

效果如下：

1. vue

<div v-for="(item, index) in list">
	{{index + 1}}  姓名: {{item.name}}  性别: {{item.sex}}
</div>

2. angular

<div *ngFor="let item of list; index as i">
	{{i + 1}}  姓名: {{item.name}}  性别: {{item.sex}}
</div>

3. 微信小程序

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
	{{index + 1}}  姓名: {{item.name}}  性别: {{item.sex}}
</view>

三、条件渲染

注: 下面代码isShow默认为true

1. vue

<div v-if="totalNumber === 1">1</div>
<div v-else-if="totalNumber === 2">2</div>
<div v-else>其他</div>

<div v-show="isShow">显示</div>
<div v-show="!isShow">隐藏</div>

2. angular

<ng-container *ngIf="totalNumber === 1; else elseTemplate">
  1
</ng-container>
<ng-template #elseTemplate>
   <ng-container *ngIf="totalNumber === 2; else elseTemplate2">
     2
   </ng-container>
   <ng-template #elseTemplate2>
     其他
   </ng-template>
</ng-template>

<div [hidden]="!isShow">显示</div>
<div [hidden]="isShow">隐藏</div>

3. 微信小程序

<view wx:if="totalNumber === 1">1</view>
<view wx:elif="totalNumber === 2">2</view>
<view wx:else>其他</view>

<view hidden="{{!isShow}}">显示</view>
 <view hidden="{{isShow}}">隐藏</view>

四、事件处理

1. vue

<button v-on:click="tapFuc('click')">点击事件</button>

methods: {
 tapFuc: function(param) {
  console.log(param);
 }
},

2. anuglar

<button (click)="tapFuc('click')"></button>

public tapFuc(param): void {
	console.log(param);
}

3. 微信小程序

<button bindtap="tapFuc" data-par="click">点击事件</button>

tapFuc: function(e) {
 console.log(e);
 console.log(e.target.dataset.par);
}

// e显示如下
{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "par":"click"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

微信这一点都不人性化

五、父子组件通信

1. vue

1. 父组件

<template>
  <div>
  	<HelloWorld msg="Welcome to Your Vue.js App" @sendToFather="getFromChild"/></HelloWorld>
  </div>
</template>

// 父组件要注册子组件
import HelloWorld from './components/HelloWorld.vue'

components: {
  HelloWorld
},
methods: {
 getFromChild(data) {
 // 接收来自子组件的消息
  console.log(data);
 }
},

2.子组件

<button v-on:click="tapChildFuc()">子组件的点击事件</button>

export default {
// props用来接收父组件的值
  props: {
    msg: String
  }，
  methods: {
	  tapChildFuc: function() {
	  	// 给父组件发送消息
		  this.$emit('sendToFather', {name: 'aaa'});
	  }
  }
}

2. angular

注:
angular的公用组件要注册
我一般放在share.module下

import { TextAnalysisComponent } from './components/text-analysis/text-analysis.component';

const declarations = [
  TextAnalysisComponent,
];

@NgModule({
  imports: [...imports],
  declarations: [...declarations, ...directives],
  providers: [...providers],
  exports: [
    ...declarations,
    ...imports,
    ...directives
  ],
})

父组件

// 在父组件最接近的module里要引用
import { ShareModule } from '../../../../shared/shared.module';
const imports = [
  CommonModule,
  FormsModule,
  RouterModule.forChild(routes),
  NgZorroAntdModule,
  ShareModule,
];
@NgModule({
  imports: [ ...imports ],
  declarations: [ ...declarations],
  providers: [ ...providers ],
})

// 下面是父组件的代码
<dgp-text-analysis
	[msg]="'Welcome to Your Angualr App'" (sendToFather)="getFromChild($event)">
</dgp-text-analysis>

public getFromChild(data: any): void {
	console.log(data);
}

子组件

<button v-on:click="tapChildFuc()">子组件的点击事件</button>

@Input() public msg: string; //这里接收来自父组件传过来的值
@Output() public sendToFather: EventEmitter<any> = new EventEmitter<any>();
public tapChildFuc(): void {
	//向父组件发送消息
	this.sendToFather.emit({name: 'aaa'});
}

3. 微信小程序

父组件

// 2.父组件的json中使用usingComponents引入
{
  "usingComponents": {
    "helloWorld": "../../components/indexList/indexList"
  }
}

// html
<helloWorld msg="Welcome to wx"></helloWorld>

子组件

// 1.在子组件的json中的component修改为true
{
  "component": true
}

<button bindtap="tapChildFuc" bind:sendToFather="getFromChild">子组件的点击事件</button>

methods: {
	getFromChild(e) {
	//	接收来自子组件的消息
		console.log(e.detail)
	}
}


// js文件中使用properties接收父组件传过来的信息
properties: {
  msg: {
    type: String,
    value: ''
  }
},
methods: {
	tapChildFuc() {
	// 向父组件发送消息
	   this.triggerEvent('sendToFather', { name: 'aaa' }) //sendToFather自定义名称事件，父组件中使用
	 }
}

这样一比较，感觉angular最烦了，尴尬

六、兄弟间通信

1. vue

1、创建个事件车bus.js,代码如下

import Vue from 'vue'

export default new Vue;

2、在两个兄弟组件中引用

import bus from '../assets/js/bus.js'

兄贵1

<template>
	<div class="">
		我是兄贵1 <button type="default" @click="giveMsgToBrother">点击我给兄贵2传值</button>
	</div>
</template>

<script>
	import bus from '../assets/js/bus.js'
	export default {
		name: 'test1',
		data() {
			return {
			}
		},
		methods: {
			giveMsgToBrother() {
				console.log('给兄贵2传值');
				bus.$emit('msg', 10);
			}
		}
	}
</script>

兄贵2

<template>
	<div>
		我是兄贵2,后面时兄贵1给我的小宝贝{{money}}
	</div>
</template>

<script>
	import bus from '../assets/js/bus.js'
	export default {
		name: 'test2',
		created() {
			this.getMsg();
		},
		data() {
			return {
				money: 0
			}
		},
		methods: {
			getMsg() {
				bus.$on('msg', (money) => {
					this.money = money;
				})
			}
		}
	}
</script>

效果如下

2. angular

1、建立一个通用service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BusService {

  public message$= new BehaviorSubject<any>('');

  constructor() { }

  changeMsg(message: any): void {
    this.message$.next(message);
  }
}

2、兄贵1(发送事件)

constructor(private _busService: BusService) { }
public giveMsgToBrother(): void {
   this._busService.changeMsg(10);
 }

3、兄贵2(接收事件)

constructor(private _busService: BusService) { }
ngOnInit() {
  this._busService.message$
    .subscribe((money) => {
      this.money = money;
    });
}

3. 微信小程序

小程序好像没有类似功能
实现方法两个子组件通过父亲进行中转传值
比如 test1 --> father -->test2 如果有什么其他方法可以推荐下

七、接口调用

先提供get请求，后面提供post请求，看看能不能加上proxy代理

1. vue

// 本来这边想写proxy代理的

// 1. 安装axios
npm i axios
// 2. 在main.js下加入下面两行代码
import axios from 'axios'
Vue.prototype.$axios = axios

// 3.使用
const url = 'https://unidemo.dcloud.net.cn/api/news';
this.$axios.get(url)
.then((res) => {
	console.log(res);
})

2. angular

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
constructor(private _http: HttpClient) { }

const url = 'https://unidemo.dcloud.net.cn/api/news';
this._http.get(url)
 .subscribe((res) => {
   console.log(res);
 });

3. 微信小程序

 wx.request({
   url: 'https://unidemo.dcloud.net.cn/api/news',
   success(res) {
     console.log(res.data);
   }
 })