微信小程序

微信小程序的登录流程

调用wx.login获取code 调用wx.request发送code到我们自己的服务器（我们自己的服务器会返回一个登录状态的标识，比如token）将登录状态的标识token进行存储，以便下次使用请求需要登录状态的接口时，带上这个token。

简述微信小程序的运行机制

热启动：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。

分析一下小程序的优劣势

优势

\1. 无需下载，通过搜索和扫一扫就可以打开

\2. 良好的用户体验：打开速度快

\3. 开发成本比App要低

\4. 安卓上可以添加到桌面，与原生App差不多

\5. 为用户提供良好的安全保障。

启动速度快，开发成本比 app 要低安卓可添加桌面语言与原生app 差不多安全保障

劣势

\1. 限制较多。

\2. 样式单一。

\3. 推广面窄，不能分享朋友圈，

\4. 依托于微信，无法开发后台管理功能

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

微信小程序项目结构主要有四个文件类型,如下：

1.WXML可以构建出页面的结构 2.WXSS 是一套样式语言，用于描述 WXML 的组件样式 3.js逻辑处理，网络请求 4.json小程序配置文件 5.app.json作为配置文件入口，整个小程序的全局配置。 6.app.js必须要有这个文件，没有也是会报错 7.app.wxss全局页面样式设置，在app.wxss中设置的样式可以在小程序的所有页面生效

请谈谈小程序的生命周期函数

· onLoad()：页面加载时触发

· onShow()：页面显示/切入前台时触发

· onReady()：页面初次渲染完成时触发

· onHide()：页面隐藏/切入后台时触发

· onUnload()：页面卸载时触发

· onPullDownRefresh()：下拉刷新的钩子函数

· onReachBottom()：上翻到底的钩子函数

请谈谈小程序的组件生命周期函数

· created()：组件实例刚刚被创建好时触发。tached 所负的

· attached()：在组件完全初始化完毕、进入页面节点树后触发。（啊特他吃的）

· detached() 组件离开页面节点树后触发。（得特塔尺的）（分离的）

微信小程序中的路由及其区别

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层（Current 卡润特）

wx.reLaunch()：关闭所有页面，打开到应用内的某个页面（瑞狼迟）reLaunch重新发动

说出小程序当中常用的UI组件

· 视图容器组件：view、swiper、swiper-item

· 基础内容组件：text、icon、rich-text （rich 瑞驰 --：有钱的）

· 表单组件：button、form checkbox、input

· 导航组件：navigator

· 媒体组件：image、

谈一谈你对wxs的理解

· 概念：wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
· 特点：
o 没有兼容性
o 与JavaScript不同
o 隔离性
不能作为事件回调
o ios设备上比javascript运行快
o wxs遵循CommonJs模块化规范 （Common普通）
· 支持的数据类型：
o number：数值类型
o string：字符串类型
o boolean：布尔类型
o object：对象类型
o function：函数类型
o array：数组类型
o date：日期类型
o regexp：正则

简述一下wx:if和hidden的区别

1.wx:if 动态创建或销毁对应的UI结构 2.wx:if 条件为 false，什么也不做;为true时，才开始局部渲染 3.hidden 简单的控制组件的显示与隐藏 4.wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。频繁切换的情况下，用 hidden 更好，运行时条件不大可能改变则 wx:if 较好。

说出小程序中父子组件通信的三种方式

· 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

· 事件绑定：用于子组件向父组件传递数据，可以传递任意数据

· 获取组件实例：父组件还可以通过this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

什么是分包加载，如何使用分包加载

概念 减少首屏加载时间，用户在使用时按需进行加载
使用
在app.json中配置项目分包结构
配置`subpackages`属性 （怕克zhei死）
subpackages: {
     "root": "分包的根目录",
     "pages": [""] // 需要按需加载的包所在路径
   }

小程序中如何自定义组件

\1. 在根目录新建一个components文件夹，然后在这个文件夹下放置自定义的组件
\2. 需要用到某个自定义组件时，就在它里面的json文件中配置 "component": true
\3. 在父组件的json文件中的usingComponents中导入这个组件
usingComponents: {
"自定义组件名": "自定义组件所在路径"
}

小程序中如何自定义tabBar

\1. 在 app.json 中的 tabBar 项指定 custom 字段

\2. 在所有 tab 页的 json 里声明 usingComponents 项，或者在 app.json 中全局开启

\3. 在代码根目录下创建custom-tab-bar文件夹，里面放自定义的tabBar文件

\4. 编写tabBar代码

小程序的wxss和css有什么区别

wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚

⼩程序样式使⽤ @import 引⼊外联样式⽂件，地址为相对路径。

尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。1px = 2rpx

小程序的数据绑定与vue那点不一样

⼩程序直接使⽤this.data.key = value 是不能更新到视图当中的。必须使⽤ this.setData({ key ：value }) 来更新值

小程序怎么实现下拉刷新

两种⽅案

⽅案⼀：

通过在 app.json 中，将 "enablePullDownRefresh": true, 开启全局下拉刷新。

或者通过在组件 .json ，将 "enablePullDownRefresh": true, 单组件下拉刷新。

⽅案⼆：

scroll-view ：使⽤该滚动组件⾃定义刷新，通过 bindscrolltoupper 属性，当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利⽤这个属性，来实现下拉刷新功能。

bindtap和catchtap区别

相同点：都是点击事件

不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。

小程序怎么跟随事件传值

在⻚⾯标签上通过绑定 data-key = value ，然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值

拿到传值 get(e){ console.log(e.currentTarget.dataset.name) },

uni-app的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分

如何封装小程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT .... 最后导出这些⽅法然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。

封装：

var app = getApp(); //获取⼩程序全局唯⼀app实例
var host = '******************'; //接⼝地址

//POST请求
function post(url, data, success,fail) 
{ 
  request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail) 
{ 
  request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail) 
{ 
  wx.showLoading({ title: "正在加载中...", }) 
  wx.request({
    url: host + url, //请求地址 
    method: method, //请求⽅法 
    header: { //请求头 
      "Content-Type": "application/json;charset=UTF-8" 
   },
  data: data, //请求参数  
  dataType: 'json', //返回数据格式 
  responseType: 'text', //响应的数据类型
  success: function(res) { //成功执⾏⽅法，参数值为res.data,直接将返回的数据传⼊ 
    wx.hideLoading(); 
    success(res.data); 
  },
  fail: function() { //失败执⾏⽅法 fail(); },
 })
}
module.exports = { postRequest: post, getRequest: get,}

组件使⽤ 封装好的请求：

var http = require('../../utils/request.js'); //相对路径  
var params = {//请求参数 id:this.data.userId}
http.postRequest("user/delUser", params, function(res) { console.log("修改成功！"); }, function(res) { console.log("修改失败！！！")})

总结：

在src目录中新建一个utils目录，在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法，定义get和post等请求的方法，然后在get或者post请求的方法中设置wx.showToast()，然后通过wx.request来实现get或者post请求，在success中，关闭loading，然后通过回调的形式返回拿到的数据

调用：

首先要导入包

var http=require("../utils/request.js")

在方法中通过http.get方法（参数，回调）来调用

uniapp获取地理位置的API是什么？

· uni.getLocation()

小程序有哪些传递数据的方法

\1. 使⽤全局变量在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。在组件.js 中，头部引⼊ const app = getApp(); 获取到全局变量直接使⽤ app.globalData.key 来进⾏赋值和获取值。

\2. 使⽤路由wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后拼接 + 变量，然后在⽬标⻚⾯通过在 onLoad 周期中，通过参数来获取传递过来的值。

\3. 使用本地存储

分别说出vue、小程序、uni-app中的本地存储数据和接受数据是什么

vue：

o 存储：localstorage.setItem

o 接收：localstorage.getItem

· 微信小程序：

o 存储：wx.setStorage/wx.setStorageSync

o 接收：wx.getStorage/wx.getStorageSync

· uni-app：

o 存储：uni.setStorage

o 接收：uni.getStorage

app.json配置描述

pages : ⽤于存放当前⼩程序的所有⻚⾯路径

window : ⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊配置。

tabBar : ⼩程序底部的 Tab ,最多5个，最少2个。

uni-app如何监听页面滚动

· 使用onPageScroll监听

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。

如何让图片宽度不变，高度自动变化，保持原图片宽高比不变

· 给image标签添加 mode='widthFix'

程序什么时候会主动销毁？

⼩程序在进⼊后台之后，客户端会帮我们在⼀定时间内维持我们的⼀个状态，超过五分钟后，会被微信主动销毁.官⽅也没有明确说明什么时候销毁，在不同机型表现也不⼀样，2019年开发时：时间官⽅⽂档没有说明，但是经过询问⼀般指5分钟内2020年开发时：时间官⽅⽂档没有说明，实测安卓没有固定时间，内存⾜够情况下，有时候⼀天了还在，有时候⼏分钟就没了

uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？

· 条件编译的两种方法

o #ifdef

o #ifndef

· 小程序端和H5的代表值

o H5：H5

o MP-WEIXIN：微信小程序

小程序调用后台接口遇到哪些问题？

1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。

小程序与原生App哪个好？

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

前端面试题（七）

微信小程序

微信小程序的登录流程

简述微信小程序的运行机制

分析一下小程序的优劣势

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

请谈谈小程序的生命周期函数

请谈谈小程序的组件生命周期函数

微信小程序中的路由及其区别

说出小程序当中常用的UI组件

谈一谈你对wxs的理解

简述一下wx:if和hidden的区别

说出小程序中父子组件通信的三种方式

什么是分包加载，如何使用分包加载

小程序中如何自定义组件

小程序中如何自定义tabBar

小程序的wxss和css有什么区别

小程序的数据绑定与vue那点不一样

小程序怎么实现下拉刷新

bindtap和catchtap区别

小程序怎么跟随事件传值

uni-app的配置文件、入口文件、主组件、页面管理部分

如何封装小程序请求

uniapp获取地理位置的API是什么？

· uni.getLocation()

小程序有哪些传递数据的方法

分别说出vue、小程序、uni-app中的本地存储数据和接受数据是什么

uni-app如何监听页面滚动

如何让图片宽度不变，高度自动变化，保持原图片宽高比不变

程序什么时候会主动销毁？

uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？

小程序调用后台接口遇到哪些问题？

小程序与原生App哪个好？