序文
このプロジェクトが開発された理由は2つあります。
- 豚のいじめっ子の家族は農業を営んでおり、家で手伝うと、両親は農業病の問題に直面し、どこから始めればよいのかわからなかったため、これらを理解するための便利なツールが必要でした。
- 2022年の大学WeChatミニプログラム開発コンペティションをテーマに：地方の活性化を支援します。
その結果、友人と私はWeChatアプレットクラウド開発を使用してこのポケット農業の知識を作成しました。WeChatを介して以下のQRコードをスキャンすることでそれを体験できます。
次に、プロジェクトの構造、コア機能、詳細から、このアプレットの包括的な理解を紹介します。
プロジェクト構造
プロジェクトの全体的な構造は上の図に示されています。これは、ホームページ、農業知識百科事典、農業ハザード識別、およびパーソナルセンターの4つのモジュールに分かれています。
- ホーム：二十四節気予報、天気予報、農業情報、農業ニュース
- 農業知識百科事典：農業知識情報、農業知識検索、農業知識コレクション、農業知識コンテンツ
- 農薬の識別：写真による識別、システムの推奨
- パーソナルセンター：私のお気に入り、フィードバック、カスタマーサービスへのお問い合わせ、会社概要
プロジェクトの構造を写真とテキストの形で簡単に説明します。経験を通じてそれについてさらに学ぶことができます。読者が主な機能といくつかの主な実装スキームを理解できるように、以下のコア機能と詳細に焦点を当てます。主なインタラクティブな側面の詳細設計。
コア機能
以下では、アプレットのコア機能と関連する実装方法を紹介します。コア機能の実装には、テーマの変更、農業知識の収集、テキスト分析の3つの主要なポイントが含まれます。
テーマ変更
テーマ変更には、CSS変数と文字列置換という2つの主要な実装スキームがあります。
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写真、特定の使用法、WeChat開発者ツールによって生成されたファイルの詳細な手順、またはこの記事の最後から2番目のタイトル：関連記事にスキップします。これらは実際のクラウド開発の概要でも紹介されています。
カードフロー
カードフローとは、農業知識百科事典にある農業知識カードのコレクションを指します。これには、プルアップロードとボトムアウトリフレッシュが含まれます。
プルアップロードとボトミングリフレッシュは、カードフローを最適化するためのサポートアクションです。ユーザーがデータをリフレッシュする場合は、プルダウンしてデータをリフレッシュして再リクエストします。ボトミングローディングは、収集要素の数が多すぎるのを防ぐためです。 、コンテンツ、およびレンダリング圧力の原因。ボトムローディングを使用し、次のデータを要求し続けます。具体的な実装については、私の要約を参照してください：小さなプログラムのボトムローディングおよびプルダウンリフレッシュ機能の設計と実装-ナゲット（juejin。 cn）
関連記事
アプレットを開発する過程で、私はいくつかの個人的な経験も要約しました。これは私の友人が参照するために使用できます。
- ミニプログラムクラウド開発実用概要|クイックスタートとシナリオ戦闘-ナゲッツ（juejin.cn）
- WeChatアプレットのヘッドコンポーネントのカプセル化と使用-ナゲッツ（juejin.cn）
- ミニプログラムのボトムローディングおよびプルトゥリフレッシュ機能の設計と実装-ナゲッツ（juejin.cn）
- WeChatミニプログラムのスケルトンスクリーンの適用と実装-ナゲッツ（juejin.cn）
最後に書く
新時代のITの若者は、地方の活性化の旗印を掲げなければなりません。掘削機が優れたアイデアと創造性を持っているのであれば、彼らは地方の活性化に関するものでなければなりません。！！コメント欄にメッセージを残すことができます。クリエイティブな活動が終わったら、ナゲッツ・アンソニーの抽選アルゴリズムでメッセージのルールを満たした掘り出し物にクリック枕を送ります（今日はもう1つもらった）
雑草をくわえる日が正午になると、お皿に中華料理が苦労していることを知っている雑草に汗が滴り落ちます。
詳しくは「クリエイティブデベロップメントコンテスト」に参加しています。こちらをご覧ください：ナゲッツクリエイティブデベロップメントコンテストはこちら！