一、最终效果

二、代码参考

xxx.wxml代码

<image style="width:100%; height: 300px; " src="{{img}}" ></image>
<text class="tips" wx:if="{{ishow}}">请先选择图片!</text>
<button bindtap="chooseimgTap">选择图片</button>
<button bindtap="plantTap" class="btn" type="primary">植物识别</button>
<!-- 返回结果 -->
<view class="result-content">{{content}}</view>

xxx.wxss代码

.btn {margin-top: 10px;
}.result-title {font-size: 16px;font-weight: bold;padding: 10px 0;font-family: '微软雅黑'；;
}.result-content {border: 1px solid #e0e0e0;font-size: 14px;width: 100%;height: 200px;
}.tips {color: red;font-size: 13px;
}

xxx.js代码

var app = getApp();
var that = '';
Page({/*** 页面的初始数据*/data: {img: '/image/test_default.png',imgB64: '',content: '',ishow: false},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {that = this;},/*** 选择图片*/chooseimgTap: function() {that.setData({ishow: false,content: ''});wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {const tempFilePaths = res.tempFilePaths[0];that.getB64ByUrl(tempFilePaths);that.setData({img: tempFilePaths});}})},/*** 转b64*/getB64ByUrl: function(url) {const FileSystemManager = wx.getFileSystemManager();FileSystemManager.readFile({filePath: url,encoding: 'base64',success(res) {// console.log(res.data);that.setData({imgB64: res.data});}})},/*** 植物识别*/plantTap: function(e) {const imgB64 = that.data.imgB64;if (!imgB64) {that.setData({ishow: true});return;};that.getToken(function(token) {that.getResult(token);});},getToken: function(callback) {wx.request({url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=OyxjHvcGqXlmD3skUUt3GHEl&client_secret=MUMttTySPycE2U9U25MqlCxdoQCpOwfa',data: {},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {var token = res.data.access_token;console.log(token);return callback(token);}});},getResult: function(token) {wx.request({url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=' + token, //仅为示例，并非真实的接口地址method: "post",data: {image: that.data.imgB64},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {console.log(res.data);that.setData({content: JSON.stringify(res.data)});}});}})

xxx.json

{"usingComponents": {},"backgroundTextStyle": "light","navigationBarBackgroundColor": "#333","navigationBarTitleText": "植物识别","navigationBarTextStyle": "white"
}

微信小程序之植物识别demo(百度开发接口）相关推荐

微信小程序-OCR信息识别
微信小程序-OCR信息识别相关代码,github: https://github.com/android-xiao-jun/WeChat-OCR-studly 一.环境的搭建微信开发工具下载地址: ...
php微信里面换行符,如何在字符串中间加换行符js微信小程序实现人脸识别
本文为大家分享了微信小程序人脸识别的具体代码,供大家参考,具体内容如下首先,我们要有开发者工具,今天所说的是后端和前端联合起来实现的. 在PHP的控制器中写一个upload方法,代码如下: publ ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序实现身份证识别功能
微信小程序实现身份证识别功能 1,首先登录小程序公众平台 2,进入设置第三方设置 3,添加ocr插件 4,添加完成后 ,需要领取免费额度,是一天100次; 链接然后就是代码编写部分首先在app. ...
微信小程序使用身份证识别
因公司业务需求以及方便用户,需要用户上传身份证后自动识别其中姓名身份证号码信息,方便用户操作,不需要上传身份证后再去重新输入姓名以及身份证号码.因此记录一下微信小程序ocr可识别银行卡.身份证.驾驶 ...
微信小程序的考勤管理Demo，包括前后端及数据库等内容
这是一个微信小程序的考勤管理Demo,包括前后端及数据库等内容.如有错误或建议,欢迎指出. 前端:微信小程序框架后端:koa框架基于express的新一代框架文件:url80.ctfile.com ...
微信小程序引入高德地图Demo 快速上手
文章目录前言一.获取高德key 二.引入官方实例总结前言本文参照官方文档进行编写最后引入官方实例最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...
微信小程序：商城系列专辑（开发指南+精品Demo）
商城开发指南: 微信小程序商城模块 | 链接使用zanui开发小程序微商城(模板组件的开发规范)| 链接 ecshop商城开发:用户信息的获取和缓存,地址信息的缓存 | 链接微信小程序商城 - 基 ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...

微信小程序之植物识别demo(百度开发接口）

一、最终效果

二、代码参考

xxx.wxml代码

xxx.wxss代码

xxx.js代码

xxx.json

微信小程序之植物识别demo(百度开发接口）相关推荐

最新文章

热门文章