2024年微信小程序入门解读-③_小程序都是写死的吗，2024年最新程序员面试题网站

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

打开**app.js**，改写如下。

App({
  globalData: {
    now: (new Date()).toLocaleString()
  }
});

上面代码中，**App()方法的参数配置对象有一个globalData**属性，这个属性就是我们要在多个页面之间分享的值。事实上，配置对象的任何一个属性都可以共享，这里起名为globalData只是为了便于识别。

然后，打开**home.js**，改成下面的内容，在页面脚本里面获取全局对象。

const app = getApp();

Page({
  data: {
    now: app.globalData.now
  }
});

上面代码中，**getApp()函数是小程序原生提供的函数方法，用于从页面获取 App 实例对象。拿到实例对象以后，就能从它上面拿到全局配置对象的globalData**属性，从而把app.globalData.now赋值给页面脚本的now属性，进而通过数据绑定机制，变成页面的全局变量now。

最后，修改一下页面代码home.wxml。

<view>
  <text class="title">现在是 {{now}}</text>
</view>

开发者工具导入项目代码，页面渲染结果如下。

可以看到，页面读到了全局配置对象**app.js**里面的数据。

三、事件

事件是小程序跟用户互动的主要手段。小程序通过接收各种用户事件，执行回调函数，做出反应。

小程序的常见事件有下面这些。

• tap：触摸后马上离开。
• longpress：触摸后，超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件，tap事件将不被触发。
• touchstart：触摸开始。
• touchmove：触摸后移动。
• touchcancel：触摸动作被打断，如来电提醒，弹窗等。
• touchend：触摸结束。

上面这些事件，在传播上分成两个阶段：先是捕获阶段（由上层元素向下层元素传播），然后是冒泡阶段（由下层元素向上层元素传播）。所以，同一个事件在同一个元素上面其实会触发两次：捕获阶段一次，冒泡阶段一次。详细的介绍，请参考我写的事件模型解释。

小程序允许页面元素，通过属性指定各种事件的回调函数，并且还能够指定是哪个阶段触发回调函数。具体方法是为事件属性名加上不同的前缀。小程序提供四种前缀。

• capture-bind：捕获阶段触发。
• capture-catch：捕获阶段触发，并中断事件，不再向下传播，即中断捕获阶段，并取消随后的冒泡阶段。
• bind：冒泡阶段触发。
• catch：冒泡阶段触发，并取消事件进一步向上冒泡。

下面通过一个例子，来看如何为事件指定回调函数。打开home.wxml文件，改成下面的代码。

<view>
  <text class="title">hello {{name}}</text>
  <button bind:tap="buttonHandler">点击</button>
</view>

上面代码中，我们为页面加上了一个按钮，并为这个按钮指定了触摸事件**（tap）**的回调函数buttonHandler，bind:前缀表示这个回调函数会在冒泡阶段触发（前缀里面的冒号可以省略，即写成bindtap也可以）。

回调函数必须在页面脚本中定义。打开**home.js**文件，改成下面的代码。

Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    });
  }
});

上面代码中，Page()方法的参数配置对象里面，定义了buttonHandler()，这就是<button>元素的回调函数。它有几个地方需要注意。

（1）事件回调函数的参数是事件对象event，可以从它上面获取事件信息，比如事件类型、发生时间、发生节点、当前节点等等。

（2）事件回调函数内部的**this**，指向页面实例。

（3）页面实例的**this.setData()方法，可以更改配置对象的data**属性，进而通过数据绑定机制，导致页面上的全局变量发生变化。

开发者工具导入项目代码，点击按钮后，页面渲染结果如下。

可以看到，点击按钮以后，页面的文字从"hello 张三"变成了"hello 李四"。

这里要强调一下，修改页面配置对象的**data属性**时，不要直接修改this.data，这不仅无法触发事件绑定机制去变更页面，还会造成数据不一致，所以一定要通过this.setData()去修改。this.setData()是一个很重要的方法，有很多细节，详细介绍可以读一下官方文档。

四、动态提示 Toast

小程序提供了很多组件和方法，用来增强互动效果。比如，每次操作后，都显示一个动态提示，告诉用户操作的结果，这种效果叫做 Toast。

打开**home.js**文件，为this.setData()加上第二个参数。

Page({
  data: {
    name: '张三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    }, function () {
      wx.showToast({
        title: '操作完成',
        duration: 700
      });
    }),
  }
});

上面代码中，**this.setData()**方法加入了第二个参数，这是一个函数，它会在页面变更完毕后（即this.setData()执行完）自动调用。

这个参数函数内部，调用了**wx.showToast()**方法，wx是小程序提供的原生对象，所有客户端 API 都定义在这个对象上面，wx.showToast()会展示微信内置的动态提示框，它的参数对象的title属性指定提示内容，duration属性指定提示框的展示时间，单位为毫秒。

开发者工具导入项目代码，点击按钮后，页面渲染结果如下。

过了700毫秒，提示框就会自动消失。

五、对话框 Modal

下面，我们再用小程序提供的**wx.showModal()**方法，制作一个对话框，即用户可以选择"确定"或"取消"。

打开**home.js**文件，修改如下。

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

消失。

五、对话框 Modal

下面，我们再用小程序提供的**wx.showModal()**方法，制作一个对话框，即用户可以选择"确定"或"取消"。

打开**home.js**文件，修改如下。

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-HAkr3rmZ-1715635518543)]