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

这篇具有很好参考价值的文章主要介绍了横向比较微信小程序和vue的语法与结构差异,让你快速理解用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:

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

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

一、小程序目录结构介绍

(1)先看看初始目录

小程序原生和vue语法,微信小程序,vue.js,前端

  • 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接收

<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序如何让多个按钮横向排列

    WXML界面添加如下代码: WXSS界面添加如下代码: 使用了Felx布局,要调整按键位置主要操控margin、width这几个属性 调整效果如下:  

    2024年02月05日
    浏览(47)
  • 微信小程序 echarts 画多个横向柱状图

    然后是json  ec-canvas获取方式 在链接里下载代码 然后copy ec-canvas文件夹到自己的项目 https://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_acceleratorfrom_codechina=yes https://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_acceleratorfrom_codechina=yes

    2024年02月12日
    浏览(51)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(174)
  • 原生微信小程序 动态(横向,纵向)公告(广告)栏

    先看一下动态效果 Y轴滚动公告的原理是 swiper 组件在页面中的Y轴滚动,属性 vertical ,其余属性也设置一下 autoplay circular interval=\\\"3000\\\" X轴滚动的原理是,利用动画效果,将内容从右往左过渡过去 wxml: wxss: less:   js:

    2024年02月10日
    浏览(56)
  • 微信小程序--开发横向滚动条scroll-view

    一、话不多说,上代码 .wxml文件写法 css样式 js写法 二、解析  scroll-x=\\\"true\\\":表明是横向滚动 class=\\\"{{currentTab==index?\\\'scroll_item\\\':\\\'\\\'}}\\\":当点击时才会变色,其中currentTab的初始值是0,通过点击事件更改值

    2024年02月12日
    浏览(61)
  • 微信小程序原生实现无边框table组件支持横向和纵向滚动

    效果图(支持单元格样式自定义) table组件代码 wxml文件 wxss文件 js文件 组件使用 1、在page页面的json文件中引入组件(默认大家都会引入); 2、在page页面的wxml文件中使用组件 3、在page页面的js文件中设置数据 4、在page页面的wxss文件中修改样式

    2024年02月07日
    浏览(67)
  • uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题

    1.1 template 1.2 style(scss) 1.3 问题截图 2.1 解决办法 在 u-scroll-list 内部只放一个盒子,盒子内部包裹横向滚动列表项,并且盒子设置 display:flex; 2.2 template 2.3 style(scss) 2.4 解决截图

    2024年02月11日
    浏览(52)
  • 微信小程序 居中、居右、居底和横向、纵向布局,文字在图片中间,网格布局

    微信小程序居中、居右、横纵布局 1、水平垂直居中(相对父类控件) 方式一:水平垂直居中 父类控件:   //注意:这里的 height 写 100%会使得垂直居中可能会不生效 可能会有兼容问题 方式二:水平垂直居中(方式二推荐) 父类控件:position: relative; 子类控件: 方式三:水

    2024年02月14日
    浏览(60)
  • 微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

    今天第一次接触 vant 组件库。 ant官网地址 适用于Vue3 支持 Vue2 、 Vue3 、 微信小程序等 我在使用van-tabs组件时遇到了一个问题,如下图所示: 从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都没有测出来,在微信开发者工具、IOS系统都没有

    2024年02月10日
    浏览(47)
  • 微信小程序案例3-1 比较数字

    单击比较按钮,显示比较结果 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 创建微信小程序 - 比较数字 ,不采用模板 单击【确定】按钮 清空页面结构 初始化页面样式 配置窗口表现 在 pages/index/index.wxml 文件里实现页面结构 查看预览效果 为了页面好看,编写页面

    2024年03月27日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包