助力鄉村振興，我為農民伯伯開發了這款微信小程式

語言: CN / TW / HK
時間 2022-07-20 03:15:20

theme: vue-pro

前言

為什麼開發這個專案，有兩點原因：

  • 豬痞惡霸的家庭是務農的，在家幫忙的時候，父母遇到了農業病害的問題，不知道從哪下手，所以需要一個方便的工具去了解這些。
  • 藉由2022年高校微信小程式開發大賽的主題：助力鄉村振興。

由此，我和我的小夥伴使用微信小程式雲開發打造了這款口袋農識，掘友可以通過微信掃一掃下面的二維碼來體驗一下。

gh_d2ab97587cf7_258 (1).jpg

下面我將從專案結構，核心功能與細節處理來帶各位掘友全面瞭解這款小程式

專案結構

image.png

專案總體結構如上圖所示，分為首頁，農識百科，農害識別，個人中心四大模組構成

  • 首頁：節氣預報，天氣預報，農業資訊與農業新聞
  • 農識百科：農識資訊，農識搜尋，農識收藏，農識內容
  • 農害識別：拍照識別，系統推薦
  • 個人中心：我的收藏，意見反饋，聯絡客服，關於我們

專案結構我這裡就以圖文的形式一筆帶過，大家可以通過體驗來進一步瞭解，我將主要篇幅放在下面核心功能與細節處理，讓讀者可以瞭解主要功能的主要實現方案與一些互動上的主要的細節設計。

核心功能

下面我將為大家介紹小程式的核心功能及相關的實現方式核心功能實現包括三大點分別為：主題更迭，農識收藏與文字解析。

主題更迭

主題更迭主要有兩種實現方案，分別是CSS變數與字串替換

CSS變數

CSS變數是比較常用的，但是在口袋農識中我並沒有應用而是選擇了第二種，因為當時設計的時候沒有想到（還是技術太菜）

--theme-color:#FFFFFF;

如上所示程式碼為CSS變數的設定方式，以--開頭，屬性即合法CSS合法屬性值即可，可以通過全域性變數的方式即globalData的形式定義CSS變數，再在相關的樣式中呼叫即可，例項程式碼如下：

let spring_theme = `--theme-text-color:#FFFFFF;--theme-btn-color:#363b40;` let autumn_theme = `--theme-text-color:#29ac55;--theme-btn-color:#ffffff;` let themeObj = {    spring-theme,    autumn_theme } this.globalData.theme = themeObj

使用模板字串的形式定義多個主題變數，再將所有變數通過物件形式儲存起來，存到全域性變數內即可，其實還可以更加細節化，按鈕，文字，表單等等，定義完整體的主題變數後就可以將其儲存到全域性中，這些步驟完成後，我們來看看如何進行變數繫結。

<view class="btn {{themeObj.spring_theme}}"></view>

首先肯定需要將定義好的CSS變數值通過插值繫結給元素，而一般的全域性頁面使用繫結在小程式是在page中進行繫結的，因為其為小程式的最頂層。

.btn {    color:var(--theme-btn-color) }

之後對繫結元素的相應class內通過var將變數解析出為CSS合法屬性即可。

字串替換

所謂字串替換是利用插值來替換元素的class，比如：

<view class="left {{season}}-item"></view>

設定全域性變數，在onload生命通過global獲取season字串拼接，再在CSS中預設好每個季節的樣式即可，當如果靜態檔案也需要發生變化，比如icon，背景圖片，也可以通過這種方式來更改，值得注意的是在一些場景中可以搭配模板字串使用。

<image src="../../images/personicon/{{season}}-accredit.png"></image>

主題的更迭的實現方式就介紹到這裡，如果有問題，可以在評論區留言，下面將介紹在農識收藏功能中的核心。

農識收藏

農識收藏的主要核心是使用者操作資料的鑑權以及點選收藏防抖。

使用者鑑權

微信雲開發的鑑權方式很輕鬆，因為其獨特的openid，使得使用者在操作資料的時候就會將使用者唯一識別符號以_openid的形式儲存起來，而在獲取的時候也只需要通過呼叫雲開發的api通過doc來獲取該唯一識別符號下的收藏資料。

防抖

在這裡防抖的作用是避免使用者連續點選收藏按鈕，造成發生多次收藏請求，使用者收藏資料會包含重複資料。我的思路有兩種，一個是在請求中對重複相同請求進行判斷並攔截，一個是通過函式來實現防抖，下面是我通過網上資料參考，在工具檔案中定義的防抖函式。

const debounce = (fun,time) =>{    console.log(time)    return () => {        clearTimeout(TIMEOUT);        var that = this;        TIMEOUT = setTimeout(function(){            fun.apply(that,arguments);       }, time);   } }

這種實現是比較暴力的，在有新的函式進入時，會清空舊的定時器並重新設定新的定時器。

util.debounce(this.addCollect,1000)()

使用的化如上所示，引入util後呼叫封裝的防抖函式並傳入收藏函式與防抖時間作為引數。

文字解析

文字解析可以說是整個微信小程式最基礎也是最重要的功能，因為其農識是通過文字的方式實現，所以我採用了已經不維護的wxParse作為文字解析元件，專案地址：icindy/wxParse: wxParse-微信小程式富文字解析自定義元件，支援HTML及markdown解析 (github.com)，在其倉庫中的readme檔案中有詳細的使用說明，各位掘友也可以在我的專案中進行一個參考。

細節處理

我們通過對小程式增加一些細節來優化使用者體驗，主要為兩點：首屏渲染與卡片流。

首屏渲染

首屏渲染主要是由骨架屏的使用來實現的，微信開發者工具自帶了骨架屏生成工具，所以使用起來也很方便，一般是在頁面元件同級目錄下生成skeleton.wxml與skeleton.wxss檔案，譬如主頁檔案目錄：

. ├── home |   └── home.js |   └── home.wxml |   └── home.wxss |   └── home.json |   └── home.skeleton.wxml |   └── home.skeleton.wxss └── ...

之後就可以通過v-show與v-if來控制骨架屏與真實元素的出現與消失，一般是通過v-show來控制真實內容，因為其要先進行一個內容的載入，再通過骨架屏的消失來為使用者展現載入完的文字與圖片，具體的使用方式，在微信開發者工具生成的檔案中有詳細步驟，又或者跳到本文的倒數第二個標題：相關文章，其雲開發實戰總結中也有相關介紹。

卡片流

卡片流指的是在農識百科中農識卡片的集合，會涉及到上拉載入與觸底重新整理問題。

上拉載入與觸底重新整理是優化卡片流的一種配套動作，使用者想要重新整理資料，下拉進行重新整理並重新請求資料，而觸底載入是為了避免集合元素即內容數量過多，造成渲染壓力，使用觸底載入，繼續請求接下來的資料，具體實現可以參考我總結的：小程式觸底載入與下拉重新整理功能的設計與實現 - 掘金 (juejin.cn)

相關文章

我在開發小程式的過程中也總結了一些個人體會，掘友們可以作為一個參考。

寫在最後

新時代IT青年必須扛起鄉村振興的大旗，如果掘友們有好的想法與創意，一定是要關於鄉村振興的！！！可以在評論區留言，在創意活動結束後，我將通過掘金安東尼大佬的抽獎演算法對符合留言規則的掘友送出click抱枕一個（今天又拿到一個）

鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆辛苦。

我正在參加「創意開發 投稿大賽」詳情請看：掘金創意開發大賽來了！

「」
「」