自学微信小程序第一天

最新推荐文章于 2025-07-23 09:55:12 发布

原创最新推荐文章于 2025-07-23 09:55:12 发布 · 717 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#微信小程序 #notepad++ #小程序

学习目标

微信小程序学习要达成的成果，理解小程序核心开发概念，掌握基础页面搭建与组件使用，能独立完成简单功能模块开发，为后续深入学习和实践规划清晰方向。

小程序简介

小程序是基于微信生态的轻量级应用形态，无需单独下载安装，“即用即走” 。在移动互联网场景中，能快速连接线上线下服务（如线下门店通过小程序实现线上点单、预约），对比传统 App 具备开发成本低、获客便捷（依托微信庞大用户基数与社交传播优势）等特点，小程序应用场景（电商购物、生活服务、工具类小程序）。

小程序项目的基本组成结构

剖析小程序项目典型目录，pages 文件夹存放各页面（每个页面含 .js、.wxml、.wxss、.json 文件），用于承载不同业务功能；app.js 是全局逻辑文件，可定义小程序生命周期函数（如 onLaunch 初始化执行）、全局数据与方法；app.json 配置全局窗口表现（如导航栏标题、颜色）、页面路径列表（管理小程序所有页面路由）；app.wxss 为全局样式文件，设置全局通用样式（如字体、默认边距）。

认识小程序页面

拆解单个页面的组成文件：.wxml 是页面结构文件，用小程序组件（如 <view>、<text> ）描述页面静态结构，类似 HTML 但语法有差异；.wxss 负责页面样式，支持 CSS 语法，还可使用小程序特有的样式导入、尺寸单位（rpx ，适配不同设备屏幕）；.js 文件处理页面逻辑，包含页面生命周期函数（如 onLoad 页面加载时执行）、数据定义、事件处理函数；.json 文件配置页面专属参数（如自定义导航栏、是否开启下拉刷新）。

小程序的宿主环境

说明小程序运行依赖微信客户端提供的宿主环境，包含渲染层和逻辑层。渲染层基于 WebView 渲染 WXML（结构）和 WXSS（样式），负责页面可视化展示；逻辑层采用 JSCore 运行 JS 代码，处理业务逻辑、数据交互。讲解两层间通过微信客户端提供的通信通道实现数据传递（如逻辑层调用 setData 方法更新数据，通知渲染层更新视图），还可介绍宿主环境提供的 API 能力（如调用微信支付、获取用户信息）。

组件 - view和scroll - view组件的基本用法

view 是小程序最基础的容器组件，类似 HTML 的 div，可用于包裹其他组件，实现内容分组。语法上，通过 <view> 标签创建，可设置 class、style 定义样式，示例：

<view class="container" style="background-color: #f0f0f0;"> <text>这是 view 包裹的内容</text> </view>

scroll - view 是可滚动的容器组件，需设置 scroll - x（横向滚动）或 scroll - y（纵向滚动）开启滚动方向，搭配 scroll - top（纵向滚动位置）、scroll - left（横向滚动位置）控制滚动位置。示例纵向滚动：

<scroll-view scroll-y style="height: 200px;"> <view>内容 1</view> <view>内容 2</view> <view>内容 3</view> </scroll-view>

组件 - swiper和swiper - item的基本用法

swiper 是轮播图容器组件，swiper - item 是轮播项，用于实现图片轮播、内容切换效果。swiper 可配置 indicator - dots（是否显示指示点）、autoplay（是否自动轮播）、interval（自动轮播间隔时间）、duration（切换动画时长）等属性。示例：

<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500"> <swiper-item> <image src="/images/banner1.png"></image> </swiper-item> <swiper-item> <image src="/images/banner2.png"></image> </swiper-item> </swiper>

组件 - text和rich - text组件的基本用法

text 组件用于显示普通文本，支持 selectable（文本是否可选中）、space（空格显示方式）等属性。示例：

<text selectable="{{true}}" space="emsp">这是一段可选中、带空格的文本</text>

rich - text 组件可渲染富文本内容，通过 nodes 属性传入 HTML 片段或小程序自定义节点数据，实现复杂文字排版（如包含链接、图片、样式的文本）。示例：

<rich-text nodes="<div style='color: red;'>这是 <a href='https://example.com'>富文本</a> 内容</div>"></rich-text>

text 处理简单文本交互，rich - text 渲染复杂富文本。

组件 - button和image组件的基本用法

button 组件是按钮，支持 type（默认、primary、warn 等样式类型）、size（按钮尺寸）、bindtap（绑定点击事件）等属性。示例：

<button type="primary" size="mini" bindtap="handleTap">点击我</button>

在 JS 文件中定义 handleTap 函数处理点击逻辑：

Page({ handleTap() { wx.showToast({ title: '按钮被点击' }); } })

image 组件用于展示图片，src 属性设置图片路径（本地或网络），mode 属性控制图片裁剪、缩放模式（如 aspectFill 保持纵横比填充、widthFix 宽度固定高度自适应）。示例：

<image src="/images/avatar.png" mode="aspectFill"></image> <image src="https://example.com/bg.jpg" mode="widthFix"></image>

小程序 API 的3大分类

网络 API

以 wx.request 为代表，用于小程序与服务器交互，发送 HTTP 请求获取或提交数据。示例：

wx.request({ url: 'https://example.com/api/data', method: 'GET', success(res) { console.log('请求成功', res.data); }, fail(err) { console.error('请求失败', err); } })

设备 API

如 wx.scanCode（调用摄像头扫码）、wx.getLocation（获取用户地理位置），调用手机硬件能力。示例获取位置：

wx.getLocation({ type: 'wgs84', success(res) { console.log('纬度', res.latitude, '经度', res.longitude); } })

界面 API

像 wx.showToast（显示提示框）、wx.setNavigationBarTitle（设置导航栏标题），用于控制小程序界面交互。示例显示提示：

wx.showToast({ title: '操作成功', icon: 'success', duration: 2000 })

协同工作 - 小程序权限管理的概念以及成员管理的两个方面

权限管理包含 功能权限 和 管理权限：功能权限指小程序调用用户敏感信息（如头像、手机号）、设备能力（摄像头、麦克风）时，需用户授权，遵循微信授权流程（通过 wx.authorize 等 API 申请）；管理权限围绕小程序项目成员，不同角色（开发者、体验者、管理员）有不同操作权限（如管理员可发布版本，开发者可开发调试）。成员管理涵盖 成员添加/删除（在微信公众平台 “用户身份 - 成员管理” 操作，填写成员微信号或邮箱邀请）和 权限设置（为不同成员分配对应角色，控制其对项目的操作范围），保障项目开发与运营安全。

协同工作 - 开发者的权限说明以及如何维护项目成员

开发者在小程序项目中，可进行代码开发、调试、提交审核等操作，但通常无发布版本、修改项目设置等高权限。维护项目成员时，登录微信公众平台，进入小程序后台 “用户身份 - 成员管理”：点击 “添加成员”，输入成员信息并选择角色（开发者、体验者等）发送邀请；对于现有成员，可编辑其角色调整权限，或移除成员。演示操作流程，确保团队协同开发中，成员权限合理配置，项目有序推进。

发布 - 了解小程序的版本阶段与上线的主要步骤

小程序版本分 开发版（仅开发者可在工具中调试，用于开发测试）、体验版（可邀请指定成员体验，需上传代码后在后台设置体验人员）、正式版（面向所有微信用户发布）。上线步骤：开发完成后，在开发者工具点击 “上传”，选择版本号、填写更新描述；到微信公众平台小程序后台，进入 “管理 - 版本管理”，将开发版提交审核；审核通过后，在 “版本管理” 中点击 “发布”，正式版上线。