微信小程式框架分析小練手（三）——仿香哈菜譜小程式製作

来源:https://www.cnblogs.com/MilkoSilver/archive/2020/01/29/12241737.html
-Advertisement-
Play Games

香哈菜譜是一款圍繞美食而成的小程式，在這裡可以查看各式各樣的菜譜。 一、打開微信開發者工具，新建一個項目：xhcp。如下圖： 二、建立如下的一些目錄： 三、將底部標簽導航圖標、美食輪播圖片、宮格導航圖標、香哈頭條美食圖片的素材放置於pages文件夾下的images中： Ⅰ、底部標簽欄設計 四、打開a ...


香哈菜譜是一款圍繞美食而成的小程式，在這裡可以查看各式各樣的菜譜。

 

一、打開微信開發者工具，新建一個項目：xhcp。如下圖：

 

 

 二、建立如下的一些目錄：

 

 

 

 

 三、將底部標簽導航圖標、美食輪播圖片、宮格導航圖標、香哈頭條美食圖片的素材放置於pages文件夾下的images中：

 

 

 

Ⅰ、底部標簽欄設計

 

 

 四、打開app.json配置文件，在pages數組中添加5個頁面路徑"pages/cook/cook","pages/food/food","pages/headline/headline","pages/message/message","pages/me/me"。

　　　在windows數組裡配置視窗導航背景顏色為灰色（#494949），導航欄文字為“學做菜”，字體顏色為白色（#ffffff）：

 

 

 五、在tabBar對象中配置底部標簽欄導航背景色為白色（#ffffff），文字預設顏色為灰色（#999999），選中時顏色為紅色（#CC1004），在list數組中配置底部標簽欄導航對應的頁面、導航名稱、預設時圖標及選中時圖標。

app.json的完整代碼如下：

 1 {
 2   "pages": [
 3     "pages/cook/cook",
 4     "pages/food/food",
 5     "pages/headline/headline",
 6     "pages/message/message",
 7     "pages/me/me"
 8   ],
 9   "window": {
10     "backgroundTextStyle": "light",
11     "navigationBarBackgroundColor": "#494949",
12     "navigationBarTitleText": "學做菜",
13     "navigationBarTextStyle": "white"
14   },
15   "tabBar": {
16     "selectedColor": "#CC1004",
17     "color": "#999999",
18     "backgroundColor": "#ffffff",
19     "borderStyle": "black",
20     "list": [
21       {
22         "pagePath": "pages/cook/cook",
23         "text": "學做菜",
24         "iconPath": "pages/images/tab/cook-0.jpg",
25         "selectedIconPath": "pages/images/tab/cook-1.jpg"
26       },
27       {
28         "pagePath": "pages/headline/headline",
29         "text": "頭條",
30         "iconPath": "pages/images/tab/headline-0.jpg",
31         "selectedIconPath": "pages/images/tab/headline-1.jpg"
32       },
33       {
34         "pagePath": "pages/food/food",
35         "text": "美食圈",
36         "iconPath": "pages/images/tab/food-0.jpg",
37         "selectedIconPath": "pages/images/tab/food-0.jpg"
38       },
39       {
40         "pagePath": "pages/message/message",
41         "text": "消息",
42         "iconPath": "pages/images/tab/message-0.jpg",
43         "selectedIconPath": "pages/images/tab/message-1.jpg"
44       },
45       {
46         "pagePath": "pages/me/me",
47         "text": "我的",
48         "iconPath": "pages/images/tab/me-0.jpg",
49         "selectedIconPath": "pages/images/tab/me-1.jpg"
50       }
51     ]
52   }
53 }

 

至此，底部標簽導航就設計完成了：

 

 

 

 Ⅱ、宮格導航設計

在學做菜的頁面中，有海報輪播的圖片（微信小程式中有專門的swiper滑塊視圖組件實現這個效果），還要4跟宮格導航：菜譜分類、視頻、美食養生和閃購。

六、在pages/cook/cook.wxml文件中，首先設計海報輪播區域，使用一張圖片進行佈局，圖片的寬度設置為100%，高度設置為230px：

 

 

 界面效果如下：

 

 

 七、設計宮格導航，分為4個導航：菜譜分類、視頻、美食養生、閃購。每個導航對應一個圖標，在導航的下麵是灰色的間隔線：

 1 <!--pages/cook/cook.wxml-->
 2 <view class="content">
 3   <view class="img">
 4     <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
 5   </view>
 6 
 7   <view class="nav">
 8     <view class="nav-item">
 9     <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>
10     <view>菜譜分類</view>
11     </view>
12     <view class="nav-item">
13     <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>
14     <view>視頻</view>
15     </view>
16     <view class="nav-item">
17     <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>
18     <view>美食養生</view>
19     </view>
20     <view class="nav-item">
21     <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>
22     <view>閃購</view>
23     </view>
24   </view>
25   <view class="hr"></view>
26 </view>

八、在pages/cook/cook.wxss中針對宮格導航添加樣式：

 1 /* pages/cook/cook.wxss */
 2 .nav{
 3   display: flex;
 4   flex-direction: row;
 5   text-align: center;
 6 }
 7 .nav-item{
 8   width: 25%;
 9   margin-top: 20px;
10   font-size: 12px;
11 }
12 .hr{
13   height: 15px;
14   background-color: #cccccc;
15   margin-top: 15px;
16   opacity: 0.2;
17 }
18 .head{
19   display: flex;
20   flex-direction: row;
21   margin: 10px;
22   font-size: 13px;
23   color: #999999;
24 }
25 .right{
26   position: absolute;
27   right: 10px;
28   color: #999999;
29 }
30 .hr2{
31   height: 2px;
32   background-color: #cccccc;
33   opacity: 0.2;
34 }

至此，就完成了海報輪播區域和宮格導航區域的界面佈局，界面效果如下：

 

 

 

 Ⅲ、頭條初始化數據

微信小程式作為客戶端，它的數據來源自服務端。接下來模擬服務端提供香哈頭條列表的數據，有了數據，頁面才能動態地渲染。

九、在pages/cook/cook.js中，添加initData數據，在data頁面初始化數據里添加array數組，然後將initData定義的數據通過setData設值函數賦值給array數組：

  1 // pages/cook/cook.js
  2 Page({
  3 
  4   /**
  5    * 頁面的初始數據
  6    */
  7   data: {
  8     array: []
  9   },
 10 
 11   /**
 12    * 生命周期函數--監聽頁面載入
 13    */
 14   onLoad: function (options) {
 15     var array = this.initData();
 16     this.setData({array:array});
 17   },
 18   initData:function(){
 19     var array = [];
 20     var object1 = new Object();
 21     object1.img = '../images/list/food-1.jpg';
 22     object1.title = '愛心早餐';
 23     object1.type = '健康養生';
 24     object1.liulan = '30988瀏覽';
 25     object1.pinglun = '7評論';
 26     array[0] = object1;
 27 
 28     var object2 = new Object();
 29     object2.img = '../images/list/food-2.jpg';
 30     object2.title = '困了只想喝咖啡';
 31     object2.type = '家庭醫生線上';
 32     object2.liulan = '29999瀏覽';
 33     object2.pinglun = '14評論';
 34     array[1] = object2;
 35 
 36     var object3 = new Object();
 37     object3.img = '../images/list/food-3.jpg';
 38     object3.title = '橘子多吃變小黃人';
 39     object3.type = '家庭醫生線上';
 40     object3.liulan = '19356瀏覽';
 41     object3.pinglun = '5評論';
 42     array[2] = object3;
 43     
 44     var object4 = new Object();
 45     object4.img = '../images/list/food-4.jpg';
 46     object4.title = '搜狐新聞，手機用久了';
 47     object4.type = '廣告';
 48     object4.liulan = '5046瀏覽';
 49     object4.pinglun = '3評論';
 50     array[3] = object4;
 51 
 52     var object5 = new Object();
 53     object5.img = '../images/list/food-5.jpg';
 54     object5.title = '困了只想喝咖啡';
 55     object5.type = '家庭醫生線上';
 56     object5.liulan = '29999瀏覽';
 57     object5.pinglun = '13評論';
 58     array[4] = object5;
 59 
 60     return array;
 61   },
 62   /**
 63    * 生命周期函數--監聽頁面初次渲染完成
 64    */
 65   onReady: function () {
 66 
 67   },
 68 
 69   /**
 70    * 生命周期函數--監聽頁面顯示
 71    */
 72   onShow: function () {
 73 
 74   },
 75 
 76   /**
 77    * 生命周期函數--監聽頁面隱藏
 78    */
 79   onHide: function () {
 80 
 81   },
 82 
 83   /**
 84    * 生命周期函數--監聽頁面卸載
 85    */
 86   onUnload: function () {
 87 
 88   },
 89 
 90   /**
 91    * 頁面相關事件處理函數--監聽用戶下拉動作
 92    */
 93   onPullDownRefresh: function () {
 94 
 95   },
 96 
 97   /**
 98    * 頁面上拉觸底事件的處理函數
 99    */
100   onReachBottom: function () {
101 
102   },
103 
104   /**
105    * 用戶點擊右上角分享
106    */
107   onShareAppMessage: function () {
108 
109   }
110 })

 

Ⅳ、頭條列表渲染及綁定數據

 香哈頭條里有菜譜的圖片、美食名稱、分類、瀏覽數量以及評論數量。

十、在pages/cook/cook.wxml中，進行香哈頭條列表信息界面佈局：

 1 <!--pages/cook/cook.wxml-->
 2 <view class="content">
 3   <view class="img">
 4     <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
 5   </view>
 6 
 7   <view class="nav">
 8     <view class="nav-item">
 9     <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>
10     <view>菜譜分類</view>
11     </view>
12     <view class="nav-item">
13     <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>
14     <view>視頻</view>
15     </view>
16     <view class="nav-item">
17     <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>
18     <view>美食養生</view>
19     </view>
20     <view class="nav-item">
21     <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>
22     <view>閃購</view>
23     </view>
24   </view>
25   <view class="hr"></view>
26   <view class="head">
27   <view>香哈頭條</view>
28   <view class="right"></view>
29   </view>
30   <view class="list">
31     <view class="item" bindtap="seeDetail" id="0">
32       <view>
33       <image src="../images/list/food-1.jpg" style="width:75px;height:58px;"></image>
34       </view>
35       <view class="desc">
36         <view class="title">愛心早餐</view>
37         <view class="count">
38           <view>健康養生</view>
39           <view class="liulan">30988瀏覽</view>
40           <view class="pinglun">7評論</view>
41         </view>
42       </view>
43     </view>
44     <view class="hr2"></view>
45   </view>
46 </view>

十一、在pages/cook/cook.wxss中，針對香哈頭條列表信息添加樣式：

 1 .item{
 2   display: flex;
 3   flex-direction: row;
 4   margin-left: 10px;
 5   margin-bottom: 5px;
 6 }
 7 .desc{
 8   margin-left: 20px;
 9   line-height: 30px;
10 }
11 .title{
12   font-weight: bold;
13 }
14 .count{
15   display: flex;
16   flex-direction: row;
17   font-size: 12px;
18   color: #999999;
19 }
20 .liulan{
21   position: absolute;
22   right: 70px;
23 }
24 .pinglun{
25   position: absolute;
26   right: 10px;
27 }

界面效果如下：

 

 

 

 

 

 

 十二、接下來通過數據綁定和wx:for迴圈的方式動態載入數據：

 1 <!--pages/cook/cook.wxml-->
 2 <view class="content">
 3   <view class="img">
 4     <image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
 5   </view>
 6 
 7   <view class="nav">
 8     <view class="nav-item">
 9     <view><image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view>
10     <view>菜譜分類</view>
11     </view>
12     <view class="nav-item">
13     <view><image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view>
14     <view>視頻</view>
15     </view>
16     <view class="nav-item">
17     <view><image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view>
18     <view>美食養生</view>
19     </view>
20     <view class="nav-item">
21     <view><image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view>
22     <view>閃購</view>
23     </view>
24   </view>
25   <view class="hr"></view>
26   <view class="head">
27   <view>香哈頭條</view>
28   <view class="right"></view>
29   </view>
30   <view class="list">
31   <block wx:for="{{array}}">
32   <view class="item" bindtap="seeDetail" id="0">
33       <view>
34       <image src="{{item.img}}" style="width:75px;height:58px;"></image>
35       </view>
36       <view class="desc">
37         <view class="title">{{item.title}}</view>
38         <view class="count">
39           <view>{{item.type}}</view>
40           <view class="liulan">{{item.liulan}}</view>
41           <view class="pinglun">{{item.pinglun}}</view>
42         </view>
43       </view>
44     </view>
45     <view class="hr2"></view>
46   </block>
47   </view>
48 </view>

界面效果如下：

 

 

Ⅴ.頭條模板引用

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

-Advertisement-
Play Games
更多相關文章
  • Unity3d組件實現令人驚嘆的像素粒子特效！
    我們先看看兩個特效，感受一下，有沒有學習的動力？ 核心API：Texture2D.SetPixel(int x, int y, Color color)，Texture2D.Apply() 實現原理：對象池 思路： 第一幀繪製前：遍歷瓦片上所有活著的粒子對象並且進行數據操作(或運動，死亡)，發生運動 ...
  • 併發編程相關概念
    " 返回《C 併發編程》" "1. 概念介紹" "2. 非同步編程" "2.1. async運行過程" "2.2. async運行中同步上下文簡介" "2.3. 創建Task實例" "2.4. 捕獲非同步異常類型" "3. 並行編程" "3.1. Parallel" "3.2. 異常處理" "3.3. ...
  • 痞子衡嵌入式：語音處理工具pzh-speech誕生記（2）- 界面構建(wxFormBuilder3.8.0)
    今天痞子衡給大家介紹的是語音處理工具pzh-py-speech誕生之界面構建 ...
  • Linux 文件和目錄操作命令（一）
    1、cd （change directory）切換到指定目錄 2、cp （copy）複製文件或目錄 3、find 查找目錄及目錄下的文件 示例： 4、mkdir （make directory）創建文件夾 5、mv （move）移動或重命名文件（重命名時會刪除源文件，cp 不會） 6、pwd （pr ...
  • VSCODE更改文件時，提示EACCES permission denied的解決辦法(mac電腦系統)
    permission denied：許可權問題 具體解決辦法： 1.在項目文件夾右鍵 顯示簡介 點擊右下角解鎖 2.許可權全部設置為讀與寫 3.最關鍵一步：點擊“應用到包含的項目”，這樣就會把讀與寫許可權應用到項目下的所有文件，然後就OK了 ...
  • Mac 查看埠占用情況及殺死進程
    查看埠占用情況命令 sudo lsof i :9000 冒號後面就是你需要查看的埠號。 殺掉占用當前埠號的進程 有一個表頭名為PID的一列，這一列就表示占用當前埠的進程。 ...
  • 「數據挖掘入門系列」Python快速入門
    Python環境搭建本次入門系列將使用Python作為開發語言。要使用Python語言，我們先來搭建Python開發平臺。我們將基於Python 2.7版本、以及Python的開發發行版本Anaconda版本來開發。Anaconda指的是一個開源的Python發行版本，其包含了conda、Pytho... ...
  • 博客前端其他雜項
    1、實現標簽小圖標2、live2D（二）這個更強，增加了菜單和換裝，換形象等功能，最終實現代碼如下 Live2D ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類