【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter2 小程序核心

1 尺寸单位和样式

1.1 创建小程序项目-纯净环境

// 该删的删掉。

1.2 尺寸单位

# 小程序内 手机屏幕大小可能不一样，使用px像素就会出现样式问题 --> 小程序统一了整个宽度，即750rpx，屏幕一半则是375rpx -->因此不管什么手机都可以等比例缩放# 宽高尺寸都用rpx代替# 高度没有固定值，因为屏幕可以下滑# 注意 不推荐样式写在标签里，推荐写在.wxss文件中

在这里插入图片描述

1.3 样式

1.3.1 全局样式 app.wxss

# 1 在app.wxss里写css样式# 2 整个小程序都生效

示例，my-view会全局生效，在index和my使用都会生效。

.my-view {width: 100rpx;height: 300rpx;background-color: #9312e2;
}

index页
在这里插入图片描述
my页
在这里插入图片描述

1.3.2 局部样式 页面.wxss

# 1 在此处写css样式，只在当前页面生效

可以自行尝试。

2 首页案例

# text span
# image img
# view div
# button
# swiper

2.1 button

https://developers.weixin.qq.com/miniprogram/dev/component/button.html
在这里插入图片描述
注意：一个boolean类型的属性，只要出现就是true。
在这里插入图片描述

2.2 swiper&swiper-item

轮播图，参考官方文档实现。

2.3 首页提示板块

轮播图部分+欢迎语+图标tips，简单页面实现，跳过。

2.4 flex布局

跳过。

2.5 通知布局

简单页面实现，跳过。

2.6 底部布局

简单页面实现，跳过。

3 小程序引入矢量图

# 使用 阿里 矢量库图标
# 1 打开https://www.iconfont.cn/-注册# 2 搜索想要的图标-加入购物车-在购物车中添加至项目# 3 我的项目-项目设置-打开base64# 4 选择font class - 生成代码 - 点击链接地址打开# 5 链接打开的内容复制到项目中-static\css\font.wxss# 6 在app.wxss引入
@import "/static/css/font.css"# 7 在要用图标的位置，使用text组件
<text class="iconfont icon-tips"></text>

3.1 阿里矢量图库

https://www.iconfont.cn/
1 找到合适的图标，添加购物车
在这里插入图片描述

2 打开购物车，添加至项目
在这里插入图片描述
3 项目设置，选择base64，保存
如果不选择base64，则步骤4生成的代码里的src是远端地址。

4 生成代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打开链接
在这里插入图片描述
如果项目设置未勾选base64，则生成的链接如下。
在这里插入图片描述

3.2 使用图标

补充-引入css文件

1 步骤1 新建文件 static-css-font.wxss
注意：微信小程序不识别css文件。
static\css\font.wxss

@font-face {font-family: "iconfont"; /* Project id 4930561 */src: url('//at.alicdn.com/t/c/font_4930561_6h4rwrdvx8h.woff2?t=1748010365635') format('woff2'),url('//at.alicdn.com/t/c/font_4930561_6h4rwrdvx8h.woff?t=1748010365635') format('woff'),url('//at.alicdn.com/t/c/font_4930561_6h4rwrdvx8h.ttf?t=1748010365635') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-tips:before {content: "\e600";}.icon-icon_tips_alarm:before {content: "\e65d";}

base64

@font-face {font-family: "iconfont"; /* Project id 4930561 */src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANoAAsAAAAAB1wAAAMZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqCLII5ATYCJAMMCwgABCAFhGcHQBufBhHVmyPIvsBxnrQs3bORbaUkMDEaFWghGL+CtWACEgAAAAAggufXaPP+yplJFo13QBKVRiKSxEohJBKpEMUyef///dz9U43ioYpId2urYkDaew0NRazuN9TipFGJXjnwfLKxd/wLABvrtELHqrNaukWr1mIJOgNgaU3PFki4FPSTLPDGCkg9Jg+cy8hVSLO/P5WTTvwiz0p1WjbHxA8WLxUD2jE2lbBXD5BXQXYRf/SiXhGot8qJchB8fFHr/ZJUakNDqEFaGvdbsa9G2S+Xs6laoURX5uKNgvQqveJ1+P34Z71YJEWG7HOifhWpz08/L1Av1YXsG58isKMTCmRY3JgxLrbbT0Pi+CKq+jp5c7mlXEiThv6rUGoqyy3/8RJRIsWNYJZNJH5yBQQ/L7whgQyUqMFF4BPL6czMZe1dHZ5jod0XhP/68h8//vufUS9vo/iCopXrEuHLHI3PM4by4yN8snKMDlPjQ3RMEM/P+AhetHXgN+bQ6fgMX6ycZzif3PVT3yIxmZCxu+kJoyh564iCrGn0jjxQ7tBy7V/xW19VrJbQXvu0k6VcWdZtHyVha2Crf9rQWonvPpceT9G6wx2+uH8y+PFnwGjc3Xhdtdkie+PXEQWDq6uG/bcU77hkZyN9Rz8aq/Y93ACq9/nIE1B9zVV2fw0zrnV794XR+n/t0uD7ScN66KveN+BGtedsD36E4jyIzc0AWV4ndRsEMhuZLAn1NESFuNu9DVd2wMWEWh0pJDUGIFNrnMg581BosA6lWptQb0FgfYMObYjIJ0xbYyC0OoKk2RfItHogcs4SCt3eodTqD+qdJAa7NZguJTwx+oIRBH+QhnVFjkpCuk8YfxU+V0XekHXKhsA2rGLqBivkMebo79gRISCuS7gWz8OiqKHhOsNQjESkWZom1X3ECOtSnRh9wQiCP0jDuiIfL/nfe8L4q/AZJN7irFOWPtiGBRA38grquZF99HfsiBAQM8kSrmUrFka8hqZ+WIahGMmAaLM0KY5QubG8sny5fTAjCxJDpVo/Txs9OneZG2td/3lspVIAAAA=') format('woff2'),url('//at.alicdn.com/t/c/font_4930561_o6yk2374pk.woff?t=1748010258077') format('woff'),url('//at.alicdn.com/t/c/font_4930561_o6yk2374pk.ttf?t=1748010258077') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-tips:before {content: "\e600";}.icon-icon_tips_alarm:before {content: "\e65d";}

2 在app.wxss里引入
app.wxss

@import "/static/css/font.css"

使用图标

class1
在这里插入图片描述
class2
在这里插入图片描述
pages\index\index.wxml

<text class="iconfont icon-tips"></text>

tips

注意，以下写法图标需去远端下载，
在这里插入图片描述
控制台会报错（错误2）
在这里插入图片描述

因此转用base64方式，见3.1
如此控制台不再报错，下图。
在这里插入图片描述

4 事件

4.1 绑定

# 1 按钮或某些组件，点击-触发事件执行-打印xx-请求接口...# 2 绑定事件## 1 pages\my\my.wxml-<button bind:tap="handleConsole"></button>## 绑定tap点击事件## handleConsole在.js文件实现## 2 pages\my\my.js// pages/my/my.jsPage({handleConsole() {console.log('打印xx')},})
# 3 bind:tap="handleConsole" 简写→ bindtap="handleConsole-省略了冒号

实现
在这里插入图片描述
解释

// pages/my/my.jsPage({handleConsole() {console.log('打印xx')},})

由于es6的语法，

var name='tutu';
var obj={name
}

因此函数写法如下

var name='tutu';
var obj={name,handleConsole:function() {}
}
// 简写为
var obj={name,handleConsole() {},
}
// 此时key值是handleConsole，value值是handleConsole()
// 对象里是这样的写法，因此函数末尾分隔使用逗号,

4.2 事件冒泡

# 1 父组件引用子组件-子组件绑定事件-父组件绑定事件-点击子组件 --> 子组件事件触发 -->父组件事件也会触发-例子：div里有个button，各绑定一个事件，点击div（非button区域）不会触发button事件，而点击button事件会触发div事件和button事件-问题：点击button不希望触发div事件-解决思路：阻止事件冒泡# 2 阻止事件冒泡# 使用catch阻止事件冒泡## wxml-<button catch:tap="handleConsole"></button>

4.3 事件对象&传参

# 1 绑定事件后，函数都可以接受一个事件对象的参数，通常命名为event-有很多信息
# 2 传参-跳过

vue绑定事件传参可通过@click="demo($event)"实现。微信小程序的实现跳过。

5 页面跳转

5.1 组件跳转（声明式导航）

# 1 naviagtor组件实现跳转-将要跳转的入口用navigator组件包起来# 2 基本跳转
<navigator url="/pages/login/login"><button type="primary" plain>去登录</button>
</navigator># 3 更多跳转方式-open-type：跳转方式-navigate（default）：保留当前页面（跳转后页面左上角有返回按钮），跳转到应用内某个页面，但不能跳转tabbar页面-redirect：关闭当前页面，跳转到应用内某个页面，不保留当前页面，但不能跳转tabbar页面-switchTab：，跳转tabbar页面，并关闭其他所有非tabbar页面-reLaunch：关闭所有页面，打开应用内某个页面-navigateBack：关闭当前页面，返回上一页面或多级页面，结合属性delta使用，delta是要跳转x级页面# 4 跳转携带参数-在url后加参数，格式：<navigator url="/pages/login/login?name=tutu&age=1"><button type="primary" plain>去登录</button></navigator>-目标页面获取## pages\login\login.jsonLoad(options) {console.log(options);},

1 新建一个登录页面

// app.json
{"pages": ["pages/index/index","pages/my/my","pages/login/login"],
}

2 我的页面增加navigator组件
注意navigator的url是要跳转的页面地址，/开头

<!-- pages\my\my.wxml -->
<navigator url="/pages/login/login"><button type="primary" plain>去登录</button>
</navigator>

open-type方式比较

相同点不同点
navigate1 跳转到应用内某个页面 2 不能跳转tabbar页面保留当前页面
redirect同navigate关闭当前页面
–––
switchTab关闭其他所有 {xx} 页面，打开 {yyy} 页面xx： 非tabbar，yy: !xx，即只能打开tabbar页面
reLaunch关闭其他所有 {zz} 页面，打开 {zz} 页面zz: 任意

跳转携带参数

<navigator url="/pages/login/login?name=tutu&age=1"><button type="primary" plain>去登录</button>
</navigator>

查看参数
在这里插入图片描述
js打印
在这里插入图片描述

5.2 js跳转（编程式导航）

# 1 使用js控制跳转# 2 5个方法，与navigate组件的open-type是对应的-wx.navigateTo({url})-wx.refdirectTo({url})-wx.switchTab({url})-wx.reLaunch({url})-wx.navigateTo()# 3 跳转携带参数-在方法的url参数里加入要携带的参数# 4 回退-wx.navigateBack()  # 回退上一页-wx.navigateBack({delta: 2})  # 回退上n页

6 wxml语法

6.1 模板语法

# {{  }} 不能写js语句或js方法

6.2 列表渲染

跳过。

6.3 条件渲染

跳过。

7 发送网络请求

# 在微信小程序端发送网络请求获取数据，显示在小程序中

7.1 微信发送网络请求

# 1 注意：发送网络请求的域名，必须在微信公众平台进行设置-本地环境去除，只适用于开发版和体验版，不能真正上线-真正上线需要有域名，域名需要工信部备案】# 2 发送请求-django后端：写个接口，返回用户信息-微信小程序端：发送请求，获取数据，显示在小程序端

域名设置
在这里插入图片描述

可配置多个域名
在这里插入图片描述

开发阶段可以不需要设置域名，勾选下述复选框，开发者和体验者可体验小程序，无需设置域名
在这里插入图片描述

2 发送请求
不想写接口。
前端，wx.request().

wx.request({url: 'http://127.0.0.1:8000/index/',method: 'get',data: {}, // 非必填header:{}, // 非必填success: (res)=>{// 获取res的数据}, fail: (error)=>{console.log(error);	},complete:()=>{}
})// data属性，如果是get请求，则data内容拼接在url后，用?隔开
// 如果是post请求，则data是请求体的数据// 箭头函数的理解// 请求成功执行success函数success: function(res) {}, // 简写为箭头函数success: ()=>{ }

7.2 显示loading提示框

# 1 发送请求前，打开loading -->wx.showLoading()
wx.showLoading({title: '加载中...',mask: true,// 是否显示透明蒙层
})# 2 数据加载完毕，无论接口成功还是失败，都要手动关闭loading --> wx.hideLoading()
wx.showLoading({title: '加载中...',mask: true,// 是否显示透明蒙层，设置后加载框后的按钮都不可点击
})
wx.request({url: 'http://127.0.0.1:8000/index/',method: 'get',data: {}, // 非必填header:{}, // 非必填success: (res)=>{// 获取res的数据}, fail: (error)=>{console.log(error);	},complete:()=>{wx.hideLoading(); // 关闭loading}
})

8 对话框

没看到内容。

8.1 模态对话框

没看到内容。

8.2 消息对话框

没看到内容。

9 存储

没看到内容。

10 上拉加载更多和下拉刷新

没看到内容。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/diannao/84759.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

攻防世界逆向刷题笔记（新手模式9-1？）

攻防世界逆向刷题笔记（新手模式9-1？）

bad_python 看样子是pyc文件损坏了。利用工具打开&#xff0c;发现是MAGIC坏了。搜下也没有头绪。 攻防世界-难度1- bad_python - _rainyday - 博客园 python Magic Number对照表以及pyc修复方法 - iPlayForSG - 博客园 看WP才知道36已经提示了pyc版本了。参考第二个文章&am…
阅读更多...
mysql ACID 原理

mysql ACID 原理

序言&#xff1a;ACID 是一组数据库设计原则&#xff0c;他是业务数据和关键业务程序的可靠性保障。 1、atomicity&#xff08;原子性&#xff09; 依赖如下能力 autocommit commit rollback2、一致性 2.1 double write buffer 1、定义&#xff1a;double write buffer 是…
阅读更多...
WebStorm 高效快捷方式全解析

WebStorm 高效快捷方式全解析

作为前端开发的黄金搭档&#xff0c;WebStorm 凭借强大的功能和高度可定制的快捷键体系&#xff0c;成为众多开发者提升编码效率的利器。本文基于 IntelliJ IDEA 的快捷键体系&#xff08;WebStorm 作为 JetBrains 家族成员&#xff0c;快捷键逻辑高度一致&#xff09;&#xf…
阅读更多...
基于 STM32 的农村污水处理控制系统设计与实现

基于 STM32 的农村污水处理控制系统设计与实现

摘要 针对农村污水处理自动化程度低、运维成本高的问题，本文设计了一种基于 STM32 单片机的污水处理控制系统。系统通过多传感器实时监测水质参数，结合 PID 控制算法实现污水处理全流程自动化，并集成远程监控功能，满足农村地区低成本、易维护的需求。 一、硬件系统设计 …
阅读更多...
自动生成md文件以及config.mjs文件-vitepress

自动生成md文件以及config.mjs文件-vitepress

效果&#xff1a; config.mjs文件 import {defineConfig} from vitepress import hljs from highlight.js/lib/core import javascript from highlight.js/lib/languages/javascript import xml from highlight.js/lib/languages/xml import {ref} from "./cache/deps/vue…
阅读更多...
Tailwind css实战，基于Kooboo构建AI对话框页面（二）

Tailwind css实战，基于Kooboo构建AI对话框页面（二）

基于上篇内容&#xff0c;添加交互逻辑&#xff0c;实现一个伪聊天功能的对话框效果&#xff1a; Tailwind css实战&#xff0c;基于Kooboo构建AI对话框页面&#xff08;一&#xff09;-CSDN博客 在前期文章中&#xff0c;我们完成了 AI 对话框的静态页面搭建。本文将聚焦交互…
阅读更多...
Conda：环境移植及更新1--使用conda-pack

Conda：环境移植及更新1--使用conda-pack

更多内容&#xff1a;XiaoJ的知识星球 目录 一、使用conda-pack1.安装 conda-pack2.移植整个 Anaconda 环境3.移植单个虚拟环境4.验证是否生效 在相同Linux设备上移植Miniconda3&#xff08;Anaconda3同理&#xff09;常用方法有。 使用conda-pack&#xff1a;使用conda-pack工…
阅读更多...
树莓派超全系列教程文档--(50)如何查找树莓派的IP地址

树莓派超全系列教程文档--(50)如何查找树莓派的IP地址

如何查找树莓派的IP地址 找到您的Raspberry Pi的IP地址桌面命令行引导输出网络管理器使用mDNS解析 raspberrypi.local检查路由器的设备列表使用 nmap 查找设备使用智能手机应用程序查找设备 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 找到您…
阅读更多...
如何优化 MySQL 存储过程的性能？

如何优化 MySQL 存储过程的性能？

文章目录 1. 优化 SQL 语句避免全表扫描减少子查询&#xff0c;改用 JOIN避免 SELECT 2. 合理使用索引3. 优化存储过程结构减少循环和临时变量避免重复计算 4. 使用临时表和缓存5. 优化事务处理6. 分析和监控性能7. 优化数据库配置8. 避免用户自定义函数&#xff08;UDF&#…
阅读更多...
尚硅谷redis7 47-48 redis事务之理论简介

尚硅谷redis7 47-48 redis事务之理论简介

47 redis事务之理论简介 什么是事务 可以一次执行多个命令,本质是一组命令的集合。一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入 能干什么&#xff1f; 一个队列中&#xff0c;一次性、顺序性、排他性的执行一系列操作 redis事务vs数据库事务 …
阅读更多...
Nginx 在四大核心场景中的应用实践与优化

Nginx 在四大核心场景中的应用实践与优化

一、Nginx 核心应用场景深度解析 1. HTTP 服务器&#xff1a;静态资源的高性能承载者 Nginx 作为 HTTP 服务器时&#xff0c;凭借轻量级架构和高效的事件驱动模型&#xff0c;成为静态资源服务的首选方案。 核心能力与场景 静态文件高效处理&#xff1a;直接响应 HTML、CSS…
阅读更多...
亚当·斯密思想精髓的数学建模与形式化表征

亚当·斯密思想精髓的数学建模与形式化表征

亚当斯密思想精髓的数学建模与形式化表征 摘要&#xff1a;本文运用数学建模方法对亚当斯密的经济与伦理思想进行形式化表征。通过分工的规模经济模型和市场均衡条件展现《国富论》中"看不见的手"原理&#xff1b;采用扩展效用函数与合作博弈均衡解释《道德情操论》…
阅读更多...
FastDFS集群部署与性能优化实战

FastDFS集群部署与性能优化实战

目录 一、介绍 二、FastDFS原理 三、FastDFS部署 1.资源清单 2.修改主机名 3.安装libfastcommon&#xff08;tracker01、tracker02、storage1、storage2&#xff09; 4.安装编译FastDFS&#xff08;tracker01、tracker02、storage1、storage2&#xff09; 5.配置tracker…
阅读更多...
学习心得（14--16）

学习心得（14--16）

模板&#xff1a; 前端的页面单独存在模板当中 jinja2 &#xff1a;模板语法 保持前端页面不变的情况下&#xff0c;返回内容给前端做法&#xff1a; 写一个data&#xff0c;并在return中的render_template中&#xff0c;写上datadata 使用时&#xff0c;要将templa…
阅读更多...
stm与51单片机哪个更适合新手学

stm与51单片机哪个更适合新手学

一句话总结 51单片机&#xff1a;像学骑自行车&#xff0c;简单便宜&#xff0c;但只能在小路上骑。 STM32&#xff1a;像学开汽车&#xff0c;复杂但功能强&#xff0c;能上高速公路&#xff0c;还能拉货载人&#xff08;做复杂项目&#xff09;。 1. 为啥有人说“先学51单片…
阅读更多...
Web安全测试-文件上传绕过-DVWA

Web安全测试-文件上传绕过-DVWA

Web安全测试-文件上传绕过-DVWA 很多网站都有上传资源(图片或者文件)的功能&#xff0c;资源上传后一般会存储在服务器的一个文件夹里面&#xff0c;如果攻击者绕过了上传时候的文件类型验证&#xff0c;传了木马或者其他可执行的代码上去&#xff0c;那服务器就危险了。 我用…
阅读更多...
ant-design-vue中的分页组件自定义

ant-design-vue中的分页组件自定义

ant-design-vue中的分页组件自定义 实现效果 实现代码 需要自己创建一个分页组件的代码然后导入进去。 <template><div style"display: flex; justify-content: space-between; margin-bottom: 10px"><div><a-select v-model:value"pageS…
阅读更多...
LabVIEW软件开发过程中如何保证软件的质量？

LabVIEW软件开发过程中如何保证软件的质量？

一、需求与架构设计阶段 明确功能边界与技术指标 在测试系统设计初期&#xff0c;围绕比例阀性能测试核心需求&#xff08;如压力 / 流量信号采集、特性曲线绘制、数据对比分析&#xff09;&#xff0c;定义软件功能模块&#xff08;数据采集、逻辑控制、界面显示&#xff09;&…
阅读更多...
Linux 527 重定向 2＞1 rsync定时同步（未完）

Linux 527 重定向 2＞1 rsync定时同步（未完）

rsync定时同步 配环境 关闭防火墙、selinux systemctl stop firewalld systemctl disable firewalld setenforce0 vim /etc/SELINUX/config SELINUXdisable515 设置主机名 systemctl set-hostname code systemctl set-hostname backup 配静态ip rsync 需要稳定的路由表和端…
阅读更多...
Vue 3.0 中状态管理Vuex 与 Pinia 的区别

Vue 3.0 中状态管理Vuex 与 Pinia 的区别

在 Vue.js 应用开发中&#xff0c;状态管理是构建复杂应用的关键环节。随着 Vue 3 的普及和 Composition API 的引入&#xff0c;开发者面临着状态管理库的选择问题&#xff1a;是继续使用经典的 Vuex&#xff0c;还是转向新兴的 Pinia&#xff1f;本文将从设计理念、API 设计、…
阅读更多...
最新文章

Copyright @ 2022~2023