微信小程序面试题汇总
面试题 1. 请简述微信小程序主要目录和文件的作用?
参考回答:
微信小程序主要目录和文件的作用:(1)project.config.json:项目配置文件,用的最多的就是配置是否开启https校验
(2)App.js:设置一些全局的基础数据等
(3)App.json:底部tab,标题栏和路由等设置
(4)App.wxss:公共样式,引入iconfont等
(5)pages:里面包含一个个具体的页面
(6)index.json:配置当前页面标题和引入组件
(7)index.wxml:页面结构
(8)index.wxss:页面样式表
(9)index.js:页面的逻辑,请求和数据处理
面试题 2. 简述wxml与标准的Html的异同?
参考回答:
1.标签名称不同
HTML(div,span,img,a)
WXML(2view,text,image,navigator)2.属性节点不同
HTML :超链接
WXML :3.WXML中提供了类似于Vue中的模板语法
数据绑定
列表渲染
条件渲染
WXML可以通过上述模板语法快速实现一些功能
面试题 3. 请简述WXSS和CSS的异同?
参考回答:
两者都是用来描述页面
1:WXSS具有CSS大部分的特性,也做了一些扩充和修改
2:WXSS新增了尺寸单位,WXSS在底层支持新的尺寸单位rpx
3:WXSS仅支持部分CSS选择器
4:WXSS提供全局样式与局部样式
5:WXSS背景图片只能引入外链,不能使用本地图片
6:小程序样式使用 @import 引入 外联样式文件,地址为相对路径。
7:尺寸单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进行自适应。
面试题 4. 简述如何怎么封装微信小程序的数据请求的?
参考回答:
方式一:
1、在小程序的目录下新建一个 api 的文件夹
2:在 api 文件夹中新建一个 config.js 文件,用于存放公共的服务器地址,内容如下:
const baseUrl = 'https://www.baidu.com/';
export {
baseUrl
}3:在 api 文件夹中新建一个 request.js 文件,用于存放封装的api请求,内容如下:
import { baseUrl } from './http.js'
module.exports = {
/*
* url:请求的接口地址
* methodType:请求方式
* data: 要传递的参数
*/
request : function(url, methodType, data){
let fullUrl = `${baseUrl}${url}`
let token = wx.getStorageSync('token') ? wx.getStorageSync('token') : ''
wx.showLoading({ title: "加载中" });
return new Promise((resolve,reject)=>{
wx.request({
url: fullUrl,
method:methodType,
data,
header: {
'content-type': 'application/json', // 默认值
'x-api-key': token,
},
success: (res) => {
if (res.data.status == 200) {
resolve(res.data)
}else{
wx.showToast({
title: res.data.msg,
icon:'none'
})
reject(res.data.message)
}
},
fail: () => {
wx.showToast({
title: '接口请求错误',
icon:'none'
})
reject('接口请求错误')
},
complete: () => {
setTimeout(() => {
wx.hideLoading()
}, 100)
}
})
})
}
}
4:在 api 文件夹中新建一个 index.js 文件,用于存放api请求的地址,内容如下:
import { request } from './request'module.exports = {
// 获取企业列表
getCompanyList: (data) => request('/company/getlist', 'GET', data),
}
5:在文件中使用,内容如下:
// 引入 api 下的 index 文件
const $api = require('../../api/index')// 在方法中调用
goList(){
let data = {
aaa: this.data.cardCur,
bbb: this.data.notice,
}
$api.getCompanyList(data).then((res) => {
console.log(res,'res');
})
},
方式二:
前3步是一样的,区别就是封装请求的不同
封装所有请求 api/http.js//引入封装的reuest请求
const {
request
} = require('./request.js')//基于业务封装的接口
module.exports = {
// 登录
getLogin: (data) => {
return request('/***/***/***/login', 'POST', data);
},
// 获取企业信息
getCompanyList: (data) => {
return request('/***/***/***/Company', 'GET', data);
},
}
使用// 引入登录接口
import {
getLogin
} from '../../api/http.js'Page({
data: {
username: '',
pwd: ''
},onLoad() {
let params = {
username: this.data.username,
pwd: this.data.pwd
}
// 登录
getLogin(params).then(res => {
wx.setStorageSync('Cookie', res.cookies[0])
wx.switchTab({
url: '../index/index'
})
})
},// 退出登录
handleLogOut() {
wx.clearStorageSync()
wx.navigateTo({
url: '../login/login'
})
},
})
面试题 5. 微信小程序的双向绑定和Vue区别 ?
参考回答:
小程序 直接使用this.data.key = value 是 不能更新到视图当中的。
必须使用 this.setData({ key :value }) 来更新值。
面试题 6. 简述微信小程序的生命周期函数 ?
参考回答:
onLoad : 页面加载时触发。一个页面只会调用一次,可以在 onLoad的参数中获取打开当前页面路径中的参数
onShow : 页面显示 / 切入前台时触发调用。
onReady : 页面初次渲染完成时触发,一个页面只会调用一次。
onHide : 页面隐藏 / 切入后台时触发,如 navigateTo 或底部 tab切换到其他页面,小程序切入后台等
onUnload : 页面卸载时触发。如 redirectTo或 navigateBack 到其他页面时
面试题 7. 小程序页面之间有哪些(传值)传递数据的方法?
参考回答:
使用全局遍历实现数据传递
页面跳转或重定向时,使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
或
给html元素添加data-*属性来传递值,然后通过e.currentTarget.dataset或onload的param参数获取(data- 名称不能有大写字母,不可以存放对象)
设置id 的方法标识来传值,通过e.currentTarget.id获取设置的id值,然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值
面试题 8. 简述微信小程序原理和架构 ?
参考回答:
小程序本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口;
它的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现;
它从技术讲和现有的前端开发差不多,采用JavaScript、WXML、WXSS三种技术进行开发;
功能可分为webview和APPService两个部分,webview主要用来展示UI,appservice用来处理业务逻辑,数据及接口调用,它们在两个进程中进行,通过系统层JSBridge实现通信,实现UI的渲染,事件处理;
webview用来展现UI,appService有来处理业务逻辑、数据及接口调用;
两个部分在两个进程中运行,通过系统层JSBridge实现通信,实现UI的渲染、事件的处理等。
javaScript的代码是运行在微信App中的,因此一些h5技术的应用需要微信APP提供对应的API支持
wxml 微信自己基于xml语法开发的,因此在开发时只能使用微信提供的现有标签,html的标签是无法使用的
wxss具有css的大部分特性,但并不是所有都支持,没有详细文档(wxss的图片引入需要使用外链地址,没有body,样式可以使用import导入)
面试题 9. 描述下微信小程序的相关文件类型 ?
参考回答:
wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构
wxss 样式文件,是一套样式语言,用于描述WXML的组件样式
js脚本逻辑文件。逻辑处理网络请求
json配置文件,小程序设置,如页面注册,页面标题及tabBar
app.json 整个小程序的全局配置,包括:
pages:[所有页面路径]
网络设置(网络超时事件)
页面表现(页面注册)
window:(背景色,导航样式,默认标题)
底部tab等
app.js 监听并处理小程序的生命周期函数,声明全局变量
app.wxss 全局配置的样式文件
面试题 10. 简述微信小程序的优劣势?
参考回答:
优势:容易上手,基础组件库比较全,基本不需要考虑兼容问题
开发文档比较完善,开发社区比较活跃,支持插件式开发
良好的用户体验,无需下载,通过搜索和扫一扫就可以打开,打开速度快,安卓上可以添加到桌面,与原生APP差不多
开发成本比APP要低
为用户提供良好的保障(小程序发布,严格是审查流程)劣势:限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
依托与微信,无法开发后台管理功能
后台调试麻烦,因为api接口必须https请求且公网地址
真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢
面试题 11. 简述微信小程序和H5的区别?
参考回答:
运行环境不同(小程序在微信运行,h5在浏览器运行)
开发成本不同(h5需要兼容不同的浏览器)
获取系统权限不同(系统级权限可以和小程序无缝衔接)
应用在生成环境的运行速度流程(h5需不断对项目优化来提高用户体验)
面试题 12. 小程序关联微信公众号如何确定用户的唯一性?
参考回答:
使用wx.getUserlnfo方法 withCredentials为true时,可获取encryptedData,里面有union_id,后端需要进行对称解密
面试题 13. 小程序使用webview直接加载要注意那些事项?
参考回答:
必须要在小程序后台使用管理员添加业务域名
h5页面跳转至小程序的脚步必须是1.3.1以上
微信分享只可以是小程序的主名称,如要自定义分享内容,需小程序版本在1.7.1以上
h5的支付不可以是微信公众号的appid,必须是小程序的appid,而且用户的openid也必须是用户和小程序的
面试题 14. 微信小程序调用后台接口遇到那些问题?
参考回答:
1.数据的大小有限制,超过范围会直接导致整个小程序崩溃,除非重启小程 序;
2.小程序不可以直接渲染文章内容页这类型的 html 文本内容,若需显示要借住插件,但插件渲染会导致页面加载变慢,所以最好在后台对文章内容的 html 进行过滤,后台直接处理批量替换 p 标签 div 标签为 view 标签,然后其它的标签让插件来做,减轻前端的时间
面试题 15. 微信小程序如何实现下拉刷新?
参考回答:
用view代替scroll-view,设置onPullDownRefresh函数实现
面试题 16. 简述Webview中的页面怎么跳转回小程序
参考回答:
wx.miniProgram.navigateTo({
url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
url:'/pages/index/index'
})
面试题 17. 简述微信小程序bindtap和catchtap的区别?
参考回答:
1、什么是事件(1) 事件是视图层到逻辑层的通讯方式。(2) 事件可以将用户的行为反馈到逻辑层进行处理。(3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。(4) 事件对象可以携带额外信息,如 id,dataset,touches
2、如何使用事件(1) 简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。(2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息(3) 标签元素
1
Click me!(4) 绑定事件
Page( {
tapName: function(event) {
console.log(event)
}
}
)
3、bindtap和catchtap的区别(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。
4、小程序中事件分为冒泡事件和非冒泡事件。(1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件(2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡(3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡
面试题 18. 微信小程序与原生App那个好?
参考回答:
小程序的优点:
基于微信平台开发,享受微信自带的流量,这个优点最大
无需安装,只要打开微信就能用,不占手机内存,体验好
开发周期段,一般最多一个月就可以上线完成
开发所需的资金少,所需资金是开发原生APP的一半不到
小程序名称是唯一的,在微信的搜索里权重很高
容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本没有大问题
基本不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序
发布,审核高效,基本上午发布审核,下午就审核通过,升级简单,支持灰度发布
开发文档完善,社区活跃
支持插件式开发,一些基本功能可以开发成插件,供多个小程序使用缺点:
局限性很强(比如页面大小不能超过1M,不能打开超过5个层级的页面,样式单一,小程序的部分组件已经是成型的了,样式不能修改,比如幻灯片,导航)只能依赖于微信依托与微信,无法开发后台管理功能
不利于推广,推广面窄,不能分享朋友圈,只能分享给朋友,附近小程序推广,其中附加小程序也收到微信限制
后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦
前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致
js引用只能使用绝对路径,不能操作DOM
原生App优点:
原生的相应速度快
对于有无网络操作时,譬如离线操作基本选用原生开发
需要调用系统硬件的功能(摄像头,拨号,短信蓝牙…)
在无网络或者弱网情况下体验好原生App缺点:
开发周期长,开发成本高,需要下载
面试题 19. 简述微信小程序授权登录流程 ?
参考回答:
1、当用户进入微信小程序时,首先我们先判断用户是否授权过此小程序
2、如果没有授权,我们通过一个按钮来实现授权登录
3、通过bindgetuserinfo事件,我们可以获取到个人的信息、加密偏移数据、加密用户信息(e.detail获取)
4.用户可以授权登录,也可以取消授权
5、根据登录接口返回的code码,判断用户是否时新用户
6、当用户注册成功后,在调登录接口,保存token。在有些页面需要使用token
7、在步骤1中,当我们授权过时,我们要看token是否存在
8、当token存在时,我们直接执行逻辑代码
9、当token不存在时,我们就需要登录,登录后判断返回的code码,在根据code码判断用户是否是新用户。最后保存token
面试题 20. 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别 ?
参考回答:
wx.navigateTo() : 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo() : 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab() : 跳转到 TabBar 页面,并关闭其他所有非 tabBar 页面
wx.navigateBack() : 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
wx.reLaunch() : 关闭所有页面,打开到应用的某个页面
面试题 21. 简述微信小程序 wx:if 和 hidden 的区别 ?
参考回答:
wx:if : 有更高的切换消耗。
hidden : 有更高的初始渲染消耗。
使用
频繁切换使用 hidden, 运行时条件变化使用 wx: if
面试题 22. 简述小程序app.json 全局配置文件描述 ?
参考回答:
pages : 用于存放当前小程序的所有页面路径
window : 小程序所有页面的顶部背景颜色,文字颜色配置。
tabBar : 小程序底部的 Tab ,最多5个,最少2个
面试题 23. 请用代码显示如何封装小程序请求 ?
参考回答:
封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 , fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法
然后新建一个 api.js 文件,导入封装好的方法,然后调取相应的方法,传递数据。
wx.request 封装
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) {
wx.hideLoading();
//成功执行方法,参数值为res.data,直接将返回的数据传入
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("修改失败!!!")
}
)
面试题 24. 简述小程序什么时候会主动销毁?
参考回答:
小程序在进入后台之后,客户端会帮我们在一定时间内维持我们的一个状态,超过五分钟后,会被微信主动销毁.
官方也没有明确说明 什么时候销毁, 在不同机型表现也不一样,
2019年开发时:时间官方文档没有说明,但是经过询问一般指5分钟内
2020年开发时:时间官方文档没有说明,实测安卓没有固定时间,内存足够情况下,有时候一天了还在,有时候几分钟就没了
面试题 25. 微信小程序的原生组件有哪些?
参考回答:
以微信小程序为例,可以分成容器组件、基础组件、表单组件、媒体组件、开放能力组件等
面试题 26. 简述小程序的兼容问题有哪些?
参考回答:
遇到的如下:
1,ios下的zIndex层级问题,主要发生在iphone7和iphoneX下 绝对定位必须有一个共同的父元素。
2,左右边框不生效 当边框的宽度设置为奇数的时候,可能会不生效 解决方法:将宽度设置为偶数的时候,在ios下就可以解决
3,还有尽量不要用margin-bottom ,当元素是在整个页面的最底部的时候,在ios下可能margin-bottom会失效,所以建议,都使用padding-bottom
new Date跨平台兼容性问题
在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题,但是在ios下面识别不出来。
因为IOS下面不能识别这种格式,需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换,将短横替换为斜杠。var iosDate= date.replace(/-/g, '/');wx.getUserInfo()接口更改问题
微信小程序最近被吐槽最多的一个更改,就是用户使用wx.getUserInfo(开发和体验版)时不会弹出授权,正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮,然后再弹出授权
面试题 27. 微信小程序中如何进行接口请求?会不会跨域,为什么 ?
参考回答:
微信小程序有自带的api接口,wx.request();
不会跨域,因为微信小程序不是浏览器,没有同源策略的约束;wx.request({
url: 'https://xxxxxxx.com/api',
method: "POST",
data: {
pageNum: 1,
pageSize: 10
},
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: res => {
console.log(res)
}
})
面试题 28. 简述小程序的常用命令有哪些 ?
参考回答:
引用数据 {{}}
逻辑渲染 wx:if wx:elif wx:else hidden
列表渲染 wx:for wx:for-item wx:for-index wx:key,使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名。驱动视图 this.setData({})
事件绑定 bind
面试题 29. 微信小程序中的数据渲染与浏览器中有什么不同 ?
参考回答:
浏览器中渲染是单线程的;
而在小程序中的运行环境分成渲染层和逻辑层, WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层
面试题 30. 简述微信小程序中如何进行事件的定义,传参方式 ?
参考回答:
程序中使用bind关键字绑定事件,但小程序中不能在绑定事件的同时为事件处理函数传递参数,可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字。
事件传参
接收传递到的参数:
tapTap(e){
console.log(e.currentTarget.dataset.param)
// 打印结果为:事件传参
}
面试题 31. 微信小程序如何进行页面的跳转传参以及接收数据 ?
参考回答:
最常用的两个页面的跳转和传参方式:①wx.navigateTo ②navigator标签
wx.navigateTo( {
url: `/pages/details?id=$ {
xxx
}
`
}
);
跳转到新页面
1
跳转页接收参数:
onLoad (options) {
console.log(options)
this.setData( {
goodsId:options.id,
goodsName:options.name
}
)
}
其他方式:
wx.switchTab() 用来 跳转至tabBar页面,并关闭其他所有非 tabBar 页面
wx.redirectTo() 和 wx.navigateTo() 一样,都 跳转至非tabBar页面,但会关闭当前页面
wx.reLaunch() 也是 跳转至非tabBar页面,并且会关闭其他所有页面
wx.navigateBack() 用来返回上一页面或多级页面,并关闭当前页面。
wx.navigateBack( {
delta: 2 //返回的页面数,1为返回上一页,如果delta大于现有页面数,则返回到首页。
}
)
面试题 32. 微信小程序如何进行本地存储?
参考回答:
小程序提供了读写本地数据缓存的接口,通过 wx.getStorage/wx.getStorageSync读取本地缓存,通过 wx.setStorage/wx.setStorageSync写数据到缓存,其中带Sync后缀的接口表示是同步接口
// 同步存储
wx.setStorageSync('key', 'value')
// 异步存储,并且开启加密存储
wx.setStorage({
key: "key",
data: "value",
encrypt: true, // 若开启加密存储,setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
success() {
wx.getStorage({
key: "key",
encrypt: true, // 若开启加密存储,setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
success(res) {
console.log(res.data)
}
})
}
})
// 同步读取缓存
var value = wx.getStorageSync('key')
// 异步读取缓存
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
小程序宿主环境会管理不同小程序的数据缓存,不同小程序的本地缓存空间是分开的,每个小程序的缓存空间上限为10MB,如果当前缓存已经达到10MB,再通过wx.setStorage写入缓存会触发fail回调。小程序的本地缓存不仅仅通过小程序这个维度来隔离空间,考虑到同一个设备可以登录不同微信用户,宿主环境还对不同用户的缓存进行了隔离,避免用户间的数据隐私泄露。由于本地缓存是存放在当前设备,用户换设备之后无法从另一个设备读取到当前设备数据,因此用户的关键信息不建议只存在本地缓存,应该把数据放到服务器端进行持久化存储
面试题 33. 简述微信小程序如何实现数据驱动视图 ?
参考回答:
微信小程序中使用 setData 函数把变量渲染到视图层注意:直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致
仅支持可以JSON化的数据
单次设置的数据不能超过1024KB,尽量避免一次设置过多的数据
不要把data中的任何一项的value设为undefined,否则这一项将不能被设置,可能会有潜在的问题
示例:
Page({
data: {
testOne: 1,
testTwo: 2
},
onLoad: function() {},
onShow () {
this.setData({
test02:8
})
console.log(this.data.testTwo)
}
},
})
面试题 34. 简述并列举微信小程序中常见的开放能力API ?
参考回答:
获取网络状态(2G/3G/4G/5G/WIFI…)Page({
// 点击“预览文档”的按钮,触发tap回调
tap: function() {
wx.getNetworkType({
success: function(res) {
// networkType字段的有效值:
// wifi/2g/3g/4g/5g/unknown(Android下不常见的网络类型)/none(无网络)
if (res.networkType == 'wifi') {
// 从网络上下载文档
wx.downloadFile({
url:' https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp/464110/docx/bb5d8e7d-97bc-406b-be94-ca2b4724c0e6.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=1644944885&Signature=qUYOtNWZOaopjkEFbcKpvgmn%2B1U%3D',
success: function (res) {
// 下载成功之后进行预览文档
wx.openDocument({
filePath: res.tempFilePath
})
}
})
} else {
wx.showToast({ title: '当前为非Wifi环境' })
}
}
})
}
})
扫码能力Page({
// 点击“扫码订餐”的按钮,触发tapScan回调
tapScan: function() {
// 调用wx.login获取微信登录凭证
wx.scanCode({
success: function(res) {
var num = res.result // 获取到的num就是餐桌的编号
}
})
}
})
分享能力(分享到朋友圈或个人聊天等)
Page({
onShareAppMessage(){
// 我们要记录转发的记录
return {
// 分享的标题
title:'网友热议',
// 分享的封面, 默认为当前页面的截图
imageUrl:"/assets/icon/index.png",
// 点击分享跳转的路径,默认是当前路径,也可以自定义配置,添加额外的跳转参数 path:"/pages/index/index?userId=10&entry=share"
}
}, // 省略了别的属性 ...})wx.canIUse(string schema)
判断小程序的API、回调、参数、组件等是否在当前版本可用wx.getSystemInfoSync() | wx.getSystemInfo()
获取系统信息wx.getUserProfile(Object object)
获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo
面试题 35. 简述微信小程序的父子传参和vue中的有什么区别?
参考回答:
父传子的不同点是:微信小程序在子组件中接受父组件传 用 propertites 进行接收,而不是 props
properties: {
msg:{
// type 要接收的数据的类型
type:String,
// value 默认值
value:""
},
},
子传父的不同点是:微信小程序在子组件中使用 triggerEvent 抛出自定义事件名,而不是 this.$emit()methods: {
sendData() {
console.log(this.data.msg)
this.triggerEvent('eventName', '要传递的参数')
}
}
面试题 36. 简述微信小程序中对behavior的理解 ?
参考回答:
behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 mixins 或 traits。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ,behavior 也可以引用其它 behavior 。
组件引用时,在 behaviors 定义段中将它们逐个列出即可。
代码示例:
// my-component.js
var myBehavior = require('my-behavior')
Component({
behaviors: [myBehavior],
properties: {
myProperty: {
type: String
}
},
data: {
myData: 'my-component-data'
},
created: function () {
console.log('[my-component] created')
},
attached: function () {
console.log('[my-component] attached')
},
ready: function () {
console.log('[my-component] ready')
},
methods: {
myMethod: function () {
console.log('[my-component] log by myMethod')
},
}
})
面试题 37. 如何优化首次加载微信小程序的速度?
参考回答:
包体积优化
分包加载(优先采用,大幅降低主包体积)。
图片优化(1.使用tinypng压缩图片素材; 2.服务器端支持,可采用webp格式)。
组件化开发(易维护)。
减少文件个数及冗余数据。
请求优化
关键数据尽早请求(onLoad()阶段请求,次要数据可以通过事件触发再请求);整合请求数据,降低请求次数。
采用cdn缓存静态的接口数据(如判断用户登录状态,未登录则请求缓存接口数据),cdn稳定且就近访问速度快(针对加载总时长波动大)。
缓存请求的接口数据。
首次渲染优化
图片懒加载(节省带宽)。
setData优化(不要一次性设置过多的数据等)。
DOM渲染优化(减少DOM节点)
面试题 38. 微信小程序如何实现瀑布流效果?
参考回答:
思路:把屏幕分为左右两个容器,根据容器的高度决定下一个元素应该放在哪个容器内(高度相对较低的容器)
代码如下:
// 处理数据
initList(list) {
this.data.finish = false
// 临界值
if (list.length == 0) {
this.data.finish = true
return
}
let item = list.shift()
wx.getImageInfo({
src: item.coverImgUrl,
success: (res) => {
if (this.data.leftHeight <= this.data.rightHeight) {
// 默认从左往右渲
this.data.leftList.push(item)
this.data.leftHeight += res.height / res.width
} else {
this.data.rightList.push(item)
this.data.rightHeight += res.height / res.width
}
this.setData({
leftList: this.data.leftList,
rightList: this.data.rightList,
})
},
complete: () => {
this.initList(list)
}
})
面试题 39. 简述小程序视图渲染结束后如何回调 ?
参考回答:
使用 setData(data, callback),在 callback 回调方法中添加后续操作代码。
面试题 40. 简述一下小程序中常见的界面跳转的方式,以及区别?
参考回答:
wx.navigateTo
wx.navigateTo( {
url: 'test?id=1',
}
)
保留当前页面,只能打开非 tabBar 页面。
wx.redirectTo
wx.redirectTo( {
url: 'test?id=1'
}
)
关闭卸载当前页面,只能打开非 tabBar 页面。
wx.switchTab
wx.switchTab( {
url: '/index'
}
)
关闭所有非tabbar页面, 只能打开 tabBar 页面。
wx.reLaunch
wx.reLaunch( {
url: 'test?id=1'
}
)
关闭卸载所有页面,可以打开任意页面。
wx.navigateBack
wx.navigateBack( {
delta: 2 //返回的页面数,如果 delta 大于现有页面数,则返回到首页。
}
)
返回前面的页面,可以指定返回多少页,如果用过redirectTo,那么被关闭的页面将返回不去
相关文章:
微信小程序面试题汇总
面试题 1. 请简述微信小程序主要目录和文件的作用? 参考回答: 微信小程序主要目录和文件的作用:(1)project.config.json:项目配置文件,用的最多的就是配置是否开启https校验 (2&am…...

学习日志:JVM垃圾回收
文章目录 前言一、堆空间的基本结构二、内存分配和回收原则对象优先在 Eden 区分配大对象直接进入老年代长期存活的对象将进入老年代主要进行 gc 的区域空间分配担保 三、死亡对象判断方法引用计数法可达性分析算法引用类型总结1.强引用(StrongReference…...

Vue前端页面嵌入mermaid图表--流程图
一、安装Mermaid 首先,你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装: npm install mermaid --save # 或者 yarn add mermaid结果如图: 二、Vue 方法一:使用pre标签 使用ref属性可以帮助你在Vue组件中访问DOM元素 …...
【web]-反序列化-easy ? not easy
打开后看到源码 <?php error_reporting(0); highlight_file(__FILE__);class A{public $class;public $para;public $check;public function __construct(){$this->class "B";$this->para "ctfer";echo new $this->class ($this->para…...

python 内置函数、math模块
一、内置函数 内置函数是 Python 解释器内置的一组函数,它们可以直接在 Python 程序中使用,无需额外导入模块。这些内置函数提供了基本的操作和功能,涵盖了广泛的用途,从数学运算到数据结构操作等等。 import mathprint(type(10)…...
Ubuntu Docker 安装
Ubuntu Docker 安装 1. 引言 Docker 是一个开源的应用容器引擎,它允许开发者打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。 2. 系统要求 在安装 Docker 之前,…...

vue接入google map自定义marker教程
需求背景 由于客户需求,原来系统接入的高德地图,他们不接受,需要换成google地图。然后就各种百度,各种Google,却不能实现。----无语,就连google地图官方的api也是一坨S-H-I。所以才出现这篇文章。 google地…...
Spring Boot集成Redis与Lua脚本:构建高效的分布式多规则限流系统
文章目录 Redis多规则限流和防重复提交记录访问次数解决临界值访问问题实现多规则限流先确定最终需要的效果编写注解(RateLimiter,RateRule)拦截注解 RateLimiter 编写lua脚本UUID时间戳编写 AOP 拦截 总结 Redis多规则限流和防重复提交 市面…...

四、单线程多路IO复用+多线程业务工作池
文章目录 一、前言1 编译方法 二、单线程多路IO复用多线程业务工作池结构三、重写Client_Context类四、编写Server类 一、前言 我们以及讲完单线程多路IO复用 以及任务调度与执行的C线程池,接下来我们就给他结合起来。 由于项目变大,尝试解耦项目&#…...

单元测试--Junit
Junit是Java的单元测试框架提供了一些注解方便我们进行单元测试 1. 常用注解 常用注解: TestBeforeAll,AfterAllBeforeEach,AfterEach 使用这些注解需要先引入依赖: <dependency><groupId>org.junit.jupiter<…...

达梦数据库系列—30. DTS迁移Mysql到DM
目录 1.MySQL 源端信息 2.DM 目的端信息 3.迁移评估 4.数据库迁移 4.1源端 MySQL 准备 4.2目的端达梦准备 初始化参数设置 兼容性参数设置 创建迁移用户和表空间 4.3迁移步骤 创建迁移 配置迁移对象及策略 开始迁移 对象补迁 5.数据校验 统计 MySQL 端对象及数…...
随记0000——从0、1 到 C语言
C语言的发展历程是计算机科学史上的一个重要里程碑。 下面是从最早的机器语言到汇编语言,再到高级语言如 C 语言的简化演进过程: 1. 机器语言 定义与特点 机器语言是最底层的编程语言,由一系列二进制代码组成。直接被CPU执行,…...

C++ | Leetcode C++题解之第264题丑数II
题目: 题解: class Solution { public:int nthUglyNumber(int n) {vector<int> dp(n 1);dp[1] 1;int p2 1, p3 1, p5 1;for (int i 2; i < n; i) {int num2 dp[p2] * 2, num3 dp[p3] * 3, num5 dp[p5] * 5;dp[i] min(min(num2, num3…...
前端系列-8 集中式状态管理工具pinia
集中式状态管理工具—pinia vue3中使用pinia作为集中式状态管理工具,替代vue2中的vuex。 pinia文档可参考: https://pinia.web3doc.top/introduction.html 1.项目集成pinia 安装pinia依赖: npm install pinia在main.ts中引入pinia import { createApp } from vu…...

pytest使用
主要技术内容 1.pytest设计 接口测试 框架设想 common—公共的东西封装 1.request请求 2.Session 3.断言 4.Log 5.全局变量 6.shell命令 ❖ config---配置文件及读取 ❖ Log— ❖ payload—请求参数—*.yaml及读取 ❖ testcases—conftest.py; testcase1.py…….可…...
单表查询总结与多表查询概述
1. 单表查询总结 执行顺序: 从一张表,过滤数据,进行分组,对分组后的数据再过滤,查询出来所需数据,排序之后输出; from > where > group by > having > select > order by 2. …...

redis的使用场景和持久化方式
redis的使用场景 热点数据的缓存。热点:频繁读取的数据。限时任务的操作:短信验证码。完成session共享的问题完成分布式锁。 redis的持久化方式 什么是持久化:把内存中的数据存储到磁盘的过程,同时也可以把磁盘中的数据加载到内存…...

嵌入式Linux学习: 设备树实验
设备树(DeviceTree)是一种硬件描述机制,用于在嵌入式系统和操作系统中描述硬件设备的特性、连接关系和配置信息。它提供了一种与平台无关的方式来描述硬件,使得内核与硬件之间的耦合度降低,提高了系统的可移植性和可维…...

eqmx上读取数据处理以后添加到数据库中
目录 定义一些静态变量 定时器事件的处理器 订阅数据的执行器 处理json格式数据和将处理好的数据添加到数据库中 要求和最终效果 总结一下 定义一些静态变量 // 在这里都定义成全局的 一般都定义成静态的private static MqttClient mqttClient; // mqtt客户端 private s…...

【中项】系统集成项目管理工程师-第5章 软件工程-5.3软件设计
前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”&…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...

实战设计模式之模板方法模式
概述 模板方法模式定义了一个操作中的算法骨架,并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下,重新定义算法中的某些步骤。简单来说,就是在一个方法中定义了要执行的步骤顺序或算法框架,但允许子类…...