# flower

**Repository Path**: javadog-net/flower

## Basic Information

- **Project Name**: flower
- **Description**: uniapp纯前端搞个识别植物花草小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-12-23
- **Last Updated**: 2025-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, 小程序

## README

# 前言

## 🍊缘由

###  加班让我的头大，来个小程序压压精

![](https://img.javadog.net/blog/flower/8af15a1a94b34f4fb5dcc0dd3fe3851c.png)

#### 🐣闪亮主角

大家好，我是[JavaDog程序狗](https://mp.weixin.qq.com/s/FjOdxCAPFrJpruhS1YB-MA)

最近因为工期紧张，加上个人颓废摸鱼，很长时间没有总结新作文章，惭愧...

当看到前端帅小伙废寝忘食做了一个**拍照识花小程序**时，顿时心血来潮，于是乎《识花名》小程序诞生...

![](https://img.javadog.net/blog/flower/c3f8402f88a94c598c58679dec2ea276.png)


####  😈你想听的故事 

抄可是我最拿手的绝技，说干就干！

直接采用uniapp，分两个页面，一个主页，一个解析页，能省就省。

遂狗哥总结**小程序前端开发攻略**，与小伙伴一起分享这个知识点。

此程序本狗只用半天时间，较为简陋，勿喷勿喷。

![](https://img.javadog.net/blog/flower/4cc6b5f4b6ce4dd09da8b4350201a968.png)

## 🍭体验

![](https://img.javadog.net/blog/flower/ercode.png)

## 🎁如何获取源码

公众号：【JavaDog程序狗】

关注公众号，**发送  “flower”**，无任何套路即可获得！

![](https://img.javadog.net/blog/flower/13919ef69f41435fb3678962b164c469.png)

# 正文

## 🎯主要目标

### 1.小程序设计思路

### 2.小程序实操代码

## 🍪目标讲解

### 一.小程序设计思路

以本狗《识花名》小程序为例，解析如何开发自己的小程序

#### 1. 参考同类型小程序

在你没有任何头绪进行开发时，**参考优秀案例是个必要思路**。

本狗需要开发扫描识别植物花草小程序，就去**小程序中搜索相关的关键字，如识花、花识别、植物识别等，找到使用人数多的！**，群众眼光是雪亮的，肯定能从其中找到学习的点。

多看几个后，可以取其精华去其糟粕，总结一个自己适用的设计方案

![](https://img.javadog.net/blog/flower/7661e45d6f3444e3be1f54f0437c4fef.png)

#### 2. 确定主要功能及流程

确定好页面，如本小程序为**主页面，及扫描解析页面**

确认好功能，如本小程序为**拍照/相册选择**识别花草植物，并**调用解析接口**展示

确认好流程，如本小程序**流程为用户拍照/相册选择后，将图片转换成base64格式，调用识别接口将返回值解析展示到页面**

![](https://img.javadog.net/blog/flower/306b996628e24b6292361c6529dda50e.png)

![](https://img.javadog.net/blog/flower/57bd404692794e1d8e412477b351005b.png)

******

### 二.小程序实操代码

#### 1. 代码结构

![](https://img.javadog.net/blog/flower/831e25f4905b49e8b876c36a72f5caca.png)

#### 2. 主页index.vue

![](https://img.javadog.net/blog/flower/85bf072c9cfe446c981ac229cdf550b1.png)

主要代码

```js
<template>
	<view class="index">
		<div class="tools">
			<div class="camera" style="margin-bottom: 20px;">
				<button class="button" @click="onCamera">
					<uni-icons type="camera" size="24" color="#856E53"></uni-icons> <span style="margin-left: 4px;color: #856E53">拍照识花</span>
					<div class="hoverEffect">
						<div></div>
					</div>
				</button>
			</div>
			<div class="images">
				<button class="button" @click="onImages">
					<uni-icons type="images" size="24" color="#557F2B"></uni-icons> <span style="margin-left: 4px;">相册选择</span>
					<div class="hoverEffect">
						<div></div>
					</div>
				</button>
			</div>
		</div>
	</view>
</template>
```

#### 3. 识别页index.vue

![](https://img.javadog.net/blog/flower/3d36b350fe104c8f816b87d782caa976.png)

主要代码

```js
<template>
	<view class="detail">
    <cmd-nav-bar :fixed="true" back left-text="返回" title="" font-color="#fff" background-color="linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125))"></cmd-nav-bar>
		<div class="gradient-border" id="box">
			<image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="scaleToFill" :src="imageUrl"
				@click="imgPreview(imageUrl)"></image>
		</div>
    <div class="content" style="padding-bottom: 20px" v-if="result.length>0">
      <uni-section title="识别结果" type="line">
        <uni-card :title="item.name" sub-title="" :extra="'相似度:' + (item.score * 100).toFixed(2) + '%'"  :thumbnail="avatar" @click="onClick" v-for="(item, index) in result" :key="index">
          <text class="uni-body foldable-text" :class="{ 'expanded': item.isExpanded }" :ref="'descriptionText-' + index">
            {{ item.baike_info ? item.baike_info.description : "暂无描述" }}
          </text>
          <div style="text-align: right; margin-top: 10px">
            <button type="primary" size="mini" style="width: 25%" v-if="item.showExpandButton" @click="toggleExpand(index)" class="expand-button">
              {{ item.isExpanded ? '收起' : '展开' }}
            </button>
          </div>
        </uni-card>
      </uni-section>
    </div>
    <div class="loading" style="text-align: center" v-if="result.length==0">
      <div class="loader" style="margin: 0 auto">
        <div class="load-inner load-one"></div>
        <div class="load-inner load-two"></div>
        <div class="load-inner load-three"></div>
        <span class="text">识别中...</span>
      </div>
    </div>
	</view>
</template>
```

# 总结

通过参考其他优秀的小程序案例，结合自身需求，确定了主要功能和流程，最终实现了**拍照识花的小程序**。整个开发过程使用了**uni-app框架**，代码结构清晰，功能实现简洁明了。希望这篇文章能帮助到其他开发者，分享了前端开发的一些实用技巧和经验。

## 🍈猜你想问

###  如何与狗哥联系进行探讨

#### 1. 关注公众号【JavaDog程序狗】

公众号回复【入群】或者【加入】，便可成为【程序员学习交流摸鱼群】的一员，问题随便问，牛逼随便吹，目前**群内已有超过330+个小伙伴啦**！！！

![](https://img.javadog.net/blog/flower/%E5%85%A5%E7%BE%A4%E4%BA%8C%E7%BB%B4%E7%A0%81.png)

#### 2.踩踩狗哥博客

[javadog.net](https://www.javadog.net/)

**里面有狗哥的私密联系方式呦 😘**

>大家可以在里面留言，随意发挥，有问必答

##  🍯猜你喜欢

###  文章推荐

[【实操】Spring Cloud Alibaba AI，阿里AI这不得玩一下(含前后端源码)](https://mp.weixin.qq.com/s/ObTHS9Jplkp2ZjcUiBNFfg)

[【规范】看看人家Git提交描述，那叫一个规矩](https://mp.weixin.qq.com/s/EbNWRpSYMdWFv5aUQ2ockw)

[【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目](https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA)

[【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序](https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA)

[【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！](https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg)

![](https://img.javadog.net/blog/flower/55481506e53ab3c49e185537bb1064b2.jpg)