【b站計算機拓荒者】【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.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}
})