1.请谈谈wxml与标准的html的异同?
- 标签名字有点不一样
- 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
- 开发工具限制:WXML仅能在微信小程序开发工具中预览,而HTML可以在浏览器内预览。
- 组件封装不同:WXML对组件进行了重新封装,为后续的性能优化提供了可能,同时避免开发者写出低质量的代码。
- 没有DOM树:小程序运行在JS Core内,没有DOM树和window对象,没有办法使用相关API。
文章来源地址https://www.toymoban.com/news/detail-488877.html
2.请谈谈WXSS和CSS的异同?
-
新增了rpx尺寸单位 750rpx
-
wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚
-
提供了全局的样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面局部页面 .WXSS 样式仅对当前页面生效
-
WXSS仅支持部分css选择器
.class 和 #idelement并集选择器、后代选择器::after 和 ::before 等伪类选择器
3.请谈谈微信小程序主要目录和文件的作用?
app.js 逻辑文件,主要用来注册小程序全局实例。监听并处理小程序的生命周期函数,声明全局变量等。
app.json 公共设置文件,配置小程序全局设置。底部tab,标题栏和路由等设置。
app.wxss 主样式表文件,类似HTML的css文件。全局配置的样式文件。该文件不是必需的。
小程序的4个页面文件:
.js文件 页面逻辑文件,页面的逻辑,请求和数据处理。
.wxml文件 页面结构文件,用来设计页面的布局、数据绑定等。
.wxss文件 页面样式表文件,用来定义页面中用到的各类样式表。该文件不是必需的。
.json文件 页面配置文件。配置当前页面标题和引入组件。其在页面中不可缺少。
文章来源:https://www.toymoban.com/news/detail-488877.html
4.简单描述下微信小程序的相关文件类型?
微信小程序项目结构主要有四个文件类型:wxml;wxss;json;js
.WXML:是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面结构。
.WXSS:描述 WXML 的组件样式。css使用px、wxss使用rpx
.js:逻辑处理,网络请求。
.json:小程序设置,如页面注册,页面标题及tabBar
5.请谈谈小程序的双向绑定和vue的异同?
大体相同,但小程序之间this.data的属性是不可以同步到视图的,必须调用this.setData()方法
6.微信小程序有哪些传值(传递数据)方法?
1. 页面跳转或重定向时,使用url带参数传递数据(路由传值)
使⽤ 路由wx.navigateTo 和 wx.redirectTo 时,可以通过在 url 后使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔。 然后在⽬标⻚⾯通过在 onLoad 周期中,通过参数来获取传递过来的值。
2. 使用本地存储传递参数
3. 使用全局变量传递数据
使⽤全局变量在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。
在 组件.js 中, 头部 引⼊ const app = getApp();
获取到全局变量直接使⽤app.globalData.key 来进⾏赋值和获取值。
4. 给html元素添加data-*属性来传递值,然后通过e.currentTarget.dataset或onload的param参数获取(data- 名称不能有大写字母,不可以存放对象)
5. 设置id 的方法标识来传值,通过e.currentTarget.id获取设置的id值,然后通过设置全局对象的方式来传递数据
6. 在navigator中添加参数数值
7.bindtap和catchtap的区别?
相同点: 都是点击事件
不同点: bindtap 不会阻⽌冒泡, catchtap 可以阻⽌冒泡。
8.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():关闭所有页面,打开到应用内的某个页面
9.微信小程序与H5的区别?
- 运行环境不同(小程序在微信运行,h5在浏览器运行)
- 开发成本不同(h5需要兼容不同的浏览器)
- 获取系统权限不同(系统级权限可以和小程序无缝衔接)
- 应用在生成环境的运行速度流程(h5需不断对项目优化来提高用户体验)
10.小程序和Vue写法的区别?
-
小程序的路由写在app.json文件里,vue写在route.js里
-
小程序用 src=“{{path}}” 绑定标签属性,vue用 :src=“path” 绑定标签属性
-
小程序用 wx:if=“{{lenth>5}}” 来条件判断,vue用 v-if=“lenth>5” 来条件判断
-
小程序用 wx:for=“{{array}}” 来遍历列表,默认数组的当前项的下标变量名为 index,默认数组当前项的变量名为 item;vue用 v-for=“(item,index) in array” 来条件遍历列表
-
小程序用wx.navigateTo()或wx.rediretTo()跳转页面,vue用this.router.push()或this.router.replace()跳转页面
-
小程序绑定事件传参这标签里加data-变量名="参数值"的属性,事件回调方法取参时使用e.currentTarget.dataset.变量名的方式获取参数值;vue绑定事件传参直接在标签里的事件回调方法后加参数,如@click=“callbackName(参数值)”,事件回调方法取参数只要声明function加上参数名,如callbackName:function(变量名){ },方法体里就可以用变量名直接使用该参数
-
小程序用配合wx:if或wx:for来渲染包含多个元素的内容,vue用配合v-if或v-for来渲染包含多个元素的内容
-
小程序里给data的属性赋值需要使用this.setData(item:1)方法来更新,不能用’=‘直接赋值;小程序调用:this.data.item 。vue给data里的属性赋值可以直接用’=',如this.a=true
-
小程序防止事件冒泡把bindtap改为catchtap就可以了;vue防止事件冒泡用添加事件修饰符来实现,如@click.stop
11.微信小程序怎么缓存数据?
小程序提供了读写本地数据缓存的接口,通过wx.getStorage/wx.getStorageSync 读取本地缓存,通过wx.setStorage/wx.setStorageSync 写数据到缓存,其中Sync后缀的接口表示是同步接口。
14.微信小程序怎么进行网络请求?
微信小程序支持GET,POST等请求。用method可以设置.
微信小程序提供了 wx.request(Object object) 这个API,用于发送网络请求,该API接受一个对象作为参数,该对象包含多个属性,其中常用的有:
url,请求的地址,string类型,必填。
data,请求的参数,可以是一个字符串或一个对象,非必填。
method,请求的方法,string类型,默认值是"GET"。
success,请求成功的回调函数,非必填。
fail,请求失败的回调函数,非必填。
getInfo(){vxwx.request({url: 'https://www.escook.cn/api/get',method:'GET',data:{name: 'zs',age:20},success:(res) => {console.log(res.data)}})},
15.如何封装⼩程序请求
1. 在src目录中新建一个utils目录,在目录中新建一个request.js;
2. 在request.js中首先获取整个小程序的实例(var app = getApp(); )来保证能调用wx所有方法;3. 定义get和post等请求的方法;
4. 在get或者post请求的方法中设置wx.showToast();
5. 通过wx.request来实现get或者post请求,在success中,关闭loading,然后通过回调的形式返回拿到的数据
调用:
首先要导入包
var http=require("../utils/request.js")
在方法中通过http.get方法(参数,回调)来调用
16、小程序的生命周期
1. 请谈谈小程序的生命周期函数(应用 页面的 )5个
onLoad()页面加载时触发,只会调用一次,可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发,一般用来发送数据请求
onReady()页面初次渲染完成时触发,只会调用一次,代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发,如redirectTO或navigateBack到其他页面时
-------------------------
onPullDownRefresh():下拉刷新的钩子函数
onReachBottom():上翻到底的钩子函数
2. 请谈谈小程序的组件生命周期函数
created():组件实例刚刚被创建好时触发。
attached():在组件完全初始化完毕、进入页面节点树后触发。
detached() 组件离开页面节点树后触发。
17.微信小程序模块化?
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
18.微信小程序所有api放在哪里,简单介绍几个api?
小程序全局对象是: wx,所有的 API 都保存在 wx 对象中
例如常用API:
页面跳转: wx.navigateTo()等
设置本地存储:wx.setStorageSync(‘名’,值)
读取本地存储:wx.getStorageSync(‘名’)
wx.request,wx.login 等
19. 简述小程序的原理
小程序分为两个部分webview和appService。
webview用来展现UI,
appService用来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层JSBridge实现通信,完成UI渲染、事件处理
20、小程序的运行机制和更新机制
1.运行机制
热启动 :假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤(挂起状态)。
冷启动:⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况,此时⼩程序需要重新加载启动。
1.1 小程序的冷启动和热启动
1.2小程序前后台
1.3挂起状态
1.4小程序销毁
2.更新机制
其实微信客户端会有若干个时机取检查本地缓存,如果有新版本,那就进行小程序代码包的更新,但如果恰巧发布新版本后没有经过这些时机就打开小程序,那打开可能还会是旧版本的小程序。
2.1 启动时同步更新
-
定期检查发现新版本
-
用户长时间未使用
2.2 启动时异步更新
2.3 开发者手动触发
20.那些方法来提高微信小程序的应用速度?
- 提高页面的加载速度
- 用户行为预测
- 减少默认的data的大小
- 组件化方案
21.分析微信小程序的优劣势?
优势:
无需下载,通过搜索和扫一扫就可以打开
良好的用户体验:打开速度快 ,开发成本比App要低
安卓上可以添加到桌面,与原生App差不多
为用户提供良好的安全保障。
劣势:
限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
依托与微信,无法开发后台管理功能
22、小程序实现下拉刷新有哪几种方法
⽅案 ⼀ :onPullDownRefresh函数
1. 通过在 app.json 中, 将 "enablePullDownRefresh": true, 开启全局下拉刷新。
或者通过在 组件 .json , 将 "enablePullDownRefresh": true, 单组件下拉刷新。
2. 在页面中监听页面下拉事件,跟生命周期同级位置声明 onPullDownRefresh 函数
3. 在刷新完成后关闭下拉刷新效果。stopPullDownRefresh()
// 下拉刷新的事件
onPullDownRefresh() {
// 因为刷新后数据都重新渲染, 那我们要确保最新的数据在第一页
this.queryObj.pagenum = 1
this.goodsList(uni.stopPullDownRefresh)
}
⽅案⼆:
scroll-view :使⽤该滚动组件 ⾃定义刷新,通过 bindscrolltoupper 属性, 当滚动到顶部/左边,会触发 scrolltoupper事件,所以我们可以利⽤这个属性,来实现下拉刷新功能。
23.19.webview中的页面怎么跳转回小程序?
wx.miniProgram.navigateTo({
url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
url:'/pages/index/index'
})
24.小程序的发布流程(开发流程)
- 注册微信小程序账号
- 获取微信小程序的AppID
- 下载微信小程序开发者工具
- 开发小程序
- 去微信公众号配置域名
- 手机浏览
- 代码上传
- 提交审核
- 发布
24.小程序中获取openid的方法?
通过login获取code,再根据code获取openid
25.小程序授权登录流程
授权登录是为了获取用户信息、昵称、以及头像id。若没有授权登录,用户无法正常访问并使用小程序。
1、当用户进入微信小程序时,我们先判断用户是否授权过此小程序:wx.getSetting({(查看是否授权)
2、如果没有授权,我们通过一个按钮来实现授权登录:
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
3、通过bindgetuserinfo事件,我们可以获取到个人的信息、加密偏移数据、加密用户信息(e.detail获取)
getuserinfo(e)
4.用户可以授权登录,也可以取消授权: wx.login()
每次进入小程序,都需要调用登录接口,来检查登录状态,但是只需要打开小程序才需要调 用,所以可以把登录接口放在app.js里面的onLaunch方法里执行
5、根据登录接口返回的code码,判断用户是否新用户:
如果不是新用户,我们就直接保存下token(服务器返回的token);
如果是新用户,我们就要先注册,再登录。
6、当用户注册成功后,再调登录接口,保存token。在有些页面需要使用token
7、在步骤1中,当我们授权过时,我们要看token是否存在
8、当token存在时,我们直接执行逻辑代码
9、当token不存在时,我们就需要登录,登录后判断返回的code码,再根据code码判断用户是否是新用户。最后保存token。
26.小程序的支付是如何实现的
小程序注册,要以公司的身份去注册一个小程序,才有微信支付权限
1.创建订单
请求创建订单的 API 接口:把(订单金额、收货地址、订单中包含的商品信息)发送到服务器
服务器响应的结果:订单编号
2.订单预支付
请求订单预支付的 API 接口:把(订单编号)发送到服务器
服务器响应的结果:订单预支付的参数对象,里面包含了订单支付相关的必要参数
3.发起微信支付
调用 uni.requestPayment() 这个 API,发起微信支付;把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
监听 uni.requestPayment() 这个 API 的 success,fail,complete 回调函数
wx.requestPayment({
'timeStamp': _this.data.order.jsApiParameters.timeStamp, //当前时间戳
'nonceStr' : _this.data.order.jsApiParameters.nonceStr, //随机字符串长度
'package' : _this.data.order.jsApiParameters.package, //统一下单
'signType' : 'MD5', //签名算法,应与后台下单时的值一致
'paySign' : _this.data.order.jsApiParameters.paySign, //签名
'success':function(res){
if(res.errMsg == 'requestPayment:ok'){
wx.navigateTo({
url:'/pages/success/success?order_id='+_this.data.order_id, //跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀
})
}else{
wx.navigateTo({
url:'/pages/error/error?order_id='+_this.data.order_id, //跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀
})
}
},
'fail':function(res){
wx.showToast({
title: '已取消',
duration: 1000,
});
return false;
}
})
27.小程序还有那些功能?
客服功能,录音,视频,音频,地图,定位,拍照,动画,canvas
28. 说出小程序当中常用的UI组件
视图容器组件:view、swiper、swiper-item
基础内容组件:text、icon、rich-text
表单组件:button、form checkbox、input
导航组件:navigator
媒体组件:image
29.什么是分包加载,如何使用分包加载
1.概念 减少首屏加载时间,用户在使用时按需加载
2.使用
1. 在app.json中配置项目分包结构
2. 配置`subpackages`属性
subpackages: {
"root": "分包的根目录",
"pages": [""] // 需要按需加载的包所在路径
}
30. 小程序中如何自定义组件
1. 在根目录新建一个components文件夹,然后在这个文件夹下放置自定义的组件,需要用到某个自定义组件时,就在它里面的json文件中配置 "component": true
2. 在父组件的json文件中的usingComponents中导入这个组件
usingComponents: {
"自定义组件名": "自定义组件所在路径"
}
31. 小程序中如何自定义tabBar
- 首先在app.json中定义tabbar
- 在项目根目录创建自定义tabbar组件
- 在pages下的各个页面组件引入tabbar
32. ⼩程序怎么跟随事件传值
在 ⻚⾯标签上通过 绑定 dataset-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值
<button bindtap="get" data-name="测试"> 拿到传值</button>
get(e){ console.log(e.currentTarget.dataset.name) },
33. vue、小程序、uni-app中的本地存储数据和接受数据是什么
vue:
存储:localstorage.setItem
接收:localstorage.getItem
微信小程序:
存储:wx.setStorage/wx.setStorageSync
接收:wx.getStorage/wx.getStorageSync
uni-app:
存储:uni.setStorage
接收:uni.getStorage
34. 小程序for循环中的key值有什么用
保持列表中项目的特征和状态;
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
36. 微信小程序如何跳转到外部小程序
wx.navigateToMiniProgram(Object object)
37.简述下app.json文件
必须要有这个文件,如果没有这个文件,项目无法运行。
因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。
38.请写出设置导航栏标题的办法
全局 app.json配置 navigationBarTitleText: “”
单个页面json配置 navigationBarTitleText: “”
wx.setNavigationBarTitle({
title: '当前页面'
})
39.没有授权小程序用户信息的情况下,小程序如何展示用户头像和昵称
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>
40.小程序设置tabbar徽标的api
wx.setTabBarBadge({
index: 0,
text: '1'
})
50. 请写出预览图片的api
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
51. 请写出选择地址的api
wx.chooseAddress({
success (res) {
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})
52.小程序转发的方式
1. 通过用户点击右上角 ... 转发
2. 通过 button组件,将open-type属性设置为 share
57. 小程序获取场景值的方法?
let options = wx.getLanchOptionsSync()
58. 小程序onPageScroll方法的使用注意什么
由于此方法调用频繁,不需要时,可以去掉,不要保留空方法,并且使用onPageScroll时,尽量避免使用setData(),尽量减少setData()的使用频次
59. 小程序同步API和异步API使用时注意事项
像wx.setStorageSync这种以Sync结尾的API为同步API,使用时使用try-catch来查看异常,如果判定API为异步,可以在其回调方法success、fail、complete中进行下一步操作
60. 小程序组件有监听属性吗,简述一下
有,observers;可以监听 data或者properties内的数据的变化
observers: {
num(newVal,oldVal){
}
}
到了这里,关于微信小程序面试题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!