小程序

介绍目前常见前端面试题,小程序 基础原理题

微信小程序

微信小程序有几个文件

  • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式, js 逻辑处理,网络请求json小程序设置,如页面注册,页面标题及 tabBar
  • app.json 必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window 背景色,配置导航条样式,配置默认标题。
  • app.js 必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
  • app.wxss 配置全局 css

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

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

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

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

小程序关联微信公众号如何确定用户的唯一性

使用 wx.getUserInfo 方法 withCredentialstrue 时 可获取 encryptedData,里面有 union_id。后端需要进行对称解密

微信小程序与vue区别

  • 生命周期不一样,微信小程序生命周期比较简单
  • 数据绑定也不同,微信小程序数据绑定需要使用{{}}vue 直接:就可以
  • 显示与隐藏元素,vue中,使用 v-ifv-show 控制元素的显示和隐藏,小程序中,使用wx-ifhidden 控制元素的显示和隐藏
  • 事件处理不同,小程序中,全用 bindtap(bind+event),或者 catchtap(catch+event) 绑定事件,vue:使用 v-on:event 绑定事件,或者使用@event 绑定事件
  • 数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是 vue非常 nice 的一点。微信小程序必须获取到表单元素,改变的值,然后再把值赋给一个 data中声明的变量。

小程序 onload 和 onready 的区别

  • onload:页面加载的时候触发,一个页面只会调用一次,并且可以在onload中获取到当前页面路径中的参数
  • onshow:页面显示、切入前台时触发
  • onready:页面初次渲染完成时触发,代表页面已经准备号了,可以和视图层进行交互了

顺序:onload、onshow、onready

原生 js 的顺序刚好相反:document.ready —> window.onload

  • document.ready 是jquery中定义的方法:表示文档结构加载完成(不包含图片等非文章媒介文件),如果定义了多个document.ready的话就会按顺序的执行
  • window.onload : 包含图片在内的所有元素都加载完成了,但是onload不管定义多少个,都只执行一次(最后一个)