【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方式比较

	相同点	不同点
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 上拉加载更多和下拉刷新

没看到内容。