1、有哪些参数传值的方法?
(1)给wxml元素添加data-*属性来传递我们需要的值,然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象;
(2)设置id的方法标识来传值,通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值;
(3)在navigator中添加参数传值。
2、简述微信小程序的原理?
微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现。
小程序分为两个部分webview和appService。其中webview主要用来展现UI,appService用来处理业务逻辑、数据及接口调用。它们在两个进程中进行,通过系统层JSBridge实现通信,实现UI的渲染、事件的处理。
3、小程序的双向绑定和vue那里不一样?
小程序直接this.data的属性是不可以同步到视图的,必须调用:
this.setData({
hide:true
})4、有哪些生命周期回调函数?
(1)onLoad(Object query)
页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。
(2)onShow()
页面显示/切入前台时触发。
(3)onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
(4)onHide()
页面隐藏/切入后台时触发。如wx.redirectTo或底部tab切换到其他页面,小程序切入后台等。
(5)onUnload()
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
5、wx.navigateTo无法打开页面
一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo
6、本地资源无法通过wxss获取
background-image:可以使用网络图片,或者base64,或者使用<image/>标签
7、getApp()
如果需要全局的数据可以在app.js中设置。
App({// app.js
globalData: 1
})
// 某page.js
console.log(getApp().globalData)8、公共模块util.js
公共模块方法需要通过module.exports对外暴露接口。
使用的时候需要require(path)将文件引入。
function sayHello(name) {//公共方法util类
console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 对外暴露接口//先引入文件,是新建的一个utils包,公共方法在util.js里面
var util = require('../../utils/util.js')
Page({//调用类
onLoad: function () {// 使用时,用util引用名调用,如:util.sayHello()
util.sayHello('我是传的值');
}
})9、事件
(1)bind开头不阻止冒泡,用catch开头可以阻止冒泡,如catchTap;
冒泡:点击子组件会触发父组件,所有父组件,先子后父的触发
(2)无特殊情况自带事件的各个事件对象已经对象属性列表;
(3)dataset,在wxml中可以自定义data数据,会通过事件传递。以data-开头,多个单词以-连接,如data-a-b,但是不能有大写,他回自动转成驼峰命名,调取的时候取驼峰命名的名字。
10、button去除默认边框,添加伪类
button::after{ border: none; }11、设置image为圆角时,加载图片后会先删一下再变成圆角?
原因:图片加载后触发页面大面积绘制,页面来不及反应造成渲染掉帧/卡帧。
解决:使用GUP加速
image{ will-change: transform;}12、position:fixed
问题:开启下拉刷新后,ios端fixed元素不会随页面下拉刷新而向下移动,从而挡住了加载样式。
原因:在ios端动态设置fixed元素的position。当页面滚动scroll<0时,将元素position设为absolute。(已经弃用)
解决:使用position:sticky,该布局相当于fixed和absolute的结合版;
(低版本安卓可能不支持该属性值,部分版本因为内核的变换也可能不支持,故要做好兼容处理,可用fixed做兼容)