【b站計算機拓荒者】【2025】微信小程序開發教程 - chapter3 項目實踐 -1 項目功能描述

1 項目功能描述

# 智慧社區-小程序-1 歡迎頁-加載后端：動態變化-2 首頁-輪播圖：動態-公共欄：動態-信息采集，社區活動，人臉檢測，語音識別，心率檢測，積分商城-3 信息采集頁面-采集人數展示-采集列表-4 采集詳情頁面-打開攝像頭拍照：提交后端保存-5 采集統計頁面-6 人臉檢測-7 語音識別-8 積分商城-9 活動-10 公告-公告列表展示-11 我的個人中心-個人信息展示-12 登錄功能

2 創建項目

2.1 創建小程序端

# 1 微信開發者工具，創建項目
# 2 純凈化
# 3 創建4個頁面，并全部配置為tabbar頁面（app.json），設置全局window屬性（app.json）-首頁index-我的my-公告notice-活動activity
# 4 微信開發者工具-詳情-本地設置-不校驗合法域名等等

2.2 創建后端項目

# 0 安裝python和pycahrm
# 1 使用python的django框架+drf編寫+splite
# 2 創建項目 smart_demo_backend，創建app：smart
# 3 清理無用setting.py，配置國際化
# 4 運行在0.0.0.0的8000端口

1 創建python項目
在這里插入圖片描述
創建成功
在這里插入圖片描述

2 配置

# smart_demo_backend/settings.py
from pathlib import PathBASE_DIR = Path(__file__).resolve().parent.parentSECRET_KEY = 'django-insecure-jvm^y#hdr&^*eorr#twsf!p8n^r(_x9%*7(5+6m!2v7(19aucu'DEBUG = TrueALLOWED_HOSTS = []INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','smart.apps.SmartConfig',
]MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]ROOT_URLCONF = 'smart_demo_backend.urls'TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [BASE_DIR / 'templates'],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]WSGI_APPLICATION = 'smart_demo_backend.wsgi.application'# 如果使用splite數據庫，不需要改動
DATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': BASE_DIR / 'db.sqlite3',}
}AUTH_PASSWORD_VALIDATORS = [{'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',},{'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',},{'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',},{'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',},
]LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'Asia/Shanghai'USE_I18N = TrueUSE_TZ = FalseSTATIC_URL = 'static/'DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'## 開啟media訪問

3 修改配置
微信小程序訪問后端，則后端項目設置為運行在0.0.0.0:8000端口
在這里插入圖片描述

3 小程序集成vant-app

3.1 node介紹

# 1 正常前端的js代碼只能運行在瀏覽器中-瀏覽器中有js的解釋器環境# 2 作為前端來講，只能寫前端，寫不了后端，-需要學后端語言，python/go/java等# 3 于是乎有大神，把chrome瀏覽器的v8引擎，使用c重寫了，讓它可以安裝在操作系統之上-我們就可以使用js語法寫后端了# 4 作為前端開發，不需要學新語法，使用js語法，實現前端后端開發# 5 好多第三方模塊，是使用node構建的-vue

js的解釋器環境，沒有裝在操作系統而是瀏覽器上，因為js必須在瀏覽器里運行
在這里插入圖片描述

3.2 vant-weapp介紹&集成

https://vant-ui.github.io/vant-weapp/?spm=a2c6h.13046898.publish-article.19.64f36ffa6o7LOM#/home

# 1 小程序上如果純自己寫樣式，對前端css要求比較高
# 2 使用第三方ui庫，快速構建頁面
# 3 vant-weapp-vant: 有贊團隊出品的ui框架，做手機端ui比較多，是移動端ui框架-vue端-react端-微信小程序端，vant-weapp
https://vant-ui.github.io/vant-weapp/?spm=a2c6h.13046898.publish-article.19.64f36ffa6o7LOM#/home-目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。# 4 集成步驟1 需要小程序支持安裝npm包（vant-weapp）-注意：使用專門為微信小程序提供npm的包，不是所有第三方包都支持微信小程序-https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#%E5%8F%91%E5%B8%83-npm-%E5%8C%85-小程序環境比較特殊，一些全局變量（如 window 對象）和構造器（如 Function 構造器）是無法使用的。-npm包內部編寫時使用了window，但到了小程序中就不能使用，因此這個npm包在小程序中無法使用-vant-weapp包支持在小程序使用2 電腦環境安裝node.js-node.js類型python解釋器-安裝完后會釋放2個命令：node和npm命令-node：對應python，執行代碼-npm：對應pip，安裝第三方模塊-一路next，自動加入環境變量-node和npm命令3 使用npm安裝vant-weapp模塊-由于npm是國外下載，速度較慢-方式一：等-方式二：使用鏡像，cnpm代替npm-安裝cnpm-npm install -g cnpm --registry=https://registry.npm.taobao.org-本地就會有cnpm，下載相較npm會快一些4 小程序根路徑：打開命令行[微信開發者工具，右鍵-在內建終端打開，注意路徑是項目根路徑]-npm init -y # 生成package.json文件-讓項目集成vant，集成vant需支持npm，因此先生成npm的配置文件，使其可支持npm安裝包5 安裝vant-npm i @vant/weapp -S- -S,保存到package.json的dependencies6 刪除小程序app.json-將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂。7 在project.config.json的setting加入"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}],8 構建工具 - 構建npm-構建ok，集成vant-weapp成功

4.2 檢查是否有node
在這里插入圖片描述

4.4 生成package.json文件
在這里插入圖片描述

4.5 安裝vant
package.json的dependencies會多一個vant/weapp
在這里插入圖片描述

4.6
在這里插入圖片描述

4.7
在這里插入圖片描述

4.8
在這里插入圖片描述
在這里插入圖片描述

3.3 vant使用

https://vant-ui.github.io/vant-weapp/?spm=a2c6h.13046898.publish-article.19.64f36ffa6o7LOM#/cell
# 1 引入vant的組件，在app.json或index.json引入組件-app.json 全局所有頁面都生效-index.json 只在當前頁面生效# 2 使用vant組件-復制官網代碼

1 在app.json引入組件
在這里插入圖片描述
在這里插入圖片描述
2 使用vant組件
在這里插入圖片描述

4 歡迎頁

# 1 一打開小程序，先用一個大圖片蓋住【打廣告】，3s后自動跳轉到首頁
# 2 新建頁面welcome
# 3 廣告圖添加到項目中

4.1 靜態頁面

4.1.1 wxml

<!--pages/welcome/welcome.wxml-->
<view class="container"><text class="jump" bind:tap="doJump">跳過{{second}}秒</text><image class="img" src="/images/兩狗對視.jpg" mode=""/>
</view>

4.1.2 js

// pages/welcome/welcome.js
Page({/*** 頁面的初始數據*/data: {second: 3},onLoad(options) {// 啟動定時器，倒計時// 清除定時器var instance = setInterval(()=>{if(this.data.second <= 0) {// 清除定時器clearInterval(instance);this.doJump();} else {this.setData({second: this.data.second-1})}        },1000);},doJump() {//點擊跳轉首頁wx.switchTab({url: '/pages/index/index',})}
})

4.1.3 wxss

/* pages/welcome/welcome.wxss */
page {height: 100%;
}
.container {width: 100%;height: 100%;
}.container .img {width: 100%;height: 100%;
}
.jump {font-size: 30rpx;position: absolute;left: 600rpx;top: 80rpx;background-color: #dddddd;padding: 10rpx 20rpx;border-radius: 20rpx;
}

效果
在這里插入圖片描述

4.2 后端加載歡迎頁

# 1 廣告頁寫死，后期不能變化
# 2 結合后端，可以動態變化-后臺運營人員，可以上傳廣告圖片-廣告圖片可實時在小程序端變化# 3 配合后端接口動態獲取圖片

4.2.1 創建表模型

# 歡迎圖片表-圖片地址-排序 --> 只有一個，取出數據庫中數字最大-創建時間 --> 上傳時間-is_delete--> 軟刪除，前端查不到

pip裝pillow包報錯，不看了。

4.2.2 開啟media訪問

跳過。

4.2.3 使用admin上傳圖片

跳過。

4.2.4 寫視圖控制函數

跳過。

4.2.5 小程序端

# 1 image的src改為變量img
# 2 請求接口返回img
# 注意：先展示默認圖，等后臺接口返回配置的圖片再替換，合計是3s

在這里插入圖片描述

1 image的src改為變量img

<!-- pages\welcome\welcome.wxml -->
<view class="container"><text class="jump" bind:tap="doJump">跳過{{second}}秒</text><image class="img" **src="{{img}}"**  mode=""/>
</view>

// pages/welcome/welcome.js
Page({/*** 頁面的初始數據*/data: {second: 3,img: '/images/兩狗對視.jpg'},onLoad(options) {// 向后端發送請求 -- 獲取廣告頁 -- 賦值給imgwx.request({url:'http://127.0.0.1:8000/smart/welcome',method: 'get',success:(res)=>{if(res.data.code === 100) {this.setData({img: res.data.result})} else {wx.showToast({title:'網絡請求異常'})}},fail: (error)=>{wx.showToast({title:'網絡請求異常'})}})// 啟動定時器，倒計時// 清除定時器var instance = setInterval(()=>{if(this.data.second <= 0) {// 清除定時器clearInterval(instance);this.doJump();} else {this.setData({second: this.data.second-1})}        },1000);},doJump() {//點擊跳轉首頁wx.switchTab({url: '/pages/index/index',})}
})

5 首頁

5.1 靜態頁面

# 要素-輪播圖，swiper小程序組件-vant-weapp的通知欄組件1 app.json引入組件（屬性usingComponents）2 index.wxml使用組件-快捷入口：vant-weapp的grid宮格-引入和使用-底部：圖片，image標簽和flex布局

代碼實現

<!--pages\index\index.wxml-->
<!--index.wxml-->
<view class="container"><!-- 輪播圖 --><view class="banner"><swiper autoplay indicator-dots circular indicator-color="#fff" interval="3000"><swiper-item><image src="/images/兩狗對視.jpg" mode=""/></swiper-item><swiper-item><image src="/images/可愛柯基.jpg" mode=""/></swiper-item><swiper-item><image src="/images/貓貓吃魚.jpg" mode=""/></swiper-item><swiper-item><image src="/images/藍金漸層.jpg" mode=""/></swiper-item></swiper>    </view><!-- 通知 -->   <van-notice-barleft-icon="volume-o"text="在代碼閱讀過程中人們說臟話的頻率是衡量代碼質量的唯一標準。"/><!-- 快捷入口 --><van-grid column-num="3"><van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" /></van-grid><!-- 底部 --><view class="bottom"><view><image src="/images/藍金漸層.jpg" mode=""/></view><view><image src="/images/兩狗對視.jpg" mode=""/></view><view><image src="/images/可愛柯基.jpg" mode=""/></view><view><image src="/images/貓貓吃魚.jpg" mode=""/></view></view>
</view>

效果
在這里插入圖片描述

6 個人頁

6.1 靜態頁面

up直接復制的，不想寫，估計后面還得寫，再說吧
p10 51:00

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/82620.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/82620.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/82620.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

5.27 day 30

5.27 day 30

知識點回顧&#xff1a; 導入官方庫的三種手段導入自定義庫/模塊的方式導入庫/模塊的核心邏輯&#xff1a;找到根目錄&#xff08;python解釋器的目錄和終端的目錄不一致&#xff09; 作業&#xff1a;自己新建幾個不同路徑文件嘗試下如何導入 一、導入官方庫 我們復盤下學習py…
閱讀更多...
【GitHub Pages】部署指南

【GitHub Pages】部署指南

vue項目 編輯你的 vite.config.ts 文件&#xff0c;加上 base 路徑&#xff0c;設置為你的 GitHub 倉庫名 import { defineConfig } from vite import vue from vitejs/plugin-vue// 假設你的倉庫是 https://github.com/your-username/my-vue-app export default defineConfi…
閱讀更多...
遠程控制技術全面解析：找到適合你的最佳方案

遠程控制技術全面解析：找到適合你的最佳方案

背景&#xff1a;遠程控制為何成為企業核心需求&#xff1f; 隨著企業數字化轉型的推進&#xff0c;遠程控制技術已成為異地辦公和運維的關鍵工具。無論是跨國企業需要高效管理全球設備&#xff0c;還是中小型企業追求經濟高效的解決方案&#xff0c;選擇合適的遠程控制技術&a…
閱讀更多...
觸覺智能RK3506星閃開發板規格書 型號IDO-EVB3506-V1

觸覺智能RK3506星閃開發板規格書 型號IDO-EVB3506-V1

產品概述 觸覺智能RK3506星閃開發板&#xff0c;型號IDO-EVB3506-V1采用 Rockchip RK3506&#xff08;三核 Cortex-A7單核Cortex-M0, 主頻最高1.5GHz&#xff09;設計的評估開發板&#xff0c;專為家電顯控、顯示HMI、手持終端、工業IOT網關、工業控制、PLC等領域而設計。內置…
閱讀更多...
九級融智臺階與五大要素協同的量子化解析

九級融智臺階與五大要素協同的量子化解析

九級融智臺階與五大要素協同的量子化解析 摘要&#xff1a;本文構建了一個量子力學框架下的九級融智模型&#xff0c;將企業創新過程映射為量子能級躍遷。研究發現五大要素協同態決定系統躍遷概率&#xff08;P∣?Ψ_m∣H_協同∣Ψ_n?∣^2&#xff09;&#xff0c;當要素協同…
閱讀更多...
Kotlin學習34-data數據類1

Kotlin學習34-data數據類1

定義如下&#xff1a;與普通類對比學習 //普通類 class NormalClass(val name: String, val age: Int, val sex: Char) //數據類 data class DataClass(val name: String, val age: Int, val sex: Char)對應找到java反編譯的代碼路徑&#xff1a;Tool-->Kotlin-->Show K…
閱讀更多...
博圖SCL基礎知識-表達式及賦值運算

博圖SCL基礎知識-表達式及賦值運算

S7-1200 從 V2.2 版本開始支持 SCL 語言。 語言元素 SCL 除了包含 PLC 的典型元素&#xff08;例如&#xff0c;輸入、輸出、定時器或存儲器位&#xff09;外&#xff0c;還包含高級編程語言表達式、賦值運算和運算符。 程序控制語句 SCL 提供了簡便的指令進行程序控制。例…
閱讀更多...
海思3519V200ARM Linux 下移植 Qt5.8.0

海思3519V200ARM Linux 下移植 Qt5.8.0

一、移植背景及意義 海思3519V200是一款基于ARM架構的嵌入式芯片，廣泛應用于智能安防、工業控制等領域。在這些應用場景中，對設備的圖形用戶界面（GUI）有著越來越高的要求。Qt5.8.0作為一個功能強大、跨平臺的GUI開發框架，能夠幫助開發者快速開發出美觀、高效的用戶界面。…
閱讀更多...
msql的樂觀鎖和冪等性問題解決方案

msql的樂觀鎖和冪等性問題解決方案

目錄 1、介紹 2、樂觀鎖 2.1、核心思想 2.2、實現方式 1. 使用 version 字段&#xff08;推薦&#xff09; 2. 使用 timestamp 字段 2.3、如何處理沖突 2.4、樂觀鎖局限性 3、冪等性 3.1、什么是冪等性 3.2、樂觀鎖與冪等性的關系 1. 樂觀鎖如何輔助冪等性&#xf…
閱讀更多...
成都鼎訊--通信信號模擬設備?

成都鼎訊--通信信號模擬設備?

在現代電磁通信領域&#xff0c;精準模擬復雜多變的信號環境&#xff0c;是提升通信裝備性能與人員作戰能力的核心命題。成都鼎訊以技術創新為驅動&#xff0c;憑借深厚的研發實力&#xff0c;重磅推出通信信號模擬設備&#xff0c;以前所未有的強大功能與卓越性能&#xff0c;…
閱讀更多...
C# Windows Forms應用程序-003

C# Windows Forms應用程序-003

目錄 項目結構 命名空間和類定義 主要控件 GroupBox 控件 Label 控件 TextBox 控件 Button 控件 OpenFileDialog 控件 方法說明 構造函數 Form1() Dispose(bool disposing) Main() InitializeComponent() button1_Click(object sender, System.EventArgs e) but…
閱讀更多...
【C/C++】死鎖的四大條件與預防策略詳解

【C/C++】死鎖的四大條件與預防策略詳解

文章目錄 死鎖的四大條件與預防策略詳解一、死鎖的產生條件&#xff08;四個必要條件&#xff09;二、代碼示例三、死鎖的預防手段&#xff08;以 C/C 為例&#xff09;1. 破壞“循環等待” —— 統一加鎖順序&#xff08;推薦&#xff09;2. 使用 std::lock 一次性加多個鎖3. …
閱讀更多...
Rust編程環境安裝

Rust編程環境安裝

文章目錄 Rust編程環境安裝一、安裝準備二、安裝步驟對于Linux/macOS用戶對于Windows用戶 三、驗證安裝四、環境配置檢查五、工具鏈管理六、附加功能七、常見問題處理八、編輯器支持九、其他 Rust編程環境安裝 一、安裝準備 1. 支持系統&#xff1a;Windows/Linux/macOS 2. 所…
閱讀更多...
OpenHarmony平臺驅動使用（五），HDMI

OpenHarmony平臺驅動使用（五），HDMI

OpenHarmony平臺驅動使用&#xff08;五&#xff09; HDMI 概述 功能簡介 HDMI&#xff08;High Definition Multimedia Interface&#xff09;&#xff0c;即高清多媒體接口&#xff0c;主要用于DVD、機頂盒等音視頻Source到TV、顯示器等Sink設備的傳輸。 HDMI以主從方式工…
閱讀更多...
【Git】Commit Hash vs Change-Id

【Git】Commit Hash vs Change-Id

文章目錄 1、Commit 號2、Change-Id 號3、區別與聯系4、實際場景示例5、為什么需要兩者&#xff1f;6、總結附錄——Gerrit 在 Git 和代碼審查工具&#xff08;如 Gerrit&#xff09;中&#xff0c;Commit 號&#xff08;Commit Hash&#xff09; 和 Change-Id 號 是兩個不同的…
閱讀更多...
leetcode hot100刷題日記——21.不同路徑

leetcode hot100刷題日記——21.不同路徑

和20題一樣的思路link 題解&#xff1a; class Solution { public:int dfs(int i,int j,vector<vector<int>>&memo){//超過了邊界&#xff0c;return 0if(i<0||j<0){return 0;}//從&#xff08;0&#xff0c;0&#xff09;到&#xff08;0&#xff0c;0…
閱讀更多...
day2 MySQL表數據操作

day2 MySQL表數據操作

一&#xff1a;數據操作 注&#xff1a;在編寫MySQL代碼時可以不用區分大小寫 1.查看表結構 desc 表名; -- 查看表中的字段類型&#xff0c;長度&#xff0c;約束。 2.字段的增加 AFTER table 表名 add 字段名 數據類型; -- 默認末尾添加 after table 表名 add 字段名 …
閱讀更多...
GitAny - 無需登入的 GitHub 最新倉庫檢索工具

GitAny - 無需登入的 GitHub 最新倉庫檢索工具

地址&#xff1a;https://github.com/MartinxMax/gitany GitAny - 無需登入的 GitHub 專案搜尋工具 GitAny 是一款基於 Python 的工具&#xff0c;允許你在無需登入的情況下搜尋當天最新的 GitHub 專案。它支援模糊搜尋、條件篩選以及倉庫資料的視覺化分析。 安裝依賴 $ pip…
閱讀更多...
格恩朗金屬管浮子流量計 高精度測量的不二之選?

格恩朗金屬管浮子流量計 高精度測量的不二之選?

在流量測量的復雜領域&#xff0c;精度就是生命線&#xff0c;直接關乎生產的穩定性、產品的質量以及資源的合理利用。大連格恩朗品牌的金屬管浮子流量計&#xff0c;憑借其卓越的精度表現&#xff0c;成為各行業在流量測量時的最佳之選。? 格恩朗金屬管浮子流量計運用經典的可…
閱讀更多...
【R語言編程繪圖-箱線圖】

【R語言編程繪圖-箱線圖】

基本箱線圖繪制 使用ggplot2繪制箱線圖的核心函數是geom_boxplot()。以下是一個基礎示例&#xff0c;展示如何用iris數據集繪制不同物種&#xff08;Species&#xff09;的萼片長度&#xff08;Sepal.Length&#xff09;分布&#xff1a; library(ggplot2) ggplot(iris, aes(…
閱讀更多...
最新文章

Copyright @ 2022~2023