【微信小程序高频面试题——精选一】

简介： uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
uniapp真正做到一套代码多端发行，支持原生代码混写和原生sdk集成。
运行体验更好。组件、api与微信小程序一致，兼容 Weex 原生渲染。
通用技术栈，学习成本更低。Vue的语法，微信小程序的api，对于前端开发人员来说更容易上手。
开放生态，组件更丰富。支持通过npm安装第三方包；支持微信小程序自定义组件及sdk；兼容 mpvue 组件及项目；app端支持与原生混合编码；

小程序中如何进行接口请求？会不会跨域，为什么

微信小程序有自带的api接口，wx.request();
不会跨域
跨域问题的出现是因为浏览器在进行请求时存在同源策略, 但是微信小程序不受同源策略的影响.所以不存在跨域问题

    wx.request({
   
 
      url: 'https://showme.myhope365.com/api/cms/article/open/list',
 
      method: "POST",
 
      data: {
   
 
        pageNum: 1,
 
        pageSize: 10
 
      },
 
      header: {
   
 
        "content-type": "application/x-www-form-urlencoded"
 
      },
 
      success: res => {
   
 
        console.log(res.data.rows)
 
      }
 
})

wx.request——参数说明

url 开发者服务器接口地址。注意这里需要配置域名
data 请求的参数
header 设置请求的 header，header 中不能设置 Referer，默认header[‘content-type’] = ‘application/json’
method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType json 回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析
success 收到开发者服务成功返回的回调函数。
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

小程序的常用命令有哪些

1. 引用数据
   { {}} 小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性
   WXML 提供两种文件引用方式import和include。
   import 需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
   include，可以将目标文件中除了 外的整个代码引入，相当于是拷贝到 include 位置。

2. 逻辑渲染 wx:if wx:elif wx:else hidden
   hidden 条件渲染
   wx:if在不满足条件的时候会删除掉对应的DOM
   hidden属性则是通过display属性设置为none来进行条件渲染

3. 列表渲染 wx:for wx:for-item wx:for-index wx:key，使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。
   wx:key 的值以两种形式提供：
   字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
   保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

<view wx:for="{
    {array}}" wx:for-index="index" wx:for-item="itemName.id">{
  {index.cra}}</view>

4. 驱动视图 this.setData({})
5. 事件绑定 bind

你认为微信小程序的优点是什么，缺点是什么

优势

1. 微信助理，容易推广。 在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
2. 使用便捷。 用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
3. 体验良好，有接近原生app的体验 。 在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
4. 成本更低。 从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足

1. 单个包大小限制为2M。 这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
2. 发布审核麻烦。 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
3. 处处受微信限制。 例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的

微信小程序中的js和浏览器中的js以及node中的js的区别

直观的说小程序中没有DOM和BOM对象，也无法对npm包进行管理

浏览器中JS

• ES
• DOM
• BOM

Node中的JS

• ES
• NPM
• Native

NPM 是包管理系统、NPM是目前最大的开原库生态系统，通过各种NPM扩展包快速的实践一些功能。
Native 就是原生的模块，通过这个模块来使用JavaScript语言本身不具有的一些能力（native方法简单的讲，即Java调用非Java代码的接口）。

小程序中的JS

• ES
• 小程序框架
• 小程序API

微信小程序中的数据渲染浏览器中有什么不同

浏览器中渲染是单线程的;

而在小程序中的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序中如何渲染数据

1. WXML模板使用 view 标签，其子节点用 { { }} 的语法绑定一个 msg 的变量。

2. 在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。

简述一下微信小程序中通讯模型

小程序的渲染层和逻辑层分别由2个线程管理：

1. 渲染层的界面使用了WebView 进行渲染；

2. 逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（Native）做中转。
逻辑层发送网络请求也经由Native转发。

谈谈对微信小程序中生命周期函数的理解

小程序中的生命周期函数，分为 应用生命周期函数 和 页面生命周期函数 。

应用生命周期函数

onLaunch 函数的参数也可以使用 wx.getLaunchOptionsSync 获取；
onShow 也可以使用 wx.onAppShow 绑定监听；
onHide 也可以使用 wx.onAppHide 绑定监听；

App.js是小程序入口文件，所以在App.js中调用应用生命周期函数：
微信小程序官网

App({
  onLaunch: function () {
  // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  },
  onShow: function (options) {
  // 当小程序启动，或从后台进入前台显示，会触发 onShow 
  },

  onHide: function () {
  // 当小程序从前台进入后台，会触发 onHide
  },
  onError: function (msg) {
  // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  }
})

页面生命周期函数有：
微信小程序官网