【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter2 小程序核心_计算机拓荒者的【2025】微信小程序开发教程,的微信小程序实战,笔记资料

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.js onLoad(options) { console.log(options); },

1 新建一个登录页面

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

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

<navigator url=\"/pages/login/login\"> <button type=\"primary\" plain>去登录</button></navigator>

open-type方式比较

相同点 不同点 navigate 1 跳转到应用内某个页面 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 上拉加载更多和下拉刷新

没看到内容。