微信小程序的知识点

770 阅读3分钟

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做兼容)