【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.js
		Page({
		    handleConsole() {
		        console.log('打印xx')
		    },
		})
# 3 bind:tap="handleConsole" 简写→ bindtap="handleConsole
	-省略了冒号
	

实现

解释

// pages/my/my.js
	Page({
	    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是要跳转的页面地址，/开头

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

open-type方式比较

跳转携带参数

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

没看到内容。