01 uniapp/微信小程式 項目day01

来源:https://www.cnblogs.com/heymar/archive/2022/09/20/16712128.html
-Advertisement-
Play Games

一.起步 1.1 配置uni-app開發環境 什麼是uni-app，就是基於vue的一個開發框架，可以將我們寫的一套代碼，同時發佈到ios、安卓、小程式等多個平臺 ==官方推薦使用Hbuilderx來寫uni-app項目== 下載之後可以將預設改為vscode 進入hbuilder插件市場下載scs ...


一.起步

1.1 配置uni-app開發環境

什麼是uni-app，就是基於vue的一個開發框架，可以將我們寫的一套代碼，同時發佈到ios、安卓、小程式等多個平臺

image-20220809181628923

官方推薦使用Hbuilderx來寫uni-app項目

下載之後可以將預設改為vscode

image-20220809183206627

進入hbuilder插件市場下載scss插件

image-20220809183343350

1.2 初始化uni-app項目

創建一個uni-app項目

image-20220809183922387

如果把小程式項目運行到微信開發者工具：

首先manifest.json配置自己的id

image-20220809184826603

然後工具 設置 運行設置 找到微信開發者工具的安裝路徑

image-20220809184937147

然後記得我們的開發者工具需要開啟埠

image-20220809185209469

然後運行到微信小程式

image-20220809184957267

關閉提示：

image-20220809190411278

以前的做法是直接在config.json裡面改

image-20220809190443122

但是我們這個項目是hbuilder渲染過來的，所以應該在這邊改，具體在

manifest裡面源碼視圖，最下麵的mp-weixin，checkSiteMap為fasle

image-20220809190732109

git管理項目：

首先需要創建一個忽略文件

image-20220809191538551

裡面寫上兩個要忽略的目錄

image-20220809191640984

首先我們說過node_modules都是存放的第三方包，再進行傳輸的時候不需要傳來傳去，所以直接忽略

第二個文件下麵放的其實就是打包出來的文件，我們的微信小程式也就是讀取的這裡面的文件

image-20220809191742406

但是要註意一點

image-20220809191812284

然後打開目錄，運行git init初始化git目錄，再 git add .將所有文件放到暫存區，最後 git commit提交一次所有文件

image-20220809192124928

將項目上傳到gitee：

image-20220809193341059

創建倉庫後通過這兩個命令關聯項目並把它上傳上來

image-20220809193649758

1.3 配置tabBar效果

這次採用不同分支來做，首先創建一個tabbar的分支

image-20220809194520672

快速創建page頁，在page上新建頁面即可

image-20220809194653372

四個頁面出來就去配置tabbar，直接在pages.json裡面配置

image-20220809195259271

註意把pages.json還有pages裡面的index刪除，否則可能渲染不出來

1.4 導航條

直接在page.json修改 globeStyle

image-20220809201421741

註意先把每個頁面設置裡面的style的標題為空刪除才行

image-20220809201445244

1.5 分支提交與合併

作為一個分支如何來提交合併

首先在tabbar分支進行暫存和本地提交

image-20220809201620266

然後將本地的tabbar分支推送到遠程倉庫保存

image-20220809201658833

這個時候遠程倉庫只是有了新的分支，但是還沒有文件目錄

image-20220809201816756

繼續和主分支合併

image-20220809202053365

合併之後沒有衝突記得push上來

image-20220809202735277

如果有錯誤記得主分支暫存並提交一次倉庫

最後刪除tabbar分支即可

image-20220809202823323

二.首頁

image-20220810181845847

2.1 配置網路請求

首先創建一個home分支

image-20220810183019376

由於小程式沒有axios，而wx.request功能也比較簡單，不支持攔截器等一些功能，所以推薦使用一個包 @escook/request-miniprogram來發起網路請求

官方文檔：https://www.npmjs.com/package/@escook/request-miniprogram

安包之前記得初始化

image-20220810183401446

然後參考文檔進行引用，uni的網路請求是在main.js操作

需要註意的是，uni的頂級對象是uni.不再是wx.

image-20220810183558576

請求和響應攔截器都在main入口文件裡面定義

image-20220810183658013

2.2 輪播圖

首先獲取輪播圖數據：

註意這裡雖然是回到vue的語法，但是生命鉤子還是用的微信的

image-20220810184525484

入口文件配置baseUrl

image-20220810184800559

image-20220810190015630

渲染結構：

image-20220810191133452

目前scss語法跟less一樣展現出嵌套關係

image-20220810191346280

2.3 配置小程式分包

首先需要創建分包的目錄

image-20220810191945819

然後再pages.json裡面和pages同級聲明subPackages配置

root表示分包的目錄，pages表示分包的每一個頁面

註意對象包裹，以及裡面都有引號

image-20220810192602099

接下來右鍵subpkg創建一個頁面，註意勾選在pages中註冊

註意要先保存上面的才會出現選擇分包按鈕

image-20220810192719830

2.4 點擊輪播圖跳轉詳情頁

首先要將我們之前圖片外麵包裹的view組件改為navigator

註意怎麼來跳分包的，直接寫路徑

image-20220810193405846

然後我要傳參數過去

image-20220810193506004

2.5 封裝toast

因為我們每次請求數據，回來都會去發一次toast這個api去告訴失敗或者成功很麻煩，所以可以直接封裝一個在入口文件裡面

image-20220810194116195

2.6 分類導航

首先獲取數據

image-20220810195233718

渲染結構

image-20220810195621140

接下來做一個編程式導航跳轉

註意要跳tabBar只能switchTap

image-20220810195849572

2.7 樓層區域

樓層標題：

首先還是獲取樓層的數據

image-20220810200812263

然後渲染上去先渲染標題部分

image-20220810201040350

內容區域：

image-20220810202401561

註意回顧一下vue style要寫為｛｝，mode為widthFix表示寬度固定高度自適應

右邊怎麼來排除第一個

image-20220810202648948

點擊每一項進入詳情頁：

首先創建分包

image-20220810203445957

然後查看一下我們的數據

image-20220810203517094

你會發現介面要跳轉的地址跟我們的分包的地址不同，所以這個時候應該在我們獲取介面這裡做一下處理

這裡最重要的是將我們的參數轉為數組用？分割然後拼接進我們新的url字元串這一個處理思路

image-20220810203835816

image-20220810203843671

然後將我們之前的代碼修改一下作聲明式導航

image-20220810204125433

2.8 分支合併與提交

image-20220810204525694

完成了分支的暫存、提交、以及推送之後就回到主分支

註意切換到主分支後，主分支要進行一次暫存，並提交到本地倉庫，然後再合併merge，在git push推送就不會衝突

image-20220810204828143

最後刪除home分支


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [apue] 標準 I/O 庫那些事兒
    提起標準 IO 庫，第一印象就是 printf/scanf，這有什麼可說的？但是一個流是如何處理寬窄字元集、緩存方式的？如何在程式內部將標準輸出重定向到文件？FILE* 與 fd 是如何相互轉換的？在處理大文件時 fseek/fseeko/fsetpos 有何區別？創建臨時文件時 tmpnam/te... ...
  • 工具推薦-使用RedisInsight工具對Redis集群CURD操作及數據可視化和性能監控
    RedisInsight 是一個直觀而高效的 Redis GUI (可視化工具)，它提供了設計、開發和優化 Redis 應用程式的功能，查詢、分析您的 Redis 數據並與之交互，簡化您的 Redis 應用程式開發 。（必備） RedisInsight 現在採用了基於流行的 Electron 框架的... ...
  • Redis——數據操作
    2022-09-20 Redis——select Redis資料庫中的資料庫的個數為： 16個，使用0號資料庫開始的，到第15個資料庫結束。 在ubantu中，進入Redis客戶端的命令： redis-cli 在ubantu中，如果選擇第0-15個資料庫中的一個的命令，例如第0個： select 0 ...
  • 開源直播課丨高效穩定易用的數據集成框架——ChunJun類載入原理與實現
    一、直播介紹 前幾期，我們為大家分享了ChunJun的數據還原、Hive事務表及傳輸模塊的一些內容，本期我們為大家分享ChunJun類載入原理與實現。 本次直播我們將從Java 類載入器解決類衝突基本思想、Flink 類載入器隔離的方案、ChunJun如何實現類載入器隔離及問題排查等方面為大家進行介 ...
  • Docker安裝部署Mysql8（以作數據持久化）
    1.創建容器併進行持久化處理 #拉取鏡像 docker pull mysql:8.0.20 #啟動鏡像,用於拷貝配置文件到宿主機 docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:8.0.20 #查 ...
  • DataLeap的Catalog系統近實時消息同步能力優化
    更多技術交流、求職機會，歡迎關註位元組跳動數據平臺微信公眾號，回覆【1】進入官方交流群 摘要 位元組數據中台DataLeap的Data Catalog系統通過接收MQ中的近實時消息來同步部分元數據。Apache Atlas對於實時消息的消費處理不滿足性能要求，內部使用Flink任務的處理方案在ToB場景 ...
  • StoneDB 亮相中國信通院OSCAR開源產業大會，石原子科技正式加入科技製造開源社區！
    2022 年 9 月 16 日，由中國信息通信研究院（以下簡稱“信通院”）主辦的“2022 OSCAR 開源產業大會"活動於北京成功舉辦。會上宣佈，StoneDB 發起廠商杭州石原子科技有限公司正式加入信通院“科技製造開源社區（TMOSC）”，未來石原子將與信通院及各成員單位一起聚焦可信開源全景，推 ...
  • Redis變慢？深入淺出Redis性能診斷系列文章(四)
    本篇為Redis性能問題診斷系列的第四篇，也是最後一篇，主要從應用程式、系統、伺服器硬體及網路系統等層面上進行講解，重點分享了哪些配置需要重點關註和調整優化，才能最大程度的發揮Redis的處理能力； ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類