横向比较微信小程序和vue的语法与结构差异，让你快速理解用法

背景：

不少前端开发估计长期使用vue框架进行前端开发，但不可避免会有特殊情况需要人手去接坑其它项目，而刚好那个项目是原生微信小程序项目怎么办？？？其实很简单，一对一对地与vue进行横向对比就行，通过这样的方式最多一个上午就能直接上去写页面了，本文主打一个简洁毕竟写的长编大论的看的都累，所以下面将说明：

1. 并且对小程序的目录结构进行简洁说明。
2. 对vue和小程序语法进行横向对比。
3. vue与小程序标签的差异。
4. 父子传递

一、小程序目录结构介绍

（1）先看看初始目录

• pages 用来存放所有小程序的页面
• utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
• app.js 小程序项目的入口文件
• app.json 小程序项目的全局配置文件
• app.wxss 小程序项目的全局样式文件
• project.config.json` 项目的配置文件
• sitemap.json 用来配置小程序及其页面是否允许被微信索引

（2）单个页面结构介绍

在pages里面每个文件夹就是一个页面，里面你会留着到有四个文件，后缀分别是.js、 .json 、.wxml 、.wxss

• .wxml ：微信小程序的模板语言，类似于 HTML，用于描述页面结构。
• .wxss：微信小程序的样式语言，类似于 CSS，用于描述页面样式。
• .js：微信小程序的脚本语言，用于实现页面的逻辑和交互。
• .json：微信小程序的配置文件，用于配置小程序的全局配置、页面配置等信息。

（3）单个页面常用的生命周期说明

• 1.onLoad：页面加载时执行，只执行一次；
• 2.onShow：页面展示时执行，执行多次；
• 3.onReady：页面初次渲染时执行，只执行一次；
• 4.onHide：页面从前台进入后台时执行；
• 5.onUnload：页面卸载时执行；

顺序：onLoad –> onShow –> onReady –> onHide

二、横向对比vue语法

（1）事件定义与传参区别

vue用@来绑定事件，传参数能直接放括号里面:

click="du(index)">登陆

微信小程序用bindtap绑定，且微信小程序传值需要用data-自定义名字={{需要传递的值}}, 传过去之后在事件中用e就能在里面找到需要的参数

bindtap="dl" data-index="{{index}}">登陆

（2） if语句区别

vue的if语句：if语句前加 “v-”

<div v-if="index == 1">1<div> 

<div v-else-if="index == 2">2<div> 

<div v-else>3<div>

微信小程序if语句前加 “wx:”，而且判断内容需要用 {{双大括号}} 包起来，第二行的else-if，直接省略成elif

<view wx:if="{{index == 1}}">1<view> 

<view wx:elif="{{index == 2}}">2<view> 

<view wx:else>3<view>

（3） 数据绑定

vue的变量绑定：使用v-bind即简写:

src="src" />

微信小程序中只需要属性值加“{{}}”包起来就行

 src="{{src}}" />

（4） for列表渲染

vue的for语法=(每一项数据名，索引名) in 数据名

for="(item,i) in list" :key="i"> 
    
{{item.text}}</div> 
 >

微信小程序的for里只写数据名， 如果需要修改当前元素的数据名：wx:data-item=“自定义的数据名” 如果需要修改当前元素的索引名：wx:data-index=“自定义的索引名” 默认数据名是item，默认索引名是index

<block wx:for="{{list}}" wx:data-item="item" wx:data-index="idx" wx:key="idx"> 
    <div>{{item.text}}div> 

三、标签的变化

以前是html标签，现在是小程序标签。

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• input 还在，但type属性改成了confirmtype
• form、button、checkbox、radio、label、textarea、canvas、video这些还在。
• select 改成 picker
• iframe 改成 web-view
• ul、li没有了，都用view替代
• audio 不再推荐使用，改成api方式，背景音频api文档,其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

除了改动外，新增了一批手机端常用的新组件例如

• scroll-view 可区域滚动视图容器
• swiper 可滑动区域视图容器
• icon 图标
• rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
• progress 进度条
• slider 滑块指示器
• switch 开关选择器
• camera 相机
• live-player 直播
• map 地图

四、微信小程序父子传递

（1）组件使用方式

小程序: 与vue使用有些不同

1.在子组件的json文件中声明自己是组件

 { 
     "component": true 
 }

2.在父组件中引用也是在json文件中引用

{ 
    "usingComponents": { 
        "nav-bar": "/commpents/navbar/navbar"
    } 
}

3.在父组件使用子组件

 current-index='{{index}}'>

（2）组件通讯

父组件向子组件传递数据：

与vue非常像绑定后在子组件用properties接收即可，而vue2是用props接收

current-index='{{index}}'>

Page({
	data:{
		index: 1
	}
})



Component({
	properties:{ // 与vue一样，只是vue的属性值时prop
		currentIndex: {
			type: number,
			value: 1
		}
	}
})

子组件向父组件传递(与vue一样也是提交事件)

-- 子组件
"onTap">点击这个按钮将触发“myevent”事件



Component({
	methods:{
		onTap: function(){
     		var myEventDetail = {} 
      		var myEventOption = {} 
      		
      		this.triggerEvent('myevent', myEventDetail, myEventOption)
	 	}
	}
})

-- 父组件
bind:myevent="onMyEvent" />


onMyEvent: function(e){
 	e.detail 
}

小结

主要把核心的写了出来便于快速上手，如果哪里写的不对或者有更好建议欢迎大佬指出啊