使用微信小程序调用飞桨PaddleX平台自行训练的模型——微信小程序用训练的牡丹花模型Demo测试_微信小程序 百度飞浆库

🎼个人主页：【Y小夜】

😎作者简介：一位双非学校的大二学生，编程爱好者，

专注于基础和实战分享，欢迎私信咨询！

🎆入门专栏：🎇【MySQL，Java基础，Rust】

🎈热门专栏：🎊【Python，Javaweb，Vue框架】

感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️

🎁找到平台自己中的token以及URL

🎈Token

访问请前往飞桨AI Studio星河社区-人工智能学习与实训社区 (baidu.com) 查看 访问令牌 并替换

🎈URL

查看自己部署的模型，里面的信息

🎁编写小程序

🎈index.wxml

  <image src=\"{{ img }}\" mode=\'aspectFit\' />  拍照/选取图片识别 <view wx:if=\"{{result.length>0}}\" class=\"table\"> <view wx:for=\"{{result}}\" wx:key=\"key\"> <view wx:if=\"{{item.score>0.5}}\"> 此花为“{{item.name}}”牡丹花  <view wx:if=\"{{item.name===\'莲鹤\'}}\">莲鹤牡丹，引进品种。花的颜色是白色的，花瓣宽大圆整，柱头、房衣、花丝均为白色。株型中高，直立晚花品种。看上去洁白无瑕，干净神圣，芍药属植物。名字的寓意也很吉利，有年年益寿的含义。 <view wx:elif=\"{{item.name===\'海黄\'}}\">海黄牡丹多年生，植株较高，株形半开张，茎青绿色，小型长叶，叶边红，有锯齿，黄绿色泛红。花蔷薇型，黄色，外瓣大，向内渐小，排列紧密，雄蕊多，柱头黄，房衣浅包 <view wx:elif=\"{{item.name===\'八千代椿\'}}\">八千代椿，菊花型。花胭脂红色。花瓣肥厚，鲜艳，硕大，色彩艳丽。雄蕊多，花丝外围短，近花心处长，黑紫色，花蕾长圆尖形，花径16厘米，花态直上，花开高出叶面，开花量大，中花偏晚。大型长叶，小叶瘦长尖，绿色有红晕，叶背有毛。新枝及叶柄青绿色，柄凹紫红色，小叶柄长，枝叶较稀。植株直立型。此品于80年代日本国与洛阳牡丹交流时引入。经多年的培育，如今不但在洛阳等地大量繁殖，在其他地区也广泛栽植。 <view wx:elif=\"{{item.name===\'赵紫\'}}\">它是一种毛茛科、芍药属植物。形态特征抗逆、优质；皇冠型花蕾扁圆形；花紫色；外瓣2轮；形大；质硬；基部有紫色晕。生长环境亚热带；温带。分布范围山东省。 <view wx:elif=\"{{item.name===\'长寿乐\'}}\"> 长寿乐，是一种毛茛科、芍药属植物。形态特征抗病、抗虫、抗逆、优质；花紫色略带蓝色；蔷薇型；花瓣质硬；宽大平展；基部墨紫色斑雌雄蕊正常；房衣紫红色。生长环境亚热带。  <view wx:elif=\"{{item.name===\'花竞\'}}\">花竞，它是日本品种，菊花型。形态特征花蕾圆形。花粉红色，花径23cm×9cm。花瓣多轮，排列整齐，雌雄蕊正常，房衣、柱头均为白色。花梗长，花朵直上。花期中。植株高大，直立。 <view wx:elif=\"{{item.name===\'镰田锦\'}}\">镰田锦，是一种毛茛科、芍药属植物。形态特征抗逆、优质；菊花型；花浅粉色；花瓣形状相似；排列整齐；层次分明；自外向内逐渐变小。生长环境亚热带；温带。分布范围山东省 <view wx:elif=\"{{item.name===\'新日月锦\'}}\">新日月锦，牡丹花的一种，产于山东菏泽。科名：芍药科科拉丁名：Paeoniaceae属拉丁名：Paeonia属名：芍药属种名或亚种名：牡丹种拉丁名：P.suffruticosa原产地：菏泽来源地：山东菏泽百花园归类编码：资源类型：选育品种主要特性：高产，抗逆主要用途：药用，生态，观赏气候带：暖温带，温带生长习性：晚花，中度喜光稍耐半阴，喜温和，具有一定耐寒性 <view wx:elif=\"{{item.name===\'中国龙\'}}\">美国品种: 花深红色(185B)，单瓣型。花径15cmx6cm，侧开。花瓣2轮，质软，基部具大紫黑色斑。雌雄蕊正常，花丝浅红紫色。柱头红色。房衣红紫色。植株半开张。新枝稍长(35cm)。叶狭长深裂，质厚，叶面有红晕。叶柄斜伸，柄凹紫红色。生长势中，分枝力强，萌蘖枝多，花期晚。美桑德斯1948年育出。(摘自《中国牡丹》)。江南红豆園 2021年引进品种，具有狭叶滇牡丹基因，丰花品种，当年枝条就能开花。 <view wx:elif=\"{{item.name===\'新七福神\'}}\">牡丹-新七福神是一种毛茛科、芍药属植物。七福神是日本神话中主持人间福德的七位神。由于这种牡丹的枝条较多，且高低错落，花朵凸显富贵之态，便取名为“新七福神”。 <view wx:elif=\"{{item.name===\'旭港\'}}\">旭港，牡丹花品种。花火红色，蔷薇型。花色为大红色，花大色艳，但花期较晚，容易养活，适合家庭及新手种植。“旭港”牡丹：属于日本牡丹，花期晚，花火红色，花朵蔷薇型，花朵侧开，花瓣多轮，较圆整，雌雄蕊正常。 <view wx:elif=\"{{item.name===\'岛大臣\'}}\">岛大臣, 国外牡丹交流品种，菊花型，花紫红色，花瓣6轮以上，花瓣形状相似，层次分明，自外向内逐渐变小，雄蕊正常或减少变小，中花，中度喜光稍耐半阴，喜温和，具有一定耐寒性，忌酷热，适宜高燥，惧湿涝。 <view wx:elif=\"{{item.name===\'白王狮子\'}}\">白王狮子，花白色，菊花型。花梗硬，花态直上。晚开品种。株型直立，中型长叶，叶尖，稍黄绿，稍有红晕，叶柄上凹紫红色，花无莲鹤质感厚，房衣、柱头、花丝、乳黄色，花药黄色，花期晚于莲鹤，花药长。 <view wx:elif=\"{{item.name===\'花王\'}}\">“花王”牡丹：属于日本牡丹，花期中晚，花紫红色，花朵蔷薇型，花茎粗，花朵直上，花瓣排列紧密，由外至内逐轮缩小，雄蕊稍有瓣化，雌蕊变小。株型高大直立，枝粗壮，一年生枝较长，叶片大型长叶，生长势强，分枝力强，成花率高，萌蘖枝少，不耐早春寒，抗病性弱。 <view wx:elif=\"{{item.name===\'芳纪\'}}\">芳纪牡丹株型较高大，直立，枝条粗壮。叶子为中型长叶，叶面黄绿色，边缘微下卷，叶柄红色。成花率较高，萌蘖枝较少，根部比较稀疏。 芳纪性喜温暖、凉爽、干燥、阳光充足的环境。喜阳光，也耐半阴，耐寒，耐干旱，耐弱碱，忌积水，怕热，怕烈日直射。 <view wx:else=\"{{item.name===\'寒樱狮子\'}}\">寒樱狮子，花粉色，盛开后端部变白，菊花型。花径23cm×8cm。花瓣形大，端部有齿裂，基部具红晕；雌雄蕊正常或稍有瓣化，房衣柱头紫红色。植株高大直立。大型长叶，叶尖下垂，幼叶颜色深绿；分枝能力、生长势强，萌蘖枝多，成花率高。花朵硕大。有清香，花期中。有秋冬季二次开花现象。    

        这段代码是一个微信小程序的页面结构，主要用于展示牡丹花的图片和信息。具体解释如下：

1.  标签用于创建一个容器，类似于 HTML 中的 
    标签。
2.  标签用于显示图片，mode=\'aspectFit\' 表示图片保持原始宽高比，缩放至完全显示。
3.  标签用于创建一个按钮，bindtap=\"uploads\" 表示点击按钮时触发名为 uploads 的函数，class=\"up\" 为按钮设置样式类。
4. wx:if=\"{{result.length>0}}\" 表示当 result 数组的长度大于 0 时，显示以下内容。
5. wx:for=\"{{result}}\" 表示遍历 result 数组，将每个元素赋值给 item。
6. wx:if=\"{{item.name===\'莲鹤\'}}\" 等条件判断语句，根据 item.name 的值显示不同的牡丹花信息。
7.  标签内部的内容是各个牡丹花的详细信息，包括形态特征、生长环境、分布范围等。
8. wx:else=\"{{item.name===\'寒樱狮子\'}}\" 表示当 item.name 不等于前面的任何一个值时，显示关于 \"寒樱狮子\" 的信息。

🎈index.wxss

.image { width: 100%; height: 360rpx;}.container { margin-top: -110px; /* background-image: url(\"https://www.xsshome.cn/timg.jpg\"); */ background-repeat: no-repeat; background-size: auto; background-position: bottom; background-position-x: right;}button { font-family: 微软雅黑;}.page-body-info { display: flex; box-sizing: border-box; padding: 30rpx; height: 420rpx; border-top: 1rpx solid #d9d9d9; border-bottom: 1rpx solid #d9d9d9; align-items: center; justify-content: center;}.up { color: rgb(253, 253, 253); font-size: 20px; font-family: 微软雅黑; width: 200px; height: 50px; vertical-align: middle; text-align: center; line-height: 45px; border-radius: 25px; background-color: #87c0f5;}.img_wrap { margin-bottom: 10px; width: 750rpx; height: 750rpx; background: #87c0f5;}image { width: 100%; height: 100%; max-height: 1}.msg { margin: 10px 0; text-align: center;}.table { margin-top: 10rpx; border: 0px solid darkgray; width: 100%;}.tr { display: flex; width: 100%; justify-content: center; height: 80rpx; }.td { font-family: 微软雅黑; font-size: 35rpx; width:100%; display: flex; justify-content: center; text-align: center; align-items: center;}.bg-g{ background: white;}.baikeform{ font-size: 20rpx; color: #c0c0c0; border-top: 1rpx solid #eeeeee; margin:30rpx 40rpx 0rpx 40rpx; padding: 20rpx;}.jieshao { color: #ffffff; /* 更亮的文字颜色，以便在深色背景下更容易阅读 */ width: 90%; /* 宽度调整为屏幕宽度的90%，以适应不同屏幕大小 */ max-width: 600rpx; /* 最大宽度限制，避免在宽屏幕上过宽 */ height: auto; margin: 20rpx auto; /* 增加上下边距，并保持水平居中 */ padding: 20rpx; /* 添加内边距，增加文本与边框的距离 */ background-color: #4CAF50; /* 更好看的背景颜色 */ border-radius: 15rpx; /* 稍微增大圆角 */ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果，增加层次感 */ font-size: 28rpx; /* 增大字体大小，使内容更易读 */ line-height: 1.6; /* 增大行高，使文本不那么紧凑 */}.i7{ width: auto; height: 50rpx;}/* 优化其他相关样式 */.table { width: 100%; /* 使表格宽度充满容器 */ display: table; /* 使用表格布局 */}.table .td { font-size: 32rpx; /* 增大标题字体大小 */ color: #333333; /* 更深的文字颜色 */ padding: 10rpx 20rpx; /* 添加内边距 */ background-color: #f8f8f8; /* 轻微的背景颜色 */ border-radius: 10rpx; /* 添加圆角 */ margin-bottom: 10rpx; /* 添加底部边距 */}

🎈 index.json

{ \"navigationBarTitleText\": \"牡丹慧灵\", \"onReachBottomDistance\": 200}

 🎈index.js

var app = getApp();// var api = require(\'../../utils/baiduai.js\'); // 假设这是之前用于调用百度AI的模块Page({ data: { motto: \'PaddleX\', result: [], images: {}, img: \'/image/牡丹花识别2.jpg\', base64img: \'\' }, onShareAppMessage: function () { return { title: \'PaddleXDemo小程序\', path: \'/pages/index/index\', success: function (res) { wx.showToast({ title: \'分享成功\', icon: \'success\', duration: 500 }); }, fail: function (res) { wx.showToast({ title: \'分享取消\', icon: \'loading\', duration: 500 }); } } }, clear: function (event) { wx.clearStorage(); }, bindViewTap: function () { wx.navigateTo({ url: \'../logs/logs\' }) }, uploads: function () { var that = this; wx.chooseImage({ count: 1, sizeType: [\'compressed\'], sourceType: [\'album\', \'camera\'], success: function (res) { if (res.tempFiles[0].size > 4096 * 1024) { wx.showToast({ title: \'图片文件过大哦\', icon: \'none\', mask: true, duration: 1500 }); } else { that.setData({ img: res.tempFilePaths[0] }); } wx.showLoading({ title: \"分析中...\", mask: true }); var fs = wx.getFileSystemManager(); fs.readFile({ filePath: res.tempFilePaths[0].toString(), encoding: \'base64\', success: function (res) { // 获取到图片的base64，准备发送请求 that.sendToPaddle(res.data); } }); }, }); }, sendToPaddle: function (base64Img) { var that = this; const API_URL = \"\"; // 飞桨平台模型的服务地址 const TOKEN = \"\"; // 飞桨平台的访问令牌 const headers = { \"Authorization\": `token ${TOKEN}`, \"Content-Type\": \"application/json\" }; const payload = { image: base64Img }; wx.request({ url: API_URL, method: \'POST\', data: payload, header: headers, success: function (resp) { wx.hideLoading(); if (resp.statusCode === 200) { const result = resp.data.result; // 处理类别名称，移除数字和空格 const processedCategories = result.categories.map(category => { return {  ...category,  name: category.name.replace(/\\s+/g, \'\').replace(/\\d+/g, \'\') }; }); wx.setStorageSync(\'dataList\', JSON.stringify(processedCategories)); that.setData({ result: processedCategories }); }else { wx.showModal({ showCancel: false, title: \'错误\', content: \'服务器返回错误\' }); } }, fail: function () { wx.hideLoading(); wx.showModal({ showCancel: false, title: \'请求失败\', content: \'无法连接到服务器\' }); } }); }, onLoad: function () { }, onReachBottom: function () { wx.showToast({ title: \'已经到最后了！！！\', icon: \"none\" }); }});

        这是一个微信小程序的代码，主要功能是上传图片并调用百度AI进行图像识别。以下是代码的主要部分：

1. data对象：定义了页面的初始数据，包括motto、result（用于存储识别结果）、images（未使用）、img（图片路径）和base64img（图片的base64编码）。

2. onShareAppMessage函数：定义了小程序分享的功能，当用户分享时，会显示一个成功的提示框。

3. clear函数：清空本地存储的数据。

4. bindViewTap函数：跳转到日志页面。

5. uploads函数：选择一张图片，如果图片大小合适，将其路径设置为img，并读取图片的base64编码，然后调用sendToPaddle函数发送请求。

6. sendToPaddle函数：向指定的API_URL发送POST请求，携带图片的base64编码和其他必要的信息。请求成功后，处理返回的结果，将类别名称进行处理，移除数字和空格，并将结果存储到本地存储中。

7. onLoad函数：页面加载时执行的操作，这里没有具体实现。

8. onReachBottom函数：当用户滑动到页面底部时，显示一个提示框。

🎁效果演示

识别前：

传入图片后：