2021版小程序開發5——小程序項目開發實踐(1)

學習筆記 2025

使用uni-app開發一個電商項目；

Hbuidler

• 首選uni-app官方推薦工具：
• https://www.dcloud.io/hbuilderx.html
• https://dev.dcloud.net.cn/pages/app/list

微信小程序

• 管理后臺：https://mp.weixin.qq.com/?token=&lang=zh_CN
• 小程序IDE：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 文檔：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

uni組件庫：

• https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html

字體圖標

• https://www.iconfont.cn/

z-paging 插件用法：

• https://z-paging.zxlee.cn/

1 開發環境

uni-app

• https://uniapp.dcloud.net.cn/
• 使用vue語法開發所有前端應用的框架；
• 跨平臺，只需編寫一套代碼，可以開發app、h5、各類小程序；

HBuilderX

IDE推薦使用HBuilderX（下載安裝app開發板）

• 提供了豐富的模版
• 完善的智能提示
• 一鍵運行

在HBuilderX中安裝Sass編譯的插件

scss/sass編譯插件

• 登錄dcloud插件市場（https://ext.dcloud.net.cn/），下載相應的編譯插件compile-node-sass；
• 使用HBuilderX導入安裝即可；
• 這樣后續項目中的css樣式，就都可以使用sass語法進行編寫了；

<style lang="scss"></style>

HBuilderX個性化配置

工具->預設快捷鍵方案切換->VSCode；

工具->設置->打包Settings.json按需配置；

2 項目初始化

新建 項目 uni-app

• 指定項目名、存放路徑，推薦使用uni-ui項目模版；
• uni-ui：https://uniapp.dcloud.net.cn/component/#uniui

項目目錄結構：

componentscomp-a.vue
pagesindexindex.vuelistlist.vue
static  // 靜態資源存放位置（視頻 圖片等）
main.js  // vue初始化入口文件
App.vue  // 應用全局配置
manifest.json   // 應用信息配置
pages.json   // 配置小程序頁面路徑、窗口樣式 tabbar navigationBar等頁面類信息

運行項目到微信開發者工具：

• 在manifest.json 微信小程序配置中填寫微信小程序的AppID；
• 工具->設置->打包Settings.json，在運行配置中的小程序運行配置，配置微信開發者工具的路徑；
• 在微信開發者工具中，設置->安全設置，開啟服務端口；
• HBuilderX中，運行->運行到小程序模擬器->微信開發者工具（編譯后自動運行）；

在manifest.json（源碼視圖下）中的mp-weixin對應的就是微信小程序中的配置對象，其setting節點可以配置以前我們在小程序的project.config.json中setting節點的配置項；

Git管理項目：

• 新建.gitignore，配置：/node_modules和/unpackage/dist
  • 如果要跟蹤一個空目錄，可以在該目錄下新建一個.gitkeep的文件進行占位；
• 相關git操作，如git init等；
  • 本地git
  • 配置遠程ssh公鑰
  • 遠程創建倉庫，本地推送至遠程倉庫

3 項目開發

創建頁面

新建頁面：

• 使用 scss頁面
• 勾選 在pages.json中注冊
• 勾選 創建同名目錄
• 輸入頁面名稱 創建即可，頁面內容如下

<template><view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss"></style>

新建四個頁面

• home
• cate
• cart
• my

在小程序開發者工具中，配置某一個頁面的編譯模式，仍然是可用的；

配置tabBar效果

將圖標等靜態資源放到static目錄（根據功能劃分子目錄）；

在pages.json配置文件，新增tabBar配置節點：

{"tabBar": {"selectedColor": "#C00000","list": [{"pagePath": "pages/home/home","text": "首頁","iconPath": "static/tab_icons/home.png","selectedIconPath": "static/tab_icons/home-active.png"},// cate  cart  my 等tabBar頁面配置// 刪除默認的index頁面及配置]}
} 

修改導航條樣式

在pages.json配置文件的globalStyle節點進行配置：

"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "Title", // 每個page的style節點同名屬性會覆蓋該值；"navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF"
}

網絡請求配置

小程序中不支持axios，而wx.request()功能簡單，不支持攔截器等全局定制，uni-app中使用@escook/request-miniprogram三方包發起網絡請求；

• npm init -y
• npm install @escook/request-miniprogram

文檔：https://www.npmjs.com/package/@excook/request-miniprogram

在main.js中進行配置：

import { $http } from '@escook/request-miniprogram'// uni 類似 wx 同為全局對象，也可以在uni上掛載一些全局的自定義方法
uni.$http = $http
$http.baseUrl = "https://www.test.com"
// ...
// 攔截器
$http.beforeRequest = function(options){uni.showLoading({title:"Loading..."})
}
$http.afterRequest = function(){uni.hideLoading()
}

一般在頁面的onLoad中發送網絡請求；另外這是vue語法，因此方法需要定義到methods中；

// 使用示例
async getDatas(){const {data: res} = await uni.$http.get("/suburl")// 結構返回信息的data賦值給resif (res.meta.status !== 200){return uni.showToast({title:"Error",duration: 1500,icon: 'none'})}this.datalist = res.datas
}

輪播圖

鍵入uswiper，就可以填入預設的代碼段；

• circular：銜接滾動

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, index) in datalist" :key="index"><view class="swiper-item"><image :src="item.image_src"></image></view></swiper-item>
</swiper><style lang="scss">
swiper {height: 330rpx;<!-- 同時為兩個選擇器對應的視圖添加樣式 -->.swiper-item, image {width: 100%;heitht: 100%;}
}
</style>

《2021版小程序開發1——起步》-8 輪播圖組件

為了使輪播圖點擊可以跳轉到相應頁面，可使用navigator組件替換掉包括image的view組件；url指定目標頁面的路徑，同時傳遞了一個id參數；

<swiper-item v-for="(item, index) in datalist" :key="index"><navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.id"><image :src="item.image_src"></image></navigator>
</swiper-item>

《2021版小程序開發3——視圖與邏輯》-1 頁面導航

如果通過點擊事件觸發導航，可以使用uni.navigateTo方法：

gotoDetail(id){uni.navigateTo({url: '/subpkg/detail/detail?id=' + id})
}

uni-app如何配置小程序分包

• 在項目根目錄，創建分包根目錄subpkg
• 在pages.json中，和pages節點平級生命subPackages節點，以定義分包相關結構；

"subPackages": [{"root": "subpkg","pages": []}
]

• 分包頁面，在subpkg目錄右擊新建頁面（注意在選項頁面，還要選擇小程序所屬分包，如subpkg）；

選擇分包的頁面創建，會自動修改json配置；

《2021版小程序開發4——基礎加強》-7 分包

Flex布局

《彈性布局-更優秀的Flex》https://blog.csdn.net/baby_hua/article/details/105952517

四個分類導航按鈕，就可以通過Flex布局方便的實現樣式；

拋掉iOS布局的經驗，深入理解流式布局；

點擊分類導航到分類tab頁面

<view v-for="(item, index) in navList" :key="index" @click="navClickHandler(item)"></view>

navClickHandler(item){if (item.name == "cate"){uni.switchTab({url:"/pages/cate/cate"})}
}

圖片動態綁定樣式和顯示模式設置

<imag :src="" :style="{width: img_width + 'rpx'}" mode="widthFix">寬度固定 高度自適應</imag>

git基本操作

# 創建分支
git chechout -b branch_a# 提交本地修改
git add .  
git commit -m 'tag info'# 將分支推送到遠程
git push -u origin branch_a# 本地分支合并
git chechout master
git merge home# 刪除分支
git branch -d branch_a

滑動區域-滾動視圖

scroll-view組件

• 指定滑動方向，如 scroll-y；
• 如果是縱向可滑動，還需要指定一個固定的高度(對于確定的寬度或高度，可以直接使用px單位，而無需使用rpx)；

該組件還支持一個屬性scroll-top，用于設置滾動條到頂部的距離；值的話可以0和1切換，以響應變化；

<scroll-view scroll-y="true" :style="{height: scroll_height + 'px'}"></scroll-view>

如果想讓滾動視圖縱向充滿全屏，需要使用uni提供的獲取系統信息的同步接口：uni.getSystemInfoSync()

• screenHeight：屏幕高度；
• windowHeight：可用窗口高度（一般是減去navigationBar和tabBar高度后的值）；

onLoad() {const systemInfo = uni.getSystemInfoSync()this.scroll_height = systemInfo.windowHeight
}

多類名樣式SCSS

<view class="classP classS">xxx</view><!-- 動態綁定多類名設置 -->
<view :class="['classP', index === action_index ? 'classS' : '']">xxx</view>

.classP{line-height: 30px;font-size: 12px;font-weight: bold;text-align: center;padding: 15px 0;color: #EEEEEE,/* 既包含classP 又包含classS 則額外添加如下樣式 */&.classS {backgroundColor: #EEEEEE;position: relative;/* 通過尾元素添加額外樣式: 靠左 居中的 小紅條 */&::before {content: ' ';display: block;width: 3px;height: 30px;backgroundColor: #C00000;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}}
}

自定義組件

在components目錄上，右擊新建組件，使用scss并創建同名目錄，點擊創建即可；

創建后的組件，可以直接使用標簽形式進行使用；

自定義組件綁定click事件（和其他事件），需要在組件中使用this.$emit("click")進行觸發；

組件屬性：

props: {bgColor: {type: String,default: "#ffffff"},radius: {type: Number,default: 18}
}

組件吸頂效果

position: sticky;是 CSS 中的一個定位屬性，它可以讓元素在滾動時“粘”在頁面的某個位置，直到達到指定的閾值。這個屬性結合了 position: relative; 和 position: fixed; 的特點，常用于實現滾動時固定在頁面某個區域的元素，比如導航欄、表頭或側邊欄。

/* 組件包裹容器 */
.op-box {position: sticky;/* 元素距離視口頂部的距離，當滾動超過這個距離時，元素會粘在頂部;或其他方向的值，如 bottom, left, right; */top: 0;/* 提高層級 防止覆蓋 */ z-index: 999;
}

默認行為：

• 元素在頁面中正常渲染，表現為 position: relative; 的效果。
• 元素會跟隨頁面滾動。

觸發粘性行為：

• 當頁面滾動到指定的閾值（通過 top, bottom, left, 或 right 設置），元素會“粘”在容器的邊界上，表現為 position: fixed; 的效果。
• 當滾動回到閾值范圍內，元素會恢復為 position: relative; 的行為。

uni-app中uni組件的修改

uni的組件會存檔到一個單獨的目錄中uni_modules；

可以到組件的源代碼中，對樣式進行修改；

搜索框自動獲取焦點

這里使用的是 uni-search-bar，可以修改其源碼屬性值：

show: true,
showSync: true,

需要真機預覽；

搜索文本框的防抖處理

// data中定義
{
keyword: '',
timer: null,
},
// input事件：每輸入一個字符都會回調 并返回當前值
input(e){// 清除延時器clearTimeout(this.timer)// 500ms內沒有新回調 才為keyword賦值this.timer = setTimeout(()=>{this.keyword = e.value// 隨即可以發送網絡請求}, 500)
}

文本單行省略顯示處理

.line-1{/* 文字不換行 */white-space: nowrap;/* 溢出隱藏 */overflow: hidden;/* 文本溢出 使用...代替 */text-overflow: ellipsis;margin-right: 3px;
}

uni組件庫提供的組件 標簽名即類名

.uni-tag{margin: 5px;
}

數組解構初始化一個新數組

computed: {datalistShow() {return [...this.datalist].reverse()}
}

利用Set對象去重數組

const set = new Set(this.datalist)
set.delete(this.kw) // 刪除是為了調關鍵詞順序
set.add(this.kw)
this.datalist = Array.from(set)

檢索歷史記錄數據存本地Storage

// 存
uni.setStorageSync("keywords", JSON.stringfy(this.datalist))// 取
this.datalist = JSON.parse(uni.getStorageSync("keywords") || '[]')