助力乡村振兴，我为农民伯伯开发了这款微信小程序

前言

为什么开发这个项目，有两点原因：

• 猪痞恶霸的家庭是务农的，在家帮忙的时候，父母遇到了农业病害的问题，不知道从哪下手，所以需要一个方便的工具去了解这些。
• 借由2022年高校微信小程序开发大赛的主题：助力乡村振兴。

由此，我和我的小伙伴使用微信小程序云开发打造了这款口袋农识，掘友可以通过微信扫一扫下面的二维码来体验一下。

下面我将从项目结构，核心功能与细节处理来带各位掘友全面了解这款小程序

项目结构

项目总体结构如上图所示，分为首页，农识百科，农害识别，个人中心四大模块构成

• 首页：节气预报，天气预报，农业资讯与农业新闻
• 农识百科：农识信息，农识搜索，农识收藏，农识内容
• 农害识别：拍照识别，系统推荐
• 个人中心：我的收藏，意见反馈，联系客服，关于我们

项目结构我这里就以图文的形式一笔带过，大家可以通过体验来进一步了解，我将主要篇幅放在下面核心功能与细节处理，让读者可以了解主要功能的主要实现方案与一些交互上的主要的细节设计。

核心功能

下面我将为大家介绍小程序的核心功能及相关的实现方式核心功能实现包括三大点分别为：主题更迭，农识收藏与文本解析。

主题更迭

主题更迭主要有两种实现方案，分别是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)

相关文章

我在开发小程序的过程中也总结了一些个人体会，掘友们可以作为一个参考。

• 小程序云开发实战总结|快速上手&场景实战 - 掘金 (juejin.cn)
• 微信小程序head组件的封装与使用 - 掘金 (juejin.cn)
• 小程序触底加载与下拉刷新功能的设计与实现 - 掘金 (juejin.cn)
• 微信小程序实战之骨架屏的应用与实现 - 掘金 (juejin.cn)

开源地址

hogB/hoewo (github.com)大家可以送我个star，由相关问题可以在评论区留言！！！

写在最后

新时代IT青年必须扛起乡村振兴的大旗，如果掘友们有好的想法与创意，一定是要关于乡村振兴的！！！可以在评论区留言，在创意活动结束后，我将通过掘金安东尼大佬的抽奖算法对符合留言规则的掘友送出click抱枕一个（今天又拿到一个）

恭喜南方者。

锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。