小程序初始面试题(day06)

简介: 小程序初始面试题(day06)

前言

请谈谈WXML与标准的html的异同?

WXML是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中HTML。

  • 都是用来描述页面的结构;
  • 都由标签、属性等构成;
  • 标签名字不一样,且小程序标签更少,单一标签更多;
  • 小程序多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
  • WXML仅能在微信小程序开发者工具中预览,而HTML可以在浏览器内预览
  • 组件封装不同, WXML对组件进行了重新封装,
  • 小程序运行在JS Core内,没有DOM树和window对象,小程序中无法使用window对象和document对象

请谈谈WXSS和CSS的异同?

首先新增了 rpx尺寸单位
CSS中需要手动进行像素单位换算,例如rem
WXSS支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效
WXSS仅支持部分CSS选择器
    .类选择器和id选择器
    元素选择器
    并集选择器、后代选择器
    ::after和::before等伪类选择

请谈谈微信小程序主要目录和文件的作用?

project.config.json: 项目配置文件,用得最多的就是配置是否开启https校验;

App.js :设置一些全局的基础数据等,页面的脚本文件,存放页面的数据、事件处理函数等;

App.json :当前页面的配置文件,配置窗口的外观 、表现等,页面中的配置项会覆盖 app.json的;

App.wxss :公共样式,引入iconfont等;

pages: 里面包含一个个具体的页面;

index.json: (配置当前页面标题和引入组件等);

index.wxml:页面的模板结构文件;

.wxss文件:当前页面的样式表文件;

index.js :(页面的逻辑,请求和数据处理等);

请谈谈小程序的双向绑定和vue的异同?

  • 小程序中的数据双向绑定
    首先通过 bindinput 绑定文本框的输入事件
    在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值
    在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值
    通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定
  • vue中的数据双向绑定
    首先为文本框绑定 @input 监听文本框的输入事件
    为文本框动态绑定 value 属性,其值是在data中定义的变量
    在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值
    将其重新获取到的 value 赋值给 value值动态绑定的那个变量
    区别:
    大体上区别不大,绑定事件不同,以及获取value值的具体方式不同,以及在小程序中设置data中的数据,
    需要调用 this.setData方法进行设置。

简单描述下微信小程序的相关文件类型?

1.WXML(weixin Markup Language) 是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构。内容主要事微信自己定义的一套组件。

2.WXSS(WeiXin Style Sheets) 是一套样式语言,主要用于描述 WXML 的组件样式。

3.JS 逻辑处理,网络请求

4.json 小程序设置,静态配置

主要文件

app.json 必须要有这个文件,此文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置tabBar 最少两个。

4个配置项的作用

pages:用来记录当前小程序所有页面的路径

window :全局定义小程序所有页面 的背景色、文件颜色等

style:全局定义小程序组件所使用的样式版本

sitemapLocation:用来指明sitemap.json的位置

微信小程序有哪些传值(传递数据)方法?

  • 使用全局变量传递数据
利用app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过getApp().globalData
 获取数据
 例如:  App({
  globalData:{
     data: { name: 'demo' }
  }
 })
 使用组件  app.globalData.data
  • 使用本地存储数据传递
使用小程序提供缓存:
 同步缓存:wx.setStorageSync 与 wx.getStorageSync 
 异步缓存:wx.setStorage 与 wx.getStorage
 移除本地缓存:wx.removeStorageSync(同步)、wx.removeStorage(异步)
 // 将数据存储在本地缓存中指定的 key 中
 例如:wx.setStorgaeSync('data','hello')
  // 从本地缓存中同步获取指定 key 的内容
  wx.getStorageSync('data')
  // 从本地缓存中移除指定 key
  wx.removeStorgae('data')
  • 使用路由传递数据
详细解释:
 如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:
 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;
 wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
 这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。
 传递组件
  wx.navigateTo({
   url: 'test?id=1',
   success: (res)=> {
     // 通过 eventChannel 向被打开页面传送数据
     res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
   }
 })

bindtap和catchtap的区别?

概念: bindtap和catchtap都属于点击事件函数,将事件绑定到组件上,点击组件后可以触发函数。

  • bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件)
  • catchtap :不会冒泡到父元素上,阻止事件冒泡
    二者区别:
bindtap : 向上冒泡
 catchtap:向上不冒泡

wxml:

<view>
    <button bindtap="tagName">点击事件</button>
  </view>

.js 页面写入

tagName: function(e){
    console.log(e);
}

wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?

常见的微信小程序页面跳转方式有如下:

  • wx.navigateTo(Object)
对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,
 以提高加载速度。
 当页面特别多时,则不推荐使用
  • wx.redirectTo(Object)
wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。可以避免跳转前页面占据
 运行内存,
 但返回时页面需要重新加载,增加了返回页面的显示时间
  • wx.switchTab(Object)
跳转到 tabBar页面,并关闭其他所有非 tabBar 页面
  • wx.navigateBack(Object)
wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面,开发者可
 通过 getCurrentPages() 获取当前的
 页面栈,决定需要返回几层则设置对象的delta属性即可
  • wx.reLaunch(Object)
关闭所有页面,打开到应用内的某个页面,返回的时候跳到首页

总结

关于上述五种跳转方式,做下总结:

navigateTo 保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页

redirectTo 关闭当前页面,跳转到应用内的某个页面

switchTab 跳转到 tabBar 页面,同时关闭其他非 tabBar 页面

navigateBack 返回上一页面

reLanch 关闭所有页面,打开到应用内的某个页面

其中关于它们的页面栈的关系如下:

avigateTo 新页面入栈

redirectTo 当前页面出栈,新页面入栈

navigateBack 页面不断出栈,直到目标返回页,新页面入栈

switchTab 页面全部出栈,只留下新的 Tab 页面

reLanch 页面全部出栈,只留下新的页面

微信小程序与H5的区别?

从开发的角度

H5和小程序的开发工具就非常不同,小程序都是依赖于微信客户端的,所以相对来说开发工具没有H5那么多;
与标准的H5语言是不一样的;而且还独立了很多的原生app的组件,所以它在组件封装上与H5也都是有所不同

从运行环境来看

网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,在移动端需要
面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端,以及用于辅助开发的小程序开发者
工具,小程序中三大运行环境也是有所区别的。

服务器配置:

因为小程序的性能会比H5 高一些,所以服务器的配置要求上来说,小程序的要求要比H5更高一些

系统权限

因为微信能获取到更多的系统权限,如网络通信状态、数据缓存能力等,这些系统级权限都能与微信小程序无缝衔接,
这也就是官方宣称的微信小程序能够拥有Native App(原生APP)的流畅性能。
而H5 web应用对系统本身的权限的获取则相对少了很多,这一点恰巧是H5 web应用经常被诟病的地方。也因此,
H5的大多数应用被圈定在业务逻辑简单、功能单一的范围上。

标签名字有点不一样

写 HTML 的时候,经常会用到的标签是 div, p, span,
小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力。小程序多了
一些 wx:if 这样的属性以及 {{ }} 这样的表达式
在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化
响应用户的行为。

操作方面来说:

网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。

小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而

缺少相关的DOM API和BOM API。

这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。

同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的

小程序和Vue写法的区别?

事件定义区别

vue事件绑定:vue用@来绑定事件
    <button @click="dl">登陆</button>
    <input type="text" @input="input"/>
微信小程序绑定:微信小程序原声写法前面加bind后面加事件名
    <button bindtap="dl">登陆</button>
    <input type="text" bindinput="input"/>

事件函数传值

vue事件函数传值:vue传值直接写在函数括号中
    <button @click="dl(index)">登陆</button>
微信小程序事件函数传值:微信小程序传值需要用data-自定义名字={{需要传递的值}}
  <button bindtap="dl" data-index="{{index}}">登陆</button>

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语句:微信小程序if语句前加 “wx:”,而且判断内容需要用 {{双大括号}} 包起来,第二行的else-if,直接省略成elif
  <view wx:if="{{index == 1}}">1<view>
  <view wx:elif="{{index == 2}}">2<view>
  <view wx:else>3<view>

关键字引用

vue的关键字引用:vue中属性名前面加 “:” 或者 v-bind
  <img :src="src" />
微信小程序关键字引用:微信小程序中只需要属性值加“{{}}”包起来就行
  <image src="{{src}}" />

for列表渲染

vue的for列表渲染:vue的for语法=(每一项数据名,索引名) in 数据名
  <block v-for="(item,i) in list" :key="i">
    <div>{{item.text}}</div>
  </block >
微信小程序的for列表渲染:
    微信小程序的for里只写数据名, 如果需要修改当前元素的数据名:wx:data-item=“自定义的数据名” 
    如果需要修改当前元素的索引名:wx:data-index=“自定义的索引名” 默认数据名是item,默认索引名是index

rpx的理解?

简介:

rpx ( responsive pixel)响应单位。

  • rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
  • 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx
  • 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配

rpx 和 px之间的换算

在普通网页开发中,最常用的像素单位是px

在小程序开发中,推荐使用rpx这种响应式的像素单位进行开

1 rpx = 0.5 px = 1 物理像素

微信小程序可以进行dom操作吗?

微信小程序不支持document.querySelect获取元素,因为微信小程序的渲染层和逻辑层是独立的,但是它内置了获取元素的两种方法,第一种是通过

wx.createSelectorQuery()获取dom元素,第二种时给想要使用的对象绑定事件,输出e对象,就能拿到该对象的一些信息。

.创建选择器

var query = wx.createSelectorQuery();

2.查询

集合:query.selectAll('.traffic').boundingClientRect(()=>{}).exec()
   单个: query.select('.tripinfotitlelist').boundingClientRect(()=>{}).exec()

二、获取dom节点场景

1.与数据渲染无关(dom节点挂载结束即可获取,根据页面生命周期选择合适的时间获取)

2.与数据相关(数据渲染结束获取即可)

this.setData({},{
      setTimeout(()=>{
              //获取即可
      },300)
    })

微信小程序与vue区别?

生命周期不一样,微信小程序生命周期比较简单

数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以

显示与隐藏元素,vue中,使用 v-if 和 v-show 控制元素的显示和隐藏,小程序中,使用wx-if 和hidden 控制元素的显示和隐藏

事件处理不同,小程序中,全用 bindtap(bind+event),或者 catchtap(catch+event) 绑定事件,vue:使用 v-on:event 绑定事件,或者使用@event 绑定事件

数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是 vue非常 nice 的一点。微信小程序必须获取到表单元素,改变的值,然后再把值赋给一个 data中声明的变量。


相关文章
|
存储 缓存 小程序
小程序面试题(day07)
小程序面试题(day07)
137 0
|
4月前
|
JSON 小程序 JavaScript
微信小程序面试题来了
微信小程序面试题来了
|
Web App开发 移动开发 缓存
微信小程序面试题汇总
微信小程序面试题汇总
567 0
|
存储 JSON 小程序
微信小程序面试题(day08)
微信小程序面试题(day08)
134 0
|
缓存 小程序 前端开发
微信小程序面试题
微信小程序面试题
179 0
|
小程序 API
|
JSON 移动开发 小程序
小程序的面试题
小程序的面试题
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
208 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
48 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章