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

优质文章学习记录

— 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

实现Python将csv数据导入到Neo4j

使用Py2neo库导入CSV数据到Neo4j 安装Py2neo库 确保已安装Py2neo库，可通过以下命令安装： pip install py2neo 建立Neo4j连接 创建与Neo4j数据库的连接： from py2neo import Graph graph = Graph("bolt://localhost:7687", auth=("username", "password")) 读取CSV文件 使用Pandas读取CSV文件： import pandas as pd data = pd.read_csv("data.csv") 创建节点和关系 根据CSV结构创建节点和关系： from py2neo import Node, Relationship for _, row
Xilinx FPGA ISERDES 使用详细介绍

Xilinx FPGA ISERDES 使用详细介绍

Xilinx FPGA ISERDES 使用详细介绍 ISERDES（Input Serializer/Deserializer）是 Xilinx FPGA I/O 逻辑（IOLOGIC）中的一个专用硬核原语，用于实现高速串行数据到低速并行数据的转换。它是实现源同步接口（如 LVDS、DDR 存储器接口、ADC 接口、MIPI 等）的核心组件。 与吉比特收发器（GTX/GTH）不同，ISERDES 属于 SelectIO 资源，通常用于处理几百 Mbps 到 1.6 Gbps 左右的数据速率。 1. 核心功能与作用 在高速接口设计中，外部进入 FPGA 的串行数据频率很高（例如 600MHz
【征文计划】AR健身教练：形随心动 - 基于Rokid CXR-M SDK的实践落地

【征文计划】AR健身教练：形随心动 - 基于Rokid CXR-M SDK的实践落地

一、项目背景与创意起源 在当今快节奏的都市生活中，健身已成为许多人保持健康的重要方式。然而，居家健身面临一个普遍痛点：缺乏专业指导，容易因动作不规范导致运动损伤，同时低头看手机或平板的体验也大大降低了健身的沉浸感和效率。 根据《2024年中国健身行业白皮书》显示，超过65%的居家健身用户表示"缺乏专业指导"是他们放弃健身的主要原因。而Rokid Glasses作为一款轻量级AR眼镜，其独特的"抬头即见"交互方式，为解决这一问题提供了绝佳的硬件基础。 "形随心动"创意的诞生源于一个简单但关键的观察：如果能将专业教练"投射"到用户视野中，实时指导动作，同时提供直观的数据反馈，那么居家健身体验将发生质的飞跃。通过Rokid CXR-M SDK的AI场景、自定义页面和提词器功能，我们能够实现这一愿景。 二、Rokid CXR-M SDK 相关 1. Rokid
Stable Diffusion WebUI 本地部署完整教程

Stable Diffusion WebUI 本地部署完整教程

Stable Diffusion WebUI 本地部署完整教程（AUTOMATIC1111 版） 本教程基于 Windows 系统，适合 AI 绘画爱好者或初学者，旨在帮助大家从零部署并运行本地的 Stable Diffusion 模型界面（Web UI）。我们将从克隆项目、配置环境到运行界面，并附上常见网络问题的解决方案。 一、准备工作 1. 安装依赖 * Python 3.10.x * Git（推荐官网下载最新版） * 显卡驱动 + CUDA（NVIDIA 用户，建议驱动更新到最新版） 安装好后，确保 Python 和 Git 都加入了系统环境变量。 二、克隆项目仓库 使用如下命令克隆 AUTOMATIC1111 的 Web UI 项目：