微信小程序知识点总结

最新推荐文章于 2024-03-18 22:18:14 发布

zc010107

最新推荐文章于 2024-03-18 22:18:14 发布

阅读量300

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/zc010107/article/details/128027902

版权

1.微信小程序主要目录和文件的作用？

project.config.json：项目配置文件，用的最多的就是配置是否开启https校验
App.js：设置一些全局的基础数据等
App.json：底部tab，标题栏和路由等设置
App.wxss：公共样式，引入iconfont等
pages：里面包含一个个具体的页面
index.json：配置当前页面标题和引入组件
index.wxml：页面结构
index.wxss：页面样式表
index.js：页面的逻辑，请求和数据处理

2.wxml与标准的html的异同？

都是用来描述页面的结构
都由标签，属性等构成
标签名字不一样，且小程序标签更少，单一标签更多
多了一些 wx:if 这样的属性以及{{}} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同，WXML对组件进行了重新封装
小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。

3.WXSS和CSS的异同？

都是用来描述页面的样子
WXSS具有CSS大部分的特性，也做了一些扩充和修改
WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx
WXSS仅支持部分CSS选择器
WXSS提供全局样式与局部样式

4.你是怎么封装微信小程序的数据请求的？

在根目录下创建util目录及api.js文件和apiConfig.js文件
在apiConfig.js封装基础的get，post请求方法，设置请求体
在api中引入apiConfig.js封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出
在具体的页面中导入
在子页面中调用封装的请求数据

5.小程序页面之间有哪些（传值）传递数据的方法？

使用全局遍历实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
或
给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值

6.小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

7.小程序的生命周期函数

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

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

8-1

wxml 模板文件，是框架设计的一套标签预言，结合基础组件，事件系统，可以构建出页面的结构
wxss 样式文件，是一套样式语言，用于描述WXML的组件样式
js脚本逻辑文件。逻辑处理网络请求
json配置文件，小程序设置，如页面注册，页面标题及tabBar

8-2

app.json 整个小程序的全局配置，包括：

pages:[所有页面路径]

网络设置（网络超时事件）

页面表现（页面注册）

window：（背景色，导航样式，默认标题）

底部tab等

8-3

app.js 监听并处理小程序的生命周期函数，声明全局变量

8-4

app.wxss 全局配置的样式文件

9.哪些方法来提高微信小程序的应用速度？

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

10.分析微信小程序的优劣势？

优势

容易上手，基础组件库比较全，基本不需要考虑兼容问题
开发文档比较完善，开发社区比较活跃，支持插件式开发
良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
开发成本比APP要低
为用户提供良好的保障（小程序发布，严格是审查流程）

劣势

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

11.微信小程序和H5的区别？

运行环境不同（小程序在微信运行，h5在浏览器运行）
开发成本不同（h5需要兼容不同的浏览器）
获取系统权限不同（系统级权限可以和小程序无缝衔接）
应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

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

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

13.微信小程序如何实现下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数实现

14.bindtap和catchtap的区别？

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

15.简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

在wxml页面中：跳转新页面，在当前页打开，切换到首页Tab
在js页面中：分为应用内的页面，和tabBar页面
如果上述跳转遇到跳转失败或者无效的问题，请访问：wx.navigateTo/wx.redirectTo无效

16.小程序和Vue写法的区别？

遍历的时候：
小程序wx:for="list",而Vue是v-for="item in list"
调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

17.小程序与原生App比较

小程序的优点：

基于微信平台开发，享受微信自带的流量，这个优点最大
无需安装，只要打开微信就能用，不占手机内存，体验好
开发周期段，一般最多一个月就可以上线完成
开发所需的资金少，所需资金是开发原生APP的一半不到
小程序名称是唯一的，在微信的搜索里权重很高
容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序
发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
开发文档完善，社区活跃
支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

小程序的缺点：

局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
js引用只能使用绝对路径，不能操作DOM