微信小程序与uniapp面试题
目录
vue , 微信小程序 , uni-app的页面生命周期函数
1、简单描述下微信小程序的相关文件类型?
WXML是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面结。内部主要是微信自己定义的一套组件。
WXSS是一套样式语言,用于描述WXML的组件样式 js逻辑处理,网络请求 json小程序设置,如页面注册,标题及tarBar。
主要文件
app.json:必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。
app.js:必须要有这个文件,没有也是会报错!但是这个文件创建一下就行,什么都不需要写,以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。 app.wxss:可选
参考:小程序的开发文档
2、简述微信小程序原理?
1)微信小程序采用JavaScript、WXML、WXSS三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口
2)微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现
3)小程序分为两个部分,webview和appService。其中,webview主要用来展现UI,appService用来处理业务逻辑、数据及接口调用。它们在连个进程中运行,通过系统层JSBridge实现通信,实现UI的渲染、事件的处理
3、小程序页面间有哪些传递数据的方法?
1)
使用全局变量
全局变量实际上是定义了一个全局对象,并在每个页面中引入; 在初始化代码的时候,小程序会读取app.js的文件,在这里我们可以定义我们所需要的全局变量; 然后在页面中,可以通过getApp()方法获取到全局应用对象,可以对全局变量进行读取并更改; 由于app.js在项目中是用来做基础配置的,因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里,对于经常需要变动的量不建议使用这个方法。2)
使用本地缓存
本地缓存是微信小程序提供的一个功能,可以将用户产生的数据做本地的持久化,类似于NoSQL,可以读取和修改的操作。 那么在不同的页面之间,如何利用它,进行数据的交互呢? 假设我们在A页面保存了用户信息。 这样做,这个数据就存在了本地。挡在B页面需要使用的时候,可以直接获取到数据池中的数据,并进行增删改查操作 需要注意的是,在回到A页面的时候,小程序需要重新读取数据。这时候,可以选择放在生命周期的onShow中对数据重新加载3)
父级往子级页面的数据传递
我们通常会在页面之间进行跳转、重定向的操作。这时候,我们可以选择将部分数据放在url里面,并在新页面的时候进行初始化
4、小程序的wxss和css又哪些不一样的地方?
WXSS和CSS类似,不过在css的基础上做了一些补充和修改
1)
尺寸单位:rpx
rpx是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iphone6上,屏幕宽度为375rpx,共有750的物理像素,则750rpx=375rpx=750rpx物理像素2)
样式导入
:@import
标签来导入外联样式。@import后跟需要导入的外联样式表的相对路径
,用;
表示语句结束
5、小程序的双向绑定和Vue哪里不一样?
小程序直接this.data的属性是不可以同步到视图中对中,必须调用。
通过绑定事件,--传值--this.setData({// 设置数据})
6、vue , 微信小程序 , uni-app属性的绑定
vue和uni-app动态绑定一个变量的值为元素的某个属性的时候,会在属性前面加上冒号":";
小程序绑定某个变量的值为元素属性时,会用两个大括号{{}}括起来,如果不加括号,为被认为是字符串。
7、vue , 微信小程序 , uni-app的页面生命周期函数
vue:
beforeCreate(创建前) created(创建后)
beforeMount(载入前) mounted(载入后)
beforeUpdate(更新前) updated(更新后)
beforeDestroy(销毁前) destroyed(销毁后)
小程序/uni-app:
1、onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2、onShow:加载完成后、后台切到前台或重新进入页面时触发
3、onReady:页面首次渲染完成时触发
4、onHide:从前台切到后台或进入其他页面触发
5、onUnload:页面卸载时触发
6、onPullDownRefresh:监听用户下拉动作
7、onReachBottom:页面上拉触底事件的处理函数
8、onShareAppMessage:用户点击右上角转发
8、vue、小程序、uni-app中的本地数据存储和接收
vue:
存储:localstorage.setItem(‘key’,‘value’)
接收:localstorage.getItem(‘key’)
微信小程序:
存储:通过wx.setStorage/wx.setStorageSync写数据到缓存
接收:通过wx.getStorage/wx.getStorageSync读取本地缓存,
uni-app:
存储:uni.setStorage({key:“属性名”,data:“值”}) //异步
uni.setStorageSync(KEY,DATA) //同步
接收:uni.getStorage({key:“属性名”,success(res){res.data}}) //异步
uni.getStorageSync(KEY) //同步