【前端面试】小程序面试题总结

项目结构主要有四个文件类型

WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,
js 逻辑处理,网络请求
json小程序设置,如页面注册,页面标题及tabBar

封装微信小程序的数据请求

将所有的接口放在统一的js文件中并导出
在app.js中创建封装请求数据的方法
在子页面中调用封装的方法请求数据

提高小程序的应用速度

提高页面加载速度
用户行为预测
减少默认data的大小
组件化方案

微信小程序原理

JavaScript:JavaScript的代码运行在微信App中,而不是运行在浏览器中,因此一些H5技术的应用,需要微信App提供对应的API支持,而这限制住了H5技术的应用,且其不能称为严格的H5,可以称其为伪H5,同理,微信提供的独有的某些API,H5也不支持或支持的不是特别好。
WXML:WXML是微信基于XML语法开发的,所以能使用微信提供的现有标签,HTML的标签无法使用。
	与html的异同
		标签名字不一样,且小程序标签更少,单一标签更多
		WXML只能在微信小程序开发者工具中预览,而HTML可以在浏览器内预览
		小程序运行在JS Core内,没有DOM树和windiw对象,小程序中无法使用window对象和document对象。
WXSS:WXSS具有CSS的大部分特性,但并不是所有的都支持,且没有详细文档参考。
	与css不同的地方
		wxss的图片引入需使用外链地址;
		没有Body,样式可直接使用import导入;

解决小程序的异步请求问题

在回调函数中调用下一个组件的函数:

bindtap和catchtap的区别

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡

小程序关联微信公众号如何确定用户的唯一性

使用wx.getUserInfo方法withCredentials为 true 时 可获取encryptedData,里面有 union_id。后端需要进行对称解密

webview的页面跳转到小程序

小程序导航的页面可以通过wx.miniProgram.navigateTo,但默认情况是不会重新加载数据的。
若需加载新数据,则在success属性中输入数据即可
普通页:wx.miniProgram.navigateTo

使用webview直接加载要注意

必须要在小程序后台使用管理员添加业务域名
h5页面跳转至小程序的脚步必须是1.3.1以上
微信分享只可以是小程序的主名称,如要自定义分享内容,需小程序版本在1.7.1以上
h5的支付不可以是微信公众号的appid,必须是小程序的appid,而且用户的openid也必须是用户和小程序的

页面传参

使用全局遍历实现数据传递
页面跳转或重定向时,使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
设置id 的方法标识来传值,通过e.currentTarget.id获取设置的id值,然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值

优点

容易上手,基础组件库比较全,基本不用考虑兼容性问题
开发文档比较完善,社区比较活跃,支持插件式开发
用户体验感好,无需下载
开发成本比app低

劣势

限制较多,如:页面大小不能超过1M,不能打开超过5个层级的页面
样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
依托与微信,无法开发后台管理功能
真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢
后台调试麻烦,因为api接口必须https请求且公网地址

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

数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序
小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件
	注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其他的标签让插件来做

小程序和Vue写法的区别

遍历的时候:小程序wx:for="list",而Vue是v-for="item in list"
调用data模型(赋值)的时候:
小程序:this.data.item // 调用,this.setDate({item:1})//赋值
Vue:this.item //调用,this.item=1 //赋值

授权登录流程

授权,微信登录获取code,微信登录,获取 iv , encryptedData 传到服务器后台,如果没有注册,需要注册。
  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序前端面试题包括以下几个方面的内容: 1. 关于wxml和标准的html的异同:wxml是微信小程序的组件标记语言,而html是网页的标记语言。它们的语法和标签有一些异同,但是主要的区别在于功能和用途上。wxml更加轻量级,专注于小程序的渲染和交互逻辑,而html更加强大,适用于网页开发的各种需求。 2. WXSS和CSS的异同:WXSS是微信小程序的样式语言,CSS是网页的样式表语言。它们的语法和属性有一些异同,但是主要的区别在于单位和选择器的限制上。WXSS使用rpx作为单位,可以根据屏幕宽度进行自适应,而CSS使用像素单位。另外,WXSS对选择器的支持较少,只支持基本的选择器,不支持复杂的选择器。 3. 微信小程序主要目录和文件的作用:微信小程序主要包括app.json、app.js、app.wxss、pages等目录和文件。app.json用来配置小程序的全局配置,app.js是小程序的全局逻辑文件,app.wxss是小程序的全局样式文件,pages目录用来存放小程序的页面文件。 4. 小程序的双向绑定和vue的异同:微信小程序使用setData方法来实现页面数据的双向绑定,而Vue使用v-model指令来实现数据的双向绑定。两者的实现原理和语法有一些异同,但是都可以实现数据的变化同步到页面上。 5. 微信小程序的相关文件类型:微信小程序的相关文件类型包括wxml、wxss、js、json、图片、音频、视频等。wxml文件是组件的模板文件,wxss文件是组件的样式文件,js文件是组件的逻辑文件,json文件是组件的配置文件,图片、音频、视频等文件是组件的资源文件。 6. 微信小程序的传值方法:微信小程序有多种传值方法,包括通过URL传参、通过setData方法传参、通过全局变量传参、通过Storage API传参等。 以上是微信小程序前端面试题的一部分内容,还有其他问题可以根据需要进一步探讨。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【前端面试题——微信小程序】](https://blog.csdn.net/zz130428/article/details/129819232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [2020微信小程序前端面试题汇总](https://blog.csdn.net/guopeisi/article/details/104890221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值