【实操】uniapp纯前端搞个识别植物花草小程序

前言

🍊缘由

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

🐣闪亮主角

大家好，我是JavaDog程序狗

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

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

😈你想听的故事

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

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

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

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

🎁如何获取源码

公众号：【JavaDog程序狗】

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

正文

🎯主要目标

1.小程序设计思路

2.小程序实操代码

🍪目标讲解

一.小程序设计思路

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

1. 参考同类型小程序

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

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

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

2. 确定主要功能及流程

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

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

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

---

二.小程序实操代码

1. 代码结构

2. 主页index.vue

主要代码

<template>
	<view class="index">
		<div class="tools">
			<div class="camera" style="margin-bottom: 20px;">
				<button class="button" @click="onCamera">
					<uni-icons type="camera