背景:
不少前端开发估计长期使用vue框架进行前端开发,但不可避免会有特殊情况需要人手去接坑其它项目,而刚好那个项目是原生微信小程序项目怎么办???其实很简单,一对一对地与vue进行横向对比就行,通过这样的方式最多一个上午就能直接上去写页面了,本文主打一个简洁毕竟写的长编大论的看的都累,所以下面将说明:
- 并且对小程序的目录结构进行简洁说明。
- 对vue和小程序语法进行横向对比。
- vue与小程序标签的差异。
- 父子传递
一、小程序目录结构介绍
(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用@来绑定事件,传参数能直接放括号里面:
ini复制代码<button @click=“du(index)”>登陆
微信小程序用bindtap绑定,且微信小程序传值需要用data-自定义名字={{需要传递的值}}, 传过去之后在事件中用e就能在里面找到需要的参数
ini复制代码登陆
(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即简写:
<img :src="src" />
微信小程序: 中只需要属性值加“{{}}”包起来就行
<image src="{{src}}" />
(4) for列表渲染
vue: 的for语法=(每一项数据名,索引名) in 数据名
<block v-for="(item,i) in list" :key="i">
<div>{{item.text}}</div>
</block >
微信小程序: 的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>
</block >
三、标签的变化
以前是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.在子组件的json文件中声明自己是组件
{
"component": true
}
2.在父组件中引用也是在json文件中引用
{
"usingComponents": {
"nav-bar": "/commpents/navbar/navbar"
}
}
3.在父组件使用子组件
<nav-bar current-index='{{index}}'></nav-bar>
组件通讯具体用法:
(1)父组件向子组件传递数据:
与vue非常像绑定后在子组件用properties接收即可,而vue2是用props接收文章来源:https://www.toymoban.com/news/detail-858245.html
<nav-bar current-index='{{index}}'></nav-bar>
// 父组件
Page({
data:{
index: 1
}
})
// 子组件接收内容
Component({
properties:{ // 与vue一样,只是vue的属性值时prop
currentIndex: {
type: number,
value: 1
}
}
})
(2)子组件向父组件传递(与vue一样也是提交事件)文章来源地址https://www.toymoban.com/news/detail-858245.html
-- 子组件
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
// 子组件
Component({
methods:{
onTap: function(){
var myEventDetail = {} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项(冒泡等)
// vue使用 this.$emit()提交
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
-- 父组件
<component-tag-name bind:myevent="onMyEvent" />
// 父组件
onMyEvent: function(e){
e.detail // 组件触发事件时提供的detail对象
}
到了这里,关于横向比较微信小程序和vue的语法与结构差异,让你快速理解用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!