零基础学微信小程序前端（原生JS）：从0到1写第一个可交互页面

优质文章学习记录

— 11 min read
零基础学微信小程序前端（原生JS）：从0到1写第一个可交互页面

目录

一、小程序前端的核心差异

二、前期准备：微信开发者工具搭建

三、核心知识点：小程序前端的目录结构

四、实操：写第一个可交互页面

1. 编写页面结构（index.wxml）

2. 编写页面样式（index.wxss）

3. 编写页面逻辑（index.js）

五、运行测试：看看效果

六、新手常见问题&解决方法

七、入门总结

一、小程序前端的核心差异

和你熟悉的 Web 前端（HTML+CSS+JS）相比，小程序有 3 个核心不同：

  1. 标签不同：HTML 的div/p/span → 小程序的view/text，button等组件是微信封装好的；
  2. 单位不同：Web 的px → 小程序的rpx（自适应不同屏幕，1rpx = 屏幕宽度 / 750）；
  3. 运行环境不同：小程序运行在微信内置的渲染引擎，而非浏览器，所以没有window/document等 DOM API，而是用微信提供的wx.xxx API（如wx.showToast）。

二、前期准备：微信开发者工具搭建

工欲善其事，必先利其器。小程序前端开发最核心的工具就是微信开发者工具，步骤很简单，跟着官方指引来就好。

1. 下载安装：直接去微信公众平台开发者工具页面，下载对应自己系统（Windows/Mac）的版本，一路下一步安装即可，没有复杂配置。

2. 新建测试项目：打开开发者工具，登录自己的微信账号（必须登录，否则无法创建项目），然后点击「+新建项目」，按照提示填写：

  • 项目名称：随便填，我填的是「mini-frontend-demo」（小程序前端demo）；
  • 项目路径：选择自己电脑上的一个空文件夹，方便后续管理；
  • AppID：因为是新手，还没有注册小程序账号，直接选择「测试号」即可（测试号足够我们本地开发和测试，无需审核）；
  • 其他选项：取消勾选「云服务」（暂时用不到），点击「创建」。

3. 熟悉工具界面：创建成功后，会自动进入开发者工具界面，主要分为三个部分（新手重点关注）：

  • 模拟器：实时显示小程序的运行效果，和手机上看到的一致；
  • 编辑器：编写代码的地方，默认会生成一个基础模板；
  • 调试器：类似浏览器的控制台，用来打印日志、排查错误，非常重要。

三、核心知识点：小程序前端的目录结构

刚创建好项目，看到一堆文件可能会懵，其实小程序的目录结构很清晰，核心就两类文件：全局文件和页面文件，新手先记住这几个核心文件即可，不用纠结其他自动生成的文件。

默认项目目录如下（重点标注核心文件）：

重点说明3个核心文件的作用：

  1. index.wxml：页面结构，相当于Web的HTML，但不能用div、p、span这些标签，只能用小程序官方提供的组件，比如view（类似div）、text（类似span）、button（按钮）等；
  2. index.wxss：页面样式，相当于Web的CSS，但有一个关键区别——单位用rpx（自适应单位），而不是px，rpx能自动适配不同尺寸的手机屏幕，1rpx = 屏幕宽度/750，不用自己做适配；
  3. index.js：页面逻辑，用原生JS编写，但不能用window、document等DOM API，小程序提供了专属的wx.xxx API（比如弹窗、跳转），所有页面逻辑都要包裹在Page({})里。

注意！标签的替换

四、实操：写第一个可交互页面

接下来就是最核心的部分，从零编写一个可交互的页面，目标很简单：显示一段初始文本，有一个按钮，点击按钮可以修改文本，还有一个输入框，能实时获取输入内容，点击按钮时一并显示输入的内容。

全程分三步：编写页面结构（wxml）→ 编写页面样式（wxss）→ 编写页面逻辑（js），每一步都贴完整代码，加详细注释，方便大家复制实操。

1. 编写页面结构（index.wxml）

替换pages/index/index.wxml里的默认内容，代码如下（每一行都加了注释，新手能看懂）：

<!-- 容器视图，类似Web的div，用来包裹所有内容 --> <view> <!-- 文本组件，{{msg}}是数据绑定，取值来自index.js里的data.msg --> <text>{{msg}}</text> <!-- 输入框组件，bindinput绑定输入事件，实时获取输入内容 --> <input placeholder="请输入内容（可选）" bindinput="inputHandler" value="{{inputValue}}" /> <!-- 按钮组件，bindtap绑定点击事件（事件名是clickHandler，后续在js里定义） --> <button bindtap="clickHandler">点击修改文本</button> </view>

这里的核心是「数据绑定」，用{{变量名}}的方式，把js里的数据渲染到页面上，后续我们修改js里的变量，页面就会同步更新。

2. 编写页面样式（index.wxss）

替换pages/index/index.wxss里的默认内容，重点用rpx单位，样式尽量简单，贴合新手水平：

/* 页面容器：设置内边距、居中对齐，flex布局方便垂直排列 */ .page-container { padding: 30rpx; display: flex; flex-direction: column; align-items: center; /* 水平居中 */ } /* 文本样式：设置字体大小、颜色，margin-bottom控制与按钮的间距 */ .content-text { font-size: 36rpx; /* 推荐用rpx，自适应屏幕 */ color: #333; /* 深灰色，比纯黑更柔和 */ margin-bottom: 40rpx; /* 与按钮的间距 */ } /* 按钮样式：设置宽高、背景色、圆角，让按钮更美观 */ .operate-btn { width: 600rpx; height: 80rpx; line-height: 50rpx; /* 让文字垂直居中 */ background-color: #07c160; /* 微信绿，贴合小程序风格 */ color: #fff; /* 白色文字 */ border-radius: 40rpx; /* 圆角，更圆润 */ margin-bottom: 30rpx; /* 与输入框的间距 */ } /* 输入框样式：设置边框、内边距，避免太单调 */ .input-box { width: 600rpx; height: 80rpx; border: 1rpx solid #eee; /* 浅灰色边框 */ padding: 0 20rpx; /* 左右内边距，避免文字贴边 */ border-radius: 40rpx; font-size: 32rpx; }

样式这里没什么复杂的，都是基础的CSS属性，重点记住「不用px用rpx」，还有小程序的样式不支持*通配符，刚开始我试了用*重置样式，结果没生效，后来查了资料才知道这个限制。

3. 编写页面逻辑（index.js）

这是最核心的部分，替换pages/index/index.js里的默认内容，代码如下，注释详细，重点讲解数据绑定和事件处理：

// Page()是小程序页面的核心函数，所有页面逻辑都必须包裹在这个函数里 Page({ // 1. 页面初始数据：所有要渲染到页面的变量都存放在这里 // 相当于Web里的data，通过{{变量名}}绑定到wxml页面 data: { msg: "Hello 微信小程序！", // 初始文本，会显示在页面上 inputValue: "" // 输入框的初始值，为空 }, // 2. 按钮点击事件处理函数（对应wxml里的bindtap="clickHandler"） // 函数名必须和bindtap的值完全一致，注意大小写 clickHandler() { // ① 弹出成功提示（小程序内置API，wx.showToast） wx.showToast({ title: '点击成功！', // 提示文本 icon: 'success', // 提示图标（success是绿色对勾，loading是加载中，none是无图标） duration: 1500 // 提示显示时长，单位是毫秒 }); // ② 修改页面数据：重点！必须用this.setData()，不能直接this.data.msg = xxx // 直接修改this.data不会更新页面视图，只有setData才能触发页面重新渲染 this.setData({ msg: "你点击了按钮！输入的内容是：" + this.data.inputValue }); }, // 3. 输入框输入事件处理函数（对应wxml里的bindinput="inputHandler"） // 实时获取输入框的内容，更新到data里的inputValue inputHandler(e) { // e是事件对象，e.detail.value是小程序输入框获取值的固定方式 this.setData({ inputValue: e.detail.value }); }, // 4. 页面生命周期函数：页面加载时自动执行（不用手动调用） // 可以在这里做一些初始化操作，比如请求后端数据 onLoad(options) { console.log("首页加载完成！"); // 在调试器的Console里可以看到这条日志 } });

这里有两个重点：

  • 修改页面数据必须用this.setData()，不能直接赋值（比如this.data.msg = "新文本"，这样页面不会更新）；
  • 事件绑定的函数名必须和wxml里bindtap的值完全一致，大小写敏感，比如我刚开始把clickHandler写成了clickhandler，点击按钮没反应，排查了好久才发现是大小写错了。

五、运行测试：看看效果

写完代码后，点击开发者工具右上角的圈箭头按钮，模拟器里就会显示我们写的页面，效果如下：

  1. 初始状态：显示「Hello 微信小程序！」，下方是输入框，最下方有一个绿色按钮；
  2. 输入测试：在输入框里输入「这是tt测试」；
  3. 点击按钮：弹出的「点击成功！」提示，同时页面上的文本变成「你点击了按钮！输入的内容是：这是tt测试」；
  4. 调试日志：打开调试器的「Console」面板，能看到「首页加载完成！」的日志，方便我们排查错误。

到这里，我们的第一个可交互的小程序页面就完成了！是不是很有成就感？作为零基础新手，能写出这样一个简单的页面，已经迈出了一大步。

六、新手常见问题&解决方法

在实操过程中，我遇到了几个新手常犯的错误，整理出来，帮大家避坑：

问题现象

问题原因

解决方法

页面白屏，调试器报「page not found」

新增页面后，没有在app.json的pages数组里注册

在app.json的pages数组里添加页面路径，比如["pages/index/index"]，顺序越靠前，默认显示哪个页面

点击按钮没反应，调试器没报错

事件绑定函数名写错（大小写不一致），或bindtap写成了bindTap

检查wxml里的bindtap值和js里的函数名完全一致，严格区分大小写

修改data后，页面不更新

直接修改this.data.xxx，没有调用this.setData()

必须用this.setData({ xxx: 新值 })修改数据，才能触发页面重新渲染

样式不生效

使用了*通配符，或样式选择器和wxml里的class名不一致

去掉*通配符，检查选择器和wxml里的class名完全一致

输入框无法获取输入内容

没有绑定bindinput事件，或没有用e.detail.value取值

给input标签添加bindinput事件，在事件处理函数里用e.detail.value获取输入值

七、入门总结

通过这次实操，我终于搞懂了小程序前端的基础逻辑，总结一下核心知识点：

小程序前端核心：wxml（结构）+ wxss（样式）+ js（逻辑），和Web前端类似，但有专属的标签、单位和API；核心技能：数据绑定（{{变量名}}）、事件绑定（bindtap）、setData修改数据；新手避坑：不用HTML标签、不用px单位、修改数据用setData、事件名大小写一致。 

Read more

突破性能瓶颈：llama.cpp多GPU分布式计算优化实践指南

突破性能瓶颈：llama.cpp多GPU分布式计算优化实践指南 【免费下载链接】llama.cppPort of Facebook's LLaMA model in C/C++ 项目地址: https://gitcode.com/GitHub_Trending/ll/llama.cpp 你是否还在为大模型推理时单GPU显存不足而苦恼？是否遇到过模型加载缓慢、生成效率低下的问题？本文将从实战角度出发，系统讲解llama.cpp项目的多GPU性能优化方案，帮你解决分布式推理中的设备调度、显存分配和并行效率三大核心难题。读完本文，你将掌握多GPU环境配置、性能监控与问题诊断的完整流程，让本地大模型部署效率提升300%。 多GPU架构解析：从设备发现到任务调度 llama.cpp通过GGML后端实现跨设备计算调度，其核心机制位于src/llama.cpp的设备管理模块。系统启动时会自动扫描所有可用计算设备，按优先级分为GPU、集成GPU(iGPU)和RPC服务器三类，相关代码逻辑如下： // 设备分类与优先级排序（
部署Qwen3-VL-32b的踩坑实录：多卡跑大模型为何vLLM卡死而llama.cpp却能“大力出奇迹”？

部署Qwen3-VL-32b的踩坑实录：多卡跑大模型为何vLLM卡死而llama.cpp却能“大力出奇迹”？

踩坑实录：多卡跑大模型Qwen-VL，为何vLLM模型加载卡死而llama.cpp奇迹跑通还更快？ 前言：部署经历 针对 Qwen2.5-32B-VL-Instruct 满血版模型的部署实战。 手头的环境是一台配备了 4张 NVIDIA A30（24GB显存） 的服务器。按理说，96GB的总显存足以吞下 FP16 精度的 32B 模型（约65GB权重）。然而，在使用业界标杆 vLLM 进行部署时，系统却陷入了诡异的“死锁”——显存占满，但推理毫无反应，最终超时报错。 尝试切换到 Ollama（底层基于 llama.cpp），奇迹发生了：不仅部署成功，而且运行流畅。这引发了我深深的思考：同样的硬件，同样模型，为何两个主流框架的表现天差地别？ 本文将围绕PCIe通信瓶颈、Tensor Parallelism（张量并行） 与 Pipeline

Stable Diffusion与Z-Image-Turbo部署对比：推理速度与显存占用评测

Stable Diffusion与Z-Image-Turbo部署对比：推理速度与显存占用评测 1. 为什么这场对比值得你花5分钟读完 你是不是也遇到过这样的情况： 想用AI画张图，结果等了快两分钟才出第一张预览； 好不容易跑起来，显存直接飙到98%，连浏览器都卡顿； 换了个提示词，画面崩得莫名其妙，文字渲染像乱码…… 这些问题，在Z-Image-Turbo出现之前，几乎是Stable Diffusion用户的日常。但最近，阿里通义实验室开源的Z-Image-Turbo，悄悄改写了“快”和“稳”的定义——它不是简单地提速，而是从模型结构、推理流程、内存调度三个层面重新设计了一套轻量级文生图范式。 这不是又一个“参数调优”的小改进，而是一次面向真实使用场景的工程重构：8步出图、16GB显存跑满、中英文提示词原生支持、Gradio界面开箱即用。我们实测了同一台A100（40GB）服务器上Stable Diffusion XL（SDXL）与Z-Image-Turbo的完整部署表现，重点盯住两个最影响体验的硬指标：端到端推理耗时和峰值显存占用。 下面不讲论文公式，不列训练细节，只给你

llama.cpp加载多模态gguf模型

llama.cpp预编译包还不支持cuda12.6 llama.cpp的编译，也有各种坑 llama.cpp.python的也需要编译 llama.cpp命令行加载多模态模型 llama-mtmd-cli -m Qwen2.5-VL-3B-Instruct-q8_0.gguf --mmproj Qwen2.5-VL-3B-Instruct-mmproj-f16.gguf -p "Describe this image." --image ./car-1.jpg **模型主gguf文件要和mmporj文件从一个库里下载，否则会有兼容问题，建议从ggml的官方库里下载 Multimodal GGUFs官方库 llama.cpp.python加载多模态模型 看官方文档 要使用LlamaChatHandler类，官方已经写好了不少多模态模型的加载类，比如qwen2.5vl的写法： from llama_cpp import Llama