# 小程序面试题 by 爽爽学编程

本文作者:爽爽学编程 (opens new window)

本站地址:https://code-wss.com (opens new window)

# uniapp跨端原理

  • 编译到原生代码:

UniApp 在开发阶段使用 Vue.js 的语法进行开发,但在构建阶段会将代码编译成对应平台的原生代码。对于小程序平台,编译成对应的 WXML、WXSS、JS 等文件;对于 App 平台,则编译成对应的原生代码。

  • 平台适配:

UniApp 提供了一套跨平台的 API 和组件库,开发者可以在代码中使用这些 API 和组件来实现跨平台的逻辑和界面。UniApp 在编译时会根据目标平台的特点和限制来进行适配,确保生成的代码能够在不同平台上正确运行。

  • 代码转换:

UniApp 使用了一些技术手段来处理平台之间的差异,比如使用条件编译、代码转换工具等来解决不同平台的兼容性问题。

  • 运行时桥接:

对于一些平台特有的功能或 API,UniApp 提供了运行时桥接的机制来实现跨平台调用。比如,在 App 平台中,UniApp 会提供一个与原生代码通信的桥接层,通过这个桥接层可以调用原生平台的 API。

  • 打包:

UniApp 提供了一套完整的打包工具链,可以将开发完成的代码打包成对应平台的应用包。开发者可以使用 UniApp 提供的命令行工具或者集成开发环境来进行打包操作。

综上所述,UniApp 实现跨端的原理是通过编译、适配、代码转换、桥接等技术手段来实现的。这样的设计能够让开发者在使用相同的代码和开发方式的情况下,同时支持多个平台,提高开发效率和降低维护成本。

# 微信小程序有几个文件

  • WXSS (WeiXin Style Sheets) 是⼀套样式语言,用于描述 WXML 的组件样式, js逻辑处理, 网络请求 json 小程序设置, 如页面注册, 页面标题及 tabBar 。

  • app.json 必须要有这个文件, 如果没有这个文件,项目无法运行, 因为微信框架把这个作为配置文件⼊⼝ ,整个小程序的全局配置 。包括页面注册, 网络设置, 以及小程序的window 背景色, 配置导航条样式, 配置默认标题。

  • app.js 必须要有这个文件,没有也是会报错!但是这个文件创建⼀下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数 、声明全局变量。

  • app.wxss 配置全局 css

# 微信小程序怎样跟事件传值

给 HTML 元素添加 data-* 属性来传递我们需要的值,然后通过e.currentTarget.dataset 或 onload 的 param 参数获取 。但 data - 名称不能有大写字母和不可以存放对象

# 小程序的 wxss 和 css 有哪些不⼀样的地方?

  • wxss 的图片引⼊需使用外链地址
  • css没有 Body ;样式可直接使用 import 导⼊

# 微信小程序与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 中声明的变量

爽爽学编程   |