前端复习笔记 —— 微信小程序

优质文章学习记录

— 14 min read
前端复习笔记 —— 微信小程序

微信小程序开放文档

官方文档：微信开放文档
包含如何注册，开发，运营等；

微信小程序基础介绍

  • 微信小程序是一种轻量级的应用程序，它可以在微信客户端内部运行，不需要下载和安装。
  • 小程序的原理是通过微信客户端内置的小程序引擎来解析和运行小程序代码，实现小程序的展示和交互功能。
  • 小程序代码采用的是类似于网页开发的技术，主要是HTML、CSS和JavaScript，同时也支持一些特定的API和组件，如微信登录、支付、地图等。
  • 小程序的运行环境是在微信客户端内部，因此具有较高的安全性和稳定性，同时也能够充分利用微信社交平台的优势，实现更好的用户体验和推广效果。

Skyline 渲染引擎

官方文档：Skyline 渲染引擎

小程序与VUE写法上的区别

  1. 语法不同：小程序使用的是WXML和WXSS，而Vue使用的是HTML和CSS。
  2. 数据绑定方式不同：小程序使用的是双向数据绑定，而Vue使用的是单向数据流。
  3. 组件化方式不同：小程序的组件化方式是基于模板的，而Vue的组件化方式是基于组件的。
  4. 生命周期不同：小程序和Vue的生命周期有所不同，需要开发者注意区别。
  5. 调试方式不同：小程序需要使用微信开发者工具进行调试，而Vue可以使用浏览器进行调试。

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

  • 小程序的双向绑定需要使用setData()方法来更新数据，而vue则可以直接使用v-model指令来实现双向绑定。
  • 小程序的双向绑定只能在组件内部进行，而vue可以在整个应用程序中使用。

小程序与普通网页的区别

小程序与普通网页在架构和运行机制上有显著区别，主要体现在双线程架构和沙箱机制上：
1. 双线程架构
小程序采用双线程架构，分为逻辑层和视图层，分别运行在不同的线程中：

  • 逻辑层（App Service） ：
    • 负责处理业务逻辑、数据请求等。
    • 运行在独立的 JavaScript 线程中，与视图层分离。
    • 通过 API 与视图层通信，确保逻辑处理不影响界面渲染。
  • 视图层（View） ：
    • 负责界面渲染和用户交互。
    • 运行在 WebView 线程中，通过 WXML 和 WXSS 构建界面。
    • 通过事件机制与逻辑层通信，响应用户操作。
  • 优势：
    • 性能提升：逻辑层与视图层分离，避免阻塞，提升流畅度。
    • 安全性增强：逻辑层无法直接操作 DOM，减少安全风险。

2. 沙箱机制
小程序的 JavaScript 运行在沙箱环境中，与普通网页的 JavaScript 有以下区别：

  • 受限的 DOM/BOM 访问： ：
    • 小程序逻辑层无法直接操作 DOM 或 BOM，只能通过 API 间接操作。
    • 普通网页的 JavaScript 可以自由操作 DOM 和 BOM。
  • 受限的网络请求：
    • 小程序的网络请求需通过特定 API 进行，且受域名白名单限制。
    • 普通网页可以自由发起网络请求。
  • 受限的存储访问：
    • 小程序的本地存储通过 API 进行，数据隔离，避免冲突。
    • 普通网页的 localStorage 和 IndexedDB 可自由访问。
  • 优势：
    • 安全性：限制敏感操作，防止恶意代码破坏。
    • 稳定性：隔离运行环境，避免冲突，提升稳定性。

wxml与标准的html的异同

  1. wxml是微信小程序的模板语言，而html是网页的标记语言。
  2. wxml的标签和属性与html有些不同，例如wxml中使用的是wx:bind而不是html中的onchange。
  3. wxml中的样式使用的是wxss，而html中使用的是css。
  4. wxml中的数据绑定使用的是{{}}，而html中使用的是{}。
  5. wxml中的事件绑定使用的是bind，而html中使用的是on。
  6. wxml中的组件使用的是自定义组件，而html中使用的是标准的html标签…

小程序的wxss和css的异同

  1. 选择器的定义：wxss中只支持部分选择器，如class、id、标签名等，不支持伪类选择器和后代选择器等。
  2. 尺寸单位：wxss中支持rpx单位，可以根据屏幕宽度自适应调整大小，而css中只支持px、em、rem等固定单位。
  3. 样式导入：wxss中可以通过@import导入外部样式表，而css中只能通过标签引入。
  4. 样式继承：wxss中不支持样式继承，而css中可以通过继承规则实现样式继承。

微信小程序的相关文件类型

微信小程序的相关文件类型包括：

  • wxml：描述小程序的结构，存放类如HTML文件；
  • wxss：描述小程序的样式，类如css样式；
  • js：描述小程序的逻辑；
  • json：用于配置小程序的全局配置；
  • wxs：用于编写小程序的模块化脚本；
  • 还有图片、音频、视频等等。

微信小程序主要文件结构

  1. app.js：小程序的入口文件，用于初始化小程序。
  2. app.json：小程序的全局配置文件，包括小程序的页面路径、窗口背景色、导航栏样式等。
  3. app.wxss：小程序的全局样式文件，定义小程序的公共样式。默认，自定义组件的样式配置为"styleIsolation": “isolated”,只受当前wxss 的影响。
  4. pages/：小程序的页面目录，包含小程序的所有页面。
  5. utils/：小程序的工具目录，包含小程序的所有工具函数。
  6. project.config.json：小程序的项目配置文件，包括小程序的appid、编译设置等。

小程序框架系统

  • 视图层‌：负责页面渲染。由 WXML 与 WXSS 编写，由组件来进行展示,用也有自己专属的标签。
    • 数据绑定：{{data}}，支持简单运算和三元表达式；
    • 条件渲染:wx:if;在写法上有自己的书写方式，区别于vue，react等；
    • 列表渲染:wx:for；
<viewwx:if="{{length > 5}}"> 1 </view><viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
  • ‌逻辑层‌： 也称App Service，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。逻辑层并非运行在浏览器中，如 window，document 等无法使用。
    • setData ：
      • 组件的 setData 只会引起当前组件和子组件的更新；
      • setData 应只传入发生变化的字段；
      • 小程序逻辑层是单线程运行的，后台态页面去 setData 也会抢占前台页面的运行资源；

小程序生命周期

官方文档：架构接口

  1. onLaunch：小程序初始化完成时触发，全局只触发一次
  2. onShow：小程序启动或从后台进入前台时触发
  3. onHide：小程序从前台进入后台时触发
  4. onError：小程序发生错误时触发
  5. onPageNotFound：页面不存在时触发
  1. onLoad：页面加载时触发
  2. onShow：页面显示时触发
  3. onReady：页面初次渲染完成时触发
  4. onHide：页面隐藏时触发
  5. onUnload：页面卸载时触发
  6. onPullDownRefresh：用户下拉刷新时触发
  7. onReachBottom：页面上拉触底时触发
  8. onShareAppMessage：用户点击右上角转发时触发
  9. onShareTimeline：用户点击右上角转发到朋友圈时触发
  10. onTabItemTap：用户点击tab时触发
  11. onResize：小程序窗口大小变化时触发
  12. onKeyboardHeightChange：键盘高度变化时触发
  13. onAddToFavorites：用户收藏时触发…
  1. 组件生命周期‌ lifetimes：created、attached、ready、moved、detached;
    • 注意：created中不能setData,请在attached中进行初始化操作;
  2. 组件所在页面的生命周期‌ pageLifetimes：show、hide、resize、routeDone(页面路由动画完成时);
    - 注意：自定义 tabBar 的 pageLifetime 不会触发;
// 小程序生命周期函数App({onLaunch:function(){ console.log('App Launch')}})Page({onLoad:function(){ console.log('Page Load')}})Component({lifetimes:{attached:function(){// 在组件实例进入页面节点树时执行},// ...})

小程序常用API

1. wx.request：发送网络请求 2. wx.navigateTo：跳转到指定页面 3. wx.showToast：显示消息提示框 4. wx.showLoading：加载框 5. wx.hideLoading：隐藏加载框 6. wx.getStorageSync：获取本地缓存数据 7. wx.setStorageSync：设置本地缓存数据 8. wx.getSystemInfo：获取系统信息 9. wx.getLocation：获取地理位置 10 wx.chooseImage选择图片 11. wx.previewImage：预览图片 12. wx.createAnimation：创建动画 13. wx.createCanvasContext：创建画布上下文 14. wx.getNetworkType：获取网络类型 15. wx.getStorageInfo：获取本地缓存信息 16. wxModal：显示模态对话框 17. wx.showActionSheet：显示操作菜单 18. wx.getSetting：获取用户权限设置 19. wx.openSetting：打开权限设置页面 20. wx.setNavigationBarTitle：设置导航栏标题 // ...

小程序事件绑定

  • 事件绑定：
    • bindtap 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    • catchtap 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  • 事件传参：
    • 通过 data-* 属性传递参数。（ event.currentTarget.dataset.**）

小程序写在标签的属性data值，要注意哪些方面？

  1. data值必须是字符串类型，不能是其他类型；
  2. data值的命名要符合小程序的命名规范，不能使用特殊字符和中文；
  3. data值的命名要有意义，方便后期维护和开发；
  4. data值的大小不能超过1024KB，否则会导致小程序运行缓慢。

小程序路由

微信小程序有五种路由：navigateTo、redirectTo、switchTab、reLaunch和navigateBack。

// navigateTo:进行页面跳转，保留当前页面，跳转到应用内的某个页面。 wx.navigateTo({url:'/pages/index/index'})// redirectTo:进行页面跳转，关闭当前页面，跳转到应用内的某个页面。 wx.redirectTo({url:'/pages/index/index'})// switchTab:进行页面跳转，跳转到应用内的某个tab页面，并关闭其他所有非tab页面。 wx.switchTab({url:'/pages/index/index'})// reLaunch:进行页面跳转，关闭所有页面，打开到应用内的某个页面。 wx.reLaunch({url:'/pages/index/index'})// navigateBack:返回上一页。 wx.navigateBack({delta:1// 返回的页面数，1表示返回上一页，表示返回上两页，依此类推})

小程序进行页面传值

4、使用事件传递数据：通过事件机制来传递数据

// 设置this.triggerEvent('myevent',{data:'value'})//获取this.on('myevent',function(event){ console.log(event.data)// 输出 value})

3、使用缓存传递数据：使用小程序的缓存API来存储数据，然后在需要使用的页面读取缓存数据；

// 设置缓存 wx.setStorageSync('key','value')//获取缓存var value = wx.getStorageSync('key')

2、使用全局变量传递数据：将数据存储在app.js中的全局变量中，在需要使用的页面直接访问全局变量获取数据；

// app.js中定义全局变量App({globalData:{userInfo:null}})//在页面中获取全局变量var userInfo =getApp().globalData.userInfo

1、使用页面跳转时传递参数：通过以上路由跳转的传参url的query参数传递数据；

 wx.navigateTo({url:'pages/detail/detail?id=123'// 跳转时携带参数?id=123})// 目标页面的onLoad生命周期函数中可以通过options参数获取传递的参数onLoad:function(options){ console.log(options.id)// 输出 123}

登录

  1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。 code 只能使用一次。
  2. 小程序将code发送到开发者服务器。
  3. 开发者服务器调用微信登录凭证校验API，调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。
  4. 开发者服务器生成自己的登录态（例如token），并将token、openid等信息保存到自己的数据库中。
  5. 开发者服务器将token返回给小程序。
  6. 小程序使用token发起后续的业务请求。
  • Tips：小程序只能获取到用户的openid等基本信息，不能获取到用户的其他信息，如昵称、头像等。如果需要获取其他信息，需要引导用户进行微信公众号授权。（需调用其他的wxapi去获取）

安全注意事项

  1. 不能直接将用户的openid等信息保存在小程序端，必须将其保存在开发者服务器上。
  2. 需要对用户的信息进行加密，保证其不被篡改。
  3. 需要设置有效期，定期更新token，避免被恶意利用。

授权操作

部分接口需要经过用户授权同意才能调用：

  • 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
  • 如果用户已授权，可以直接调用接口；
  • 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。

性能

常用的提高性能的方法

  1. 使用小程序自带的性能分析工具，对小程序进行性能分析，找出性能瓶颈并进行优化。
  2. 减少 setData 频率和数据量,减少小程序的请求次数，尽量使用缓存，减少网络请求的时间。
  3. 对小程序进行代码压缩，图片懒加载与压缩，减少代码体积，提高加载速度。使用小程序提供的组件和API，避免自己写复杂的组件和逻辑，提高小程序的运行效率。
  4. 使用分包加载（subpackages）将不常用的页面和组件分离出来，减少首次加载时间。
  5. 利用骨架屏（skeleton screen）提升用户体验。

分包

分包加载
每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

  • 整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
  • 单个分包/主包大小不能超过 2M

性能相关官方文档：

合理使用setData
官方开放文档中涉及性能诊断，渲染，资源加载优化等方案如上地址；

Read more

从「AI改变世界」到「AI帮我改Bug」：一个小厂架构师的Agent落地实战

从「AI改变世界」到「AI帮我改Bug」：一个小厂架构师的Agent落地实战

凌晨两点的顿悟：AI不是魔法，是工具 上周三凌晨两点，我坐在书房里揉着发涨的太阳穴——创业团队的产品刚上2.0版本，客户反馈的Bug堆了满满一屏幕。女儿的乐高积木还散在客厅地板上，老父亲的呼噜声从隔壁房间传来，而我面前的电脑屏幕上，一个红色的错误提示正在闪烁。 「要是有个AI能帮我自动定位Bug就好了。」我对着空气吐槽，顺手又灌了一口冰咖啡。 三个月前，我也是这么想的。那时候AI Agent的概念正火，我在各种技术大会上听了无数次「Agent将颠覆软件开发」的演讲。回到公司后，我拍着胸脯跟团队说：「咱们也搞个AI Agent，让它帮我们写代码、测Bug、甚至做需求分析！」 现在想来，当时的自己简直像个刚毕业的愣头青——热情有余，务实不足。 从「大而全」到「小而美」：我的Agent落地三步走 落地流程可视化 遇到问题 遇到问题 遇到问题 接入错误日志系统 懂代码库结构 全能Agent幻想 系统启动慢 代码质量差 功能臆想 反思与调整 找到最小可用场景
AI的提示词专栏：Prompt 辅助的实体识别（NER）案例

AI的提示词专栏：Prompt 辅助的实体识别（NER）案例

AI的提示词专栏：Prompt 辅助的实体识别（NER）案例 本文围绕 Prompt 辅助的实体识别（NER）展开，先介绍 NER 的核心定义，即从非结构化文本提取特定意义实体并归类，阐述其在多行业的价值，对比传统 NER 与 Prompt 辅助 NER 的差异。接着提出 Prompt 辅助 NER 需遵循目标明确、约束清晰、示例引导的设计原则。随后通过金融、医疗、法律领域的实战案例，展示 Prompt 设计、预期输出及技巧点。还分析常见问题与解决方案，分享结合领域词典、多轮对话、Logit Bias 参数等进阶技巧，最后给出新手入门、行业应用等实践建议，为相关 NLP 任务提供实体数据支撑。 人工智能专栏介绍     人工智能学习合集专栏是 AI

如何借助AI完成测试用例的生成？实测高效落地指南

作为一名测试从业者，想必你也有过这样的困扰：重复编写常规功能的测试用例，耗时又耗力；面对复杂业务逻辑，容易遗漏边缘场景；需求频繁迭代时，用例更新跟不上节奏，常常陷入“加班写用例、熬夜改用例”的内耗里。 而现在，生成式AI的爆发的已经彻底改变了测试用例生成的传统模式——它能快速批量生成用例、覆盖更多人工易忽略的场景，还能适配需求迭代快速更新，将测试人员从重复劳动中解放出来，转向更核心的质量策略设计。但很多人尝试后却反馈：“把需求丢给AI，生成的用例驴唇不对马嘴”“看似全面，实际很多无法执行”。 其实，AI生成测试用例的核心不是“输入→输出”的简单操作，而是“人机协同”的高效配合：AI负责规模化生产，人负责搭建框架、把控质量。今天就结合我的实测经验，手把手教你如何借助AI高效生成测试用例，避开常见坑，真正实现提效不内耗。 一、先搞懂：AI生成测试用例的底层逻辑（避免踩错第一步） 很多人用不好AI的核心原因，是误以为AI能“读懂所有需求”，其实它的本质是“基于已有规则和数据，模仿人类测试思维生成用例”。其底层主要依赖三大技术，
一个人就是一支影视团队：实测国内最强影视级 AI 视频创作平台 TapNow——告别抽卡，导演级精准控制

一个人就是一支影视团队：实测国内最强影视级 AI 视频创作平台 TapNow——告别抽卡，导演级精准控制

实测国内最强影视级 AI 视频平台 TapNow：告别“盲盒抽卡”，实现导演级精准调度         在过去的一年里，文生视频赛道经历了爆发式增长。但对于真正需要将 AI 投入到生产环境中的创作者、产品经理和开发者来说，目前的 AI 视频工具普遍存在一个致命痛点——不可控。        跑偏的物理规律、诡异的肢体形变、如同“开盲盒”般的提示词玄学，让很多原本充满创意的构想，最终沦为废弃的半成品。如果你也受够了这种低效的“抽卡式”创作，那么今天介绍的这款号称国内最强影视级 AI 视频创作平台——TapNow，或许能彻底重塑你的工作流。 核心痛点突破：从“AI 幻觉”到真正的物理一致性 技术社区的受众深知，评价一个 AI 视频大模型底座的强弱，不仅看它能生成多惊艳的单帧，更要看它在长镜头下的时空一致性。 TapNow 在底层架构上进行了深度优化，重点解决了以下三个核心问题： 1. 极高保真度的物理交互： 无论是光影在水面的流动、烟雾的自然消散，