wx小程序面试题整理

wx小程序的项目结构

• project.config.json  项目配置文件，用得最多的就是配置是否开启https校验；
• App.js  包含整个小程序的生命周期，错误监听、页面不存在监听等函数；
• APP.json  小程序的全局注册文件包含：界面路径注册、tab注册、窗口表现等等
• App.wxss  小程序的公共样式，引入iconfont等；
• pages  存放页面文件，每个页面结构如下；
• index.json (配置当前页面标题和引入组件等)；
• index.wxml (页面结构)；
• index.wxss (页面样式表)；
• index.js (页面的逻辑，请求和数据处理等)；

小程序的生命周期：

页面的生命周期函数：

有哪几种方式可以跳转页面？

navigateTo: 保留当前页面，跳转到应用内的某个页面。
navigateBack：关闭当前页面，返回上一页面或多级页面。
redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
reLaunch： 关闭所有页面，打开到应用内的某个页面。

wx小程序通信方式

1. 父子组件通信

• 父传子

//父组件 wxml 使用变量="{{变量}}"语法向子组件传递一个数据
  <child obj="{{obj}}"></child>

//子组件 js 使用properties来接受参数,接下来可以在wxml中正常使用该数据
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    obj: Object
  },
})

• 子传父

//子组件 发布一个事件，携带上要传递的参数
// wxml
<button bindtap="childClick">子传父</button>
//js 按钮点击事件完成向父组件发布事件，注意组件方法定义在methods中
  methods: {
    childClick() {
      this.triggerEvent('childMethods', this.data.obj)
    },
  }

//父组件  
//wxml 绑定监听事件方法
  <child obj="{{obj}}" bind:childMethods="getIndex"></child>
//js 获取方法中的参数
  getIndex(e){
    console.log(e.detail);
  },

2. 路由传参

//当前页面
wx.navigateTo({url:`/page/my/my?id=${this.data.id}`})
//跳转的页面接收参数

onLoad: function (options) {
    console.log(options);
 },

3. 全局通信

   定义一个globalData，将数据挂载到 app.js，这种方式在开发中很常用。通过getApp()，我们能够在任何一个页面内访问到app实例。

//app.js
App({
  globalData:{
    list:[]
  }
})

//组件使用
const app = getApp()
Page({
  onLoad(){
    app.globalData.list.push({
      id: 10
    })
  }
})

4. storage

storage并不是作为通信的主要方式。storage 主要是为了缓存数据，并且最多只能存储10M的数据，我们应该合理使用storage

wx.setStorageSync('timestamp', Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')

5.页面通信 getCurrentPages

getCurrentPages() 获取当前页面栈，数组中第一个元素为首页，最后一个元素为当前页面

元素为一个对象，里面存放着页面的信息，包括route（页面路径）、options（onLoad拿到的参数）、method、data等

Page({
  onLoad(){
    let pages = getCurrentPages()
    let lastPage = pages[pages.length-2]
    lastPage.setData({
      list: []
    })
  }
})

6. eventBus

通过发布订阅模式注册事件和触发事件进行通信

简单实现

class EventBus{
  constructor(){
    this.task = {}
  }
  on(name, cb){
    if(!this.task[name]){
      this.task[name] = []
    }
    typeof cb === 'function' && this.task[name].push(cb)
  }
  emit(name, ...arg){
    let taskQueen = this.task[name]
    if(taskQueen && taskQueen.length > 0){
      taskQueen.forEach(cb=>{
        cb(...arg)
      })
    }
  }
  off(name, cb){
    let taskQueen = this.task[name]
    if(taskQueen && taskQueen.length > 0){
      let index = taskQueen.indexOf(cb)
      index != -1 && taskQueen.splice(index, 1)
    }
  }
  once(name, cb){
    function callback(...arg){
      this.off(name, cb)
      cb(...arg)
    }
    typeof cb === 'function' && this.on(name, callback)
  }
}
export default EventBus

使用

//app.js
import EventBus from '/util/EventBus'
wx.$bus = new EventBus()

//page1.js
Page({
  onLoad(){
    wx.$bus.on('add', this.addHandler)
  },
  addHandler(a, b){
    console.log(a+b)
  }
})

//page2.js
Page({
  onLoad(){
    wx.$bus.emit('add', 10, 20)
  },
})

7. selectComponent

使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，类似 Vue 的 ref

//wxml
<my-component id="mycomponent" list="{{list}}"></my-component>

//js
Page({
  onLoad(){
    let mycomponent = this.selectComponent('#mycomponent')
    mycomponent.setData({
      list: []
    })
  }
})

8. selectOwnerComponent

选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象，类似 Vue 的 $parent

Component({
  attached(){
    let parent = this.selectOwnerComponent()
    console.log(parent)
  }
})

wx小程序里边的双向绑定和vue的双向绑定有什么区别？

vue中在表单元素中使用v-model语法糖绑定data中的数据，当数据改变后触发响应式，视图更新，实现双向数据绑定；

小程序中数据改变，需要调用input事件，获取value (e.target) ，使用this.setData()语法实现。

微信小程序与H5的区别？

• 运行环境不同（小程序在微信运行，h5在浏览器运行）；
• 开发成本不同（h5需要兼容不同的浏览器）；
• 获取系统权限不同（系统级权限可以和小程序无缝衔接）；
• 应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

在你开发小程序的过程中遇到过什么坑？ 你是怎么解决的？

wx.navigateTo无法打开页面
一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
tabBar设置不显示
tabBar的数量少于2项或超过5项都不会显示；
tabBar写法错误导致不显示；
tabBar没有写pagePath字段（程序启动后显示的第一个页面）
本地资源无法通过wxss获取
background-image：可以使用网络图片，或者base64，或者使用标签

bindtap和catchtap的区别？

相同点：都是作为点击事件函数，点击时触发。

不同点：bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的

微信小程序，为什么使用js闭包？

因为微信小程序处理函数是异步执行的，异步执行造成的结果可能和预期的不合，如果函数中有循环，最后的结果都一样，所以使用js闭包可以解决这个问题。

微信小程序原理？

微信小程序采用JavaScript、wxml、wxss三种技术进行开发，与现有前端开发的区别：
JavaScript的代码是运行在微信APP中的，因此一些h5技术的应用需要微信APP提供对应的API支持；
wxml微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的；
wxss具有css的大部分特性，但并不是所有都支持没有详细文档（wxss的图片引入需使用外链地址，没有body，样式可直接使用import导入）。
微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
小程序功能分为webview和APPservice，webview主要用来展示UI，appservice用来处理业务逻辑、数据及接口调用。它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染、事件处理。

分析下微信小程序的优劣势？

优点：

无需下载，通过搜索和扫一扫就可以打开。
良好的用户体验：打开速度快。
开发成本要比App要低。
安卓上可以添加到桌面，与原生App差不多。
为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。
缺点：

限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
样式单一。小程序的部分组件已经是成型的了，样式不可以修改。
推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
依托于微信，无法开发后台管理功能。