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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 我和我的小伙伴使用微信小程序云开发打造了这款口袋农识,掘友可以通过微信扫一扫下面的二维码来体验一下。

前言

为什么开发这个项目,有两点原因:

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

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

1.webp.jpg

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

项目结构

1.webp.jpg

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

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

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

核心功能

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

主题更迭

主题更迭主要有两种实现方案,分别是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.wxmlskeleton.wxss文件,譬如主页文件目录:

.
├── home
|   └── home.js
|   └── home.wxml
|   └── home.wxss
|   └── home.json
|   └── home.skeleton.wxml
|   └── home.skeleton.wxss
└── ...
复制代码

之后就可以通过v-showv-if来控制骨架屏与真实元素的出现与消失,一般是通过v-show来控制真实内容,因为其要先进行一个内容的加载,再通过骨架屏的消失来为用户展现加载完的文本与图片,具体的使用方式,在微信开发者工具生成的文件中有详细步骤,又或者跳到本文的倒数第二个标题:相关文章,其云开发实战总结中也有相关介绍。

卡片流

卡片流指的是在农识百科中农识卡片的集合,会涉及到上拉加载与触底刷新问题。

上拉加载与触底刷新是优化卡片流的一种配套动作,用户想要刷新数据,下拉进行刷新并重新请求数据,而触底加载是为了避免集合元素即内容数量过多,造成渲染压力,使用触底加载,继续请求接下来的数据,具体实现可以参考我总结的:小程序触底加载与下拉刷新功能的设计与实现 - 掘金 (juejin.cn)

相关文章

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

开源地址

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

写在最后

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

恭喜南方者。

1.webp.jpg

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



相关文章
|
7天前
|
小程序 Android开发
|
22天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
20天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
22天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
419 1
|
2天前
|
小程序
|
3天前
|
小程序 数据安全/隐私保护
|
8天前
|
小程序
|
8天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
8天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
8天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。

热门文章

最新文章