1、请谈谈wxml与标准的html的异同?
wxml 是微信小程序的一种页面渲染语言,类似于 HTML,但也有一些不同之处。
以下是 wxml 与标准的 HTML 的异同:
相同点:
- 两者都是页面渲染语言,用于描述网页的结构和内容。
- 两者都使用标签来组织内容。
- 两者都支持使用 CSS 样式表来控制页面的外观和布局。
- 两者都支持事件处理,可以通过绑定事件来响应用户的操作。
不同点:
- 标签不同:wxml 中的标签更多地与微信小程序的 API 相关,比如
<view>
、<text>
、<image>
等,而标准的 HTML 则更多地包含一些常见的元素,比如<div>
、<span>
、<a>
等。 - 属性不同:wxml 的标签属性与 HTML 的标签属性也有一些不同,比如 wxml 中的 wx:if、wx:for 等属性是专门为微信小程序开发设计的,而 HTML 中则没有这些属性。
- 样式不同:wxml 中的样式是使用 wxss(微信小程序样式表) 来定义的,而 HTML 中则是使用标准的 CSS 样式表来定义的。
- 盒子模型不同:wxml 中的盒子模型与标准的 HTML 盒子模型也略有不同,主要体现在盒子的宽度和高度的计算方式上。
总的来说,wxml 和 HTML 相似,但也有自己的特点和差异,需要根据具体的开发需求来选择使用哪种语言。
2、请谈谈WXSS和CSS的异同?
WXSS(WeChat Style Sheet)是微信小程序的样式表语言,它与标准的 CSS(Cascading Style Sheets)有以下异同:
相同点:
- 两者都用于定义页面元素的样式,包括颜色、字体、布局、边框等方面。
- 两者都支持选择器、属性、值等基本语法。
- 两者都支持继承、层叠等特性。
不同点:
- 单位不同:CSS 使用像素(px)、百分比(%)等单位来表示长度或大小,而 WXSS 使用 rpx(微信小程序专用的长度单位),rpx 会根据屏幕宽度进行自适应调整,适应不同设备的屏幕尺寸。
- 可用属性不同:WXSS 与 CSS 支持的属性并不完全一致,例如 WXSS 中有专门针对微信小程序的一些属性,如
text-decoration-line
(下划线)、-webkit-line-clamp
(文本行数)等。 - 属性值不同:WXSS 与 CSS 中某些属性的取值方式有所不同,例如 WXSS 中的
color
属性可以使用全局变量$color
来表示颜色,而 CSS 中没有这样的机制。 - 选择器不同:WXSS 中的选择器与 CSS 中的选择器有所不同,例如 WXSS 中的
::after
伪元素不支持,但是支持一些特定的微信小程序的选择器,如page
、view
等。
总的来说,WXSS 与 CSS 在使用上有一些不同,但是基本的语法和概念都是相似的。如果你已经熟悉了 CSS,那么上手 WXSS 也应该相对容易。
3、请谈谈微信小程序主要目录和文件的作用?
微信小程序的主要目录和文件包括:
- app.json:微信小程序的全局配置文件,包括小程序的名称、页面路径、窗口配置等信息。
- app.js:微信小程序的入口文件,用于定义小程序的生命周期函数、全局变量、全局方法等。
- app.wxss:微信小程序的全局样式表,用于定义小程序的全局样式。
- pages/:微信小程序的页面目录,用于存放小程序的页面文件。
- utils/:微信小程序的工具目录,用于存放小程序的工具函数、公共样式等。
各文件的主要作用如下:
- app.json:定义小程序的全局配置信息,例如小程序的窗口配置、导航栏设置、页面路径等。
- app.js:定义小程序的全局逻辑,例如生命周期函数、全局变量、全局方法等。
- app.wxss:定义小程序的全局样式,例如字体、颜色、布局等。
- pages/:存放小程序的页面文件,每个页面通常由一个 wxml 模板文件、一个对应的 js 逻辑文件、一个 wxss 样式文件和一个 JSON 配置文件组成。
- utils/:存放小程序的工具函数、公共样式等,方便在多个页面中重复使用。
以上是微信小程序主要目录和文件的作用,了解这些可以更好地理解和使用微信小程序。
4、请谈谈小程序的双向绑定和vue的异同?
小程序的双向绑定和 Vue 的双向绑定有以下异同:
相同点:
- 都是实现数据的双向绑定,即数据的改变可以自动更新到视图,视图的改变也可以自动更新到数据。
- 都是通过数据劫持的方式实现的,即通过监听数据的变化来更新视图。
不同点:
- 实现方式不同:小程序的双向绑定是基于数据绑定和事件绑定实现的,而 Vue 的双向绑定则是基于数据劫持和发布/订阅模式实现的。
- 语法不同:小程序的双向绑定使用的是类似于 AngularJS 的
ng-model
的语法,即value="{{data}}" bindinput="setData"
,而 Vue 的双向绑定使用的是v-model
语法,即v-model="data"
。 - 性能不同:Vue 的双向绑定通过数据劫持实现,可以精确地追踪数据的变化并更新视图,而小程序的双向绑定则需要通过事件绑定和数据绑定实现,相对来说效率会稍低一些。
- 依赖不同:Vue 的双向绑定依赖于 Vue.js 框架,而小程序的双向绑定是微信小程序原生支持的功能,不需要额外的框架支持。
综上所述,虽然小程序和 Vue 都支持双向绑定,但是实现方式和语法有所不同,并且在性能和依赖方面也存在一定的差异。如果你熟悉 Vue 的双向绑定,那么上手小程序的双向绑定也应该相对容易。
5、简单描述下微信小程序的相关文件类型?
微信小程序的相关文件类型包括以下几种:
- WXML:微信小程序的模板文件,类似于 HTML 文件,用于定义小程序的页面结构和内容。
- WXSS:微信小程序的样式文件,类似于 CSS 文件,用于定义小程序的页面样式和布局。
- JSON:微信小程序的配置文件,用于定义小程序的全局配置信息、页面路径等。
- JS:微信小程序的脚本文件,用于编写小程序的逻辑代码,包括页面逻辑、组件逻辑、网络请求等。
- WXS:微信小程序的脚本文件,类似于 JS 文件,但是在编写时需要注意一些特殊的语法和限制,可以用于编写一些复杂的逻辑。
- 图片、音频、视频等媒体文件:用于在小程序中展示图片、播放音频和视频等多媒体内容。
以上是微信小程序的主要文件类型,了解这些文件类型可以更好地理解和开发微信小程序。
6、微信小程序有哪些传值(传递数据)方法?
微信小程序有以下几种传值(传递数据)的方法:
-
URL 参数传递:可以在页面路径后面添加参数进行传值,例如:
/pages/index/index?id=1&name=abc
,在目标页面的 onLoad 生命周期中可以通过options
参数获取传递的值。 -
Storage 存储:可以使用
wx.setStorageSync
或wx.setStorage
方法将数据存储到本地缓存中,在目标页面中使用wx.getStorageSync
或wx.getStorage
方法获取数据。 -
全局数据传递:可以将数据存储在 App 实例中的
globalData
属性中,在目标页面中使用getApp().globalData
获取数据。 -
事件传递:可以通过触发事件来传递数据,例如在子组件中触发一个自定义事件,并通过事件对象传递数据,在父组件中监听该事件并获取传递的数据。
-
页面栈传递:可以使用小程序提供的页面栈来传递数据,通过
getCurrentPages
方法获取页面栈的实例,使用data
属性存储数据,在目标页面中使用options
获取数据。
需要根据实际业务需求选择合适的传值方式,上述方法中,URL 参数传递、Storage 存储、全局数据传递等方式适用于不同页面之间的数据传递,而事件传递和页面栈传递则适用于组件之间和同一页面的数据传递。
7、bindtap和catchtap的区别?
在微信小程序中,bindtap
和 catchtap
都是用来绑定点击事件的属性,它们的主要区别在于事件冒泡和阻止冒泡的处理方式。
bindtap
属性用于绑定一个点击事件处理函数,当点击事件发生时,该处理函数会被触发执行。如果在事件处理函数中调用 event.stopPropagation()
方法来阻止事件冒泡,则该事件不会向父级元素传递。
catchtap
属性也用于绑定一个点击事件处理函数,但与 bindtap
不同的是,当点击事件发生时,该处理函数先于父级元素的事件处理函数执行,如果在事件处理函数中调用 event.stopPropagation()
方法来阻止事件冒泡,则该事件不会向父级元素传递。
因此,bindtap
和 catchtap
的主要区别在于事件冒泡和阻止冒泡的处理方式,如果希望点击事件能够向上冒泡并被父级元素捕获处理,则应该使用 bindtap
,如果希望阻止点击事件冒泡,则应该使用 catchtap
。
8、简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?
在微信小程序中,以下五种页面跳转方式常用于不同的业务场景:
-
wx.navigateTo()
:保留当前页面,跳转到应用内的某个页面,新页面可以通过wx.navigateBack()
方法返回到原页面。这种方式适用于需要在新页面中进行操作并返回原页面的情况,如填写表单、查看详情等。 -
wx.redirectTo()
:关闭当前页面,跳转到应用内的某个页面,新页面不能通过wx.navigateBack()
方法返回到原页面,而是重新打开一个页面栈。这种方式适用于不需要返回原页面,而是需要直接进入目标页面的情况,如登录页、欢迎页等。 -
wx.switchTab()
:跳转到应用内的某个 TabBar 页面,并关闭其他所有非 TabBar 页面。这种方式适用于 TabBar 导航场景,如底部导航、顶部标签等。 -
wx.navigateBack()
:关闭当前页面,返回上一个页面。如果当前页面是通过wx.navigateTo()
或wx.redirectTo()
打开的,则返回到打开该页面的原页面,如果当前页面是 TabBar 页面,则返回到上一个 TabBar 页面。这种方式适用于返回上一个页面的情况。 -
wx.reLaunch()
:关闭所有页面,跳转到应用内的某个页面。这种方式相当于关闭所有页面,重新打开一个页面栈。这种方式适用于需要完全重启应用并打开某个页面的情况,如退出登录后重新登录。
以上是五种常用的页面跳转方式,在实际开发中需要根据业务场景选择合适的方式。
9、微信小程序与H5的区别?
微信小程序和H5是两种不同的技术方案,它们之间有以下几点区别:
-
开发语言和框架:微信小程序使用的是基于JavaScript的WXML和WXSS语言,使用微信开发者工具进行开发和调试。而H5使用的是HTML、CSS和JavaScript等技术,并使用网页浏览器进行开发和调试。
-
执行环境和性能:微信小程序的执行环境是微信客户端,可以获得更好的性能表现和用户体验,因为它可以直接使用微信客户端提供的能力,如地理位置、支付等。而H5则需要在浏览器中运行,受限于浏览器的性能和能力。
-
可访问性:微信小程序只能在微信客户端中访问,需要用户下载并安装微信客户端,而H5则可以通过任何支持浏览器的设备访问,包括电脑、手机、平板等。
-
可扩展性:微信小程序相对于H5来说,其功能和扩展性受到限制。小程序必须符合微信小程序的规范和限制,并且必须经过微信审核才能发布。而H5则更加灵活,可以随意扩展和定制,没有限制。
总的来说,微信小程序是一种轻量级应用,其主要优势在于用户体验和性能方面,适用于需要更加稳定和高效的应用场景。而H5则更加灵活和可扩展,适用于需要自由发挥的应用场景。
10、小程序和Vue写法的区别?
小程序和Vue在开发模式、语法、组件化等方面有一定的区别,具体如下:
-
开发模式:小程序需要使用微信开发者工具进行开发和调试,而Vue可以在浏览器中使用webpack等工具进行开发和调试。
-
语法:小程序使用WXML和WXSS语言,而Vue使用HTML、CSS和JavaScript等技术。小程序的WXML和WXSS语言是为了方便小程序的开发而设计的,它们与HTML、CSS等语言有一些区别,比如标签和属性的命名、样式的定义方式等。
-
组件化:小程序和Vue都支持组件化的开发方式,但两者的组件化方式有所不同。小程序的组件化主要是通过Component方法进行定义和注册,而Vue则是通过Vue.component方法进行定义和注册。在使用组件时,小程序需要使用组件的名称进行调用,而Vue则是通过组件的标签名称进行调用。
-
状态管理:在状态管理方面,小程序使用的是原生的数据绑定方式,即通过setData方法进行数据的修改和更新。而Vue使用的是Vue.js提供的响应式数据绑定和Vuex状态管理机制。
总的来说,小程序和Vue在开发模式、语法、组件化等方面有一定的区别,开发者需要根据不同的需求选择合适的技术方案。