那些微信小程序中常见的面试题及知识点
发表时间：2020-11-4
发布人：葵宇科技
浏览次数：89
微信小程序常见的面试题目和基础知识点
题目概述
一、简单描述下微信?程序的相关?件类型
二、封装微信?程序的数据请求的
三、微信?程序中有哪些参数传值的?法
四、你使?过哪些?法，来提?微信?程序的应?速度
五、分析下微信?程序的优劣势
六、简述微信?程序原理
七、微信?程序与H5的区别
八、简述 wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()
九、微信小程序的for循环
十、?程序的双向绑定和vue哪?不?样
十一、如何分包加载？分包加载的优势在哪？
十二、在你开发?程序的过程中遇到过什么坑？ 你是怎么解决的？
十三、?程序与webview之间的跳转
十四、?程序的?命周期函数
十五、?程序???命周期
十六、?程序授权登录流程
十七、?程序?定义tabBar
十八、?程序??，以及如何分包
十九、?程序有哪些组件可以实现什么功能
二十、?程序兼容问题（开发中遇到的问题）
二十一、本地存储的几种方式
1、简单描述下微信?程序的相关?件类型？
微信小程序文件类型一般由4个文件组成分别为js、json、wxml、wxss
这里先简单说一下js
js一般是用于逻辑交互的，例如点击事件，获取数据等都要在js里进行
接下来介绍一下json
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
在json里面可以设置页面路径、界面表现、网络超时时间、底部 tab 等。
然后就是wxml
网页编程一般采用的是html、css、和js，微信小程序里面的wxml类似于html，他是由属性、标签等组成的。但他和html里面标签并不是完全一样的比如：view、text标签
最后就是wxss
看过上面的小伙伴相信可以猜出他是做什么的，对！没错。他类似于css，是用来改变wxml页面样式的，可以美化页面，对你的页面进行装扮，让你的页面变得更加的漂亮，增加用户体验。
2、封装微信?程序的数据请求
获取接口数据的时候需要在 生命周期函数–监听页面加载 中获取，
每获取一次都要写大量的代码，在这里我对接口进行了简单的封装，可以 减少很多的代码量，希望会多大家有帮助。
我是习惯创建一个request文件夹在里面写三个js文件，分别是api.js、fetch.js、http.js、
api.js用于管理接口
module.exports = {
"swipe": "/liukaige/banner/list", //轮播图
"classify":"/liukaige/shop/goods/category/all",//分类
"bargain":"/liukaige/shop/goods/list",//砍价
"particulars":"/liukaige/shop/goods/detail",//详情
}
fetch.js用于封装http
//封装 http
module.exports = (url, path, method, params) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${url}${path}`,
method: method,
data: Object.assign({}, params),
header: {
//设置响应头
"Content-Type": "application/x-www-form-urlencoded",
},
success: resolve,
fail: reject,
});
});
};
http.js封装接口完成，页面调用即可
//引入api.js和fetch.js
const api = require('./api.js')
const fetch = require('./fetch.js');
let baseUrl = 'https://api.it120.cc';
function fetchGet(path, params) {
return fetch(baseUrl, path, 'get', params);
}
function fetchPost(path, params) {
return fetch(baseUrl, path, 'post', params);
}
module.exports = {
swipe(params) { //轮播图
return fetchGet(api.swipe, params);
},
notice(params){ //首页通知
return fetchGet(api.notice, params);
},
}
接下来还需要在app.js全局设置一下
const http=require('./request/http')
App({
http, // http.fetch
})
封装完成那么如何在js文件里调用渲染数据
//引入全局设置
const app = getApp();
//调用封装好的借口
app.http.classify().then((res) => {
this.setData({
classify: res.data.data
})
})
3、微信?程序中有哪些参数传值的?法？
1.给HTML元素添加data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset。但data-名称不能有?写字?和不可以存放对象
2.wx.setStorageSync wx.getStorageSync
3.在navigator中添加参数传值，然后在跳转的??使?onload的param参数获取
4、你使?过哪些?法，来提?微信?程序的应?速度
1.压缩静态?件，使?精灵图，路由分包)
2.?户?为预测
3.减少默认data的??,在不操作视图的时候，使?this.data.n=10这种赋值?式 代替this.setData({n:10})
5.分析下微信?程序的优劣势？
? 优势：
? 1.?需下载，通过搜索和扫?扫就可以打开。
? 2.良好的?户体验：打开速度快。
? 3.开发成本要?App要低。
? 4.安卓上可以添加到桌?，与原?App差不多。
? 5.微信拥有?套严格的审查流程,不经过审查无法发布上线
? 劣势：
? 1.限制较多。????不能超过1M。不能打开超过5个层级的??。
? 2.样式单?。?程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯?、导航。
? 3.推??窄，不能分享朋友圈，只能通过分享给朋友，附近?程序推?。其中附近 ?程序也受到微信的限制。
? 4.依托于微信，?法开发后台管理功能。
6、简述微信?程序原理？
微信 App ?包含 javascript 运?引擎。微信 App ?包含了 WXML/WXSS 处理引擎。最终会把界?翻译成系统原?的界?
运行过程：
? ?户点击打开?个?程序微信 ，首先加载分析 app.json 得到应?程序的配置信息，加载并运? app.js加载并 显示在 app.json ?配置的第?个??
7、微信?程序与H5的区别？
? 1.运?环境的不同
? 2.开发成本的不同
? 3.获取系统级权限的不同
? 4.应?在?产环境的运?流畅度
8、简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？
? 1.navigateTo （有返回键，不可以跳转到tabBar页面）
? 2.redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)
? 3.switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）
? 4.navigateBack (应用在目标页面， delta值为1、 表示跳转上一页，2、表示跳转两级)
? 5.reLaunch (跳转任意页面， 没有返回， 有 首页 按钮)
9、微信小程序的for循环
微信小程序的for循环的选项是item,下标是index
也可以指定遍历选项和下标的别名，
遍历选项：wx:for-item=“xxx”
遍历下标：wx:for-index=“yyy”
10、?程序的双向绑定和vue哪?不?样？
?程序直接this.data的属性是不可以同步到视图的，必须调?this.setData({})
11、如何分包加载？分包加载的优势在哪？
? 举例：创建多个文件夹，每个文件夹内存放不同的文件，比如创建 packageA、packageB、pages文件夹。 在他们下面可以设置其他文件夹，他们可以设置root路径name名字。一般来说pages为主包
? 优势：微信限制了代码包不能超过 2MB限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。 于是就有一种方法可以解决那就是分包，分包后整个小程序可以达到8MB，提升了加载速度，减少内 存。
? 原理：在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会 把对应分包下载下来，下载完成后再进行展示。
12、在你开发?程序的过程中遇到过什么坑？ 你是怎么解决的？
? 1、wx.navigateTo?法打开?? ?个应?同时只能打开5个??，请避免多层级的
? 交互?式，或使?wx.redirectTo
? 2、tabBar设置不显示tabBar的数量少于2项或超过5项都不会显示
? 3、微信小程序中的背景图不显示
? 解决方案 1.用在线图片转base64码的方法
? 2.将图片上传至服务器，引用图片地址就可以了
13、?程序与webview之间的跳转
? 1、小程序跳转到webview使用web-view标签
? web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面；
? 在wxml页面可以设置src
?
? 在js使用navigateTo
? wx.navigateTo({
? url: ‘…/out/out’, //
? success: function () {
? }, *//*成功后的回调；
? fail: function () { }, *//*失败后的回调；
? complete: function () { } //结束后的回调(成功，失败都会执行)
? })
? 注：?程序跳转webview 必须要在?程序后台使?管理员添加业务域名
? 2、webview跳转?程序
? 引入微信小程序库
? wx.miniProgram.navigateTo({url:’pages/login/login’+’$params’})
? wx.miniProgram.switchTab({url:’/pages/index/index’})
14、?程序的?命周期函数？
? 1、onLoad()??加载时触发，只会调??次，可获取当前??路径中的参数
? 2、onShow()??显示/切换前台时触发，?般?来发送数据请求
? 3、onReady()??初次渲染完成时触发，只会调??次，代表??已可和视图层进
? ?交互
? 4、onHide()??隐藏/切?后台时触发，如底部tab切换到其他??或?程序切?后
? 台等
? 5、onUnload()??卸载时触发，如redirectTo或navigateBack到其他??时。
15、?程序???命周期
? 1. data：??的初始数据
-
onLoad：?命周期回调—监听??加载
-
onShow：?命周期回调—监听??显示;
-
onReady：?命周期回调—监听??初次渲染完成
-
onHide：?命周期回调—监听??隐藏
-
onUnload:?命周期回调—监听??卸载
-
onPullDownRefresh:监听?户下拉动作
-
onReachBottom:??上拉触底事件的处理函数
-
onShareAppMessage:?户点击右上?转发
-
onPageScroll:??滚动触发事件的处理函数
-
onResize:??尺?改变时触发，详? 响应显示区域变化
-
onTabItemTap:当前是 tab ?时，点击 tab 时触发
16、?程序授权登录流程
? 1.登陆只需发送code到后台，后台获取openid，根据openid到数据库中查找用户信息，若有则返回用户信息，若没有 将该openid插入数据库。
- 后台生成token，返回前台token，和用户信息
- 前台判断用户信息是否包含用户名称，用户城市等信息，若包含则登陆成功
- 若不包含，则调用 wx.getUserInfo，发送encryptedData，iv，token到后台，后台根据token找到用户openid解密encryptedData和iv获取用户其他信息
- 然后更新数据库，并返回用户信息
17、?程序?定义tabBar
一般设置tabbar需要在全局app.json里面配置。
在里面可以设置自定义样式
? 例子：
? text：Tabbar项的标题
? iconPath：Tabbar项的icon图片路径
? selectedIconPath：Tabbar项选中时的icon
? badge：是否显示Tabbar的右上角的Badge
?
18、?程序??，以及如何分包
单包不大于2M，整体不大于16M
创建多个文件夹，每个文件夹内存放不同的文件，比如创建 packageA、packageB、pages文件夹。在他们下面可以设置其他文件夹，他们可以设置root路径name名字。一般来说pages为主包
19、?程序有哪些组件可以实现什么功能
1、view
代替原来的 div 标签
2、text
1.?本标签
2.只能嵌套text
3.?按?字可以复制（只有该标签有这个功能）
4.可以对空格回?进?编码
3、image
1.图?标签，image组件默认宽度320px、?度240px
2.?持懒加载
4、swiper
1.轮播图外层容器 swiper
2.每一个轮播项 swiper-item
3、swiper标签 存在默认样式
? 1.width 100%
? 2 .height 150px image 存在默认宽度和高度 320 * 240
? 3 .swiper 高度 无法实现由内容撑开
5、swiper的常用属性：
? autoplay 自动轮播
? interval 修改轮播时间
? circular 衔接轮播
? indicator-dots 显示 指示器 分页器 索引器
? indicator-color 指示器的未选择的颜色
? indicator-active-color 选中的时候的指示器的颜色
20、?程序兼容问题（开发中遇到的问题）
1.input、textear层及比较高
要使用cover-view,不能渐变背景，可以使用渐变背景图 web-view 自动铺满整个小程序页面
2.text-indent 对 input 标签和 text 标签 失效
input 可以用placeholder-class 实现
text可以直接打空格
3.添加边框border时有可能不会生效
有可能是因为border设置的是奇数，只需要把奇数设置成偶数即可
21、本地存储的几种方式
1.wx.setStorageSync(); 用于存储
2.wx.removeStorageSync(); 删除指定的值
3.wx.getStorageSync(); 获取值
4.wx.getStorageInfoSync(); 获取当前存储中所有的 key
5.wx.clearStorageSync(); 清除所有的key
? 以上都是同步的存储，异步存储和同步存储方法一样，在这里就大致列举一下
? （1）wx.setStorage(); //存储值
? （2）wx.removeStorage(); // 移除指定的值
? （3）wx.getStorage(); // 获取值
? （4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
? （5）wx.clearStorage(); // 清除所有的key
