微信小程序–智能接口
通过微信小程序开发调用百度人工智能接口，从而实现很多有趣的功能。文章目录
- 微信小程序--智能接口
- 前言
- 一、百度智能云的认识
- 1-1 注册
- 1-2 页面说明
- 1-3 功能初识
- 1-4 api 接口
- 二、百度智能接口的创建
- 2-1 创建接口
- 2-1-1 点击创建新应用
- 2-1-2 应用名称
- 2-2 api 接口的疏导--图像识别为例
- 2-2-1 百度自己的案例
- 2-2-2 接口简介
- 2-2-2 请求接口
- 2-2-4 Access Token
- 三：微信小程序案例开发
- 3-1 微信小程序-相机
- 3-1-1 camera
- 3-2 通过百度接口 来分析 图片
- 3-2-1 --logo识别为例子
- 3-2-2 获取 百度 token
- 四：页面渲染--微信小程序搜索-‘识图小新’（看看效果）
- 总结
前言
百度智能云是百度公司提供的公有云平台，于2015年正式开放运营。
百度智能云提供了很多的免费的人工智能接口，我们可以通过微信小程序调用百度接口实现很多功能，比方：人脸识别，文字识别，自然语言处理。
提示：以下是本篇文章正文内容，下面案例可供参考
一、百度智能云的认识
百度智能门户（AIPage）是百度智能云面向中小企业用户推出的一款智能化构建网站和小程序的SAAS应用产品。用户无需任何编程基础即可上手操作，如同做PPT一样拖拽式设计制作自己的网站和小程序，内置海量行业模版及组件，轻松打造“PC网站、手机网站、百度智能小程序、微信小程序、支付宝小程序”五个端的站点。产品支持电商及预约功能，可广泛适用各类行业用户的实际应用场景。强势集成多项百度搜索权益及AI智能获客能力，帮助企业精准把握每一条商机信息，高效提升推广和转化效果！
1-1 注册
百度智能云连接
注意：有百度网盘，用手机打开百度网盘扫码登录，没有的话就自己按照步骤注册，过程很简单。
1-2 页面说明
说明：登录成果后就会出现基本信息：账户id，姓名等信息。
1-3 功能初识
打开管理中台
1-4 api 接口
二、百度智能接口的创建
2-1 创建接口
2-1-1 点击创建新应用
输入自己的应用名称，其他先别管呢，写下自己的应用描述，然后直接创建。
2-1-2 应用名称
创建好了后，点击应用名称
这个时候留意留意: API KEY ,SECRET KEY ，接下来的微信小程序 会用到。
2-2 api 接口的疏导–图像识别为例
点击—查看文档选项
2-2-1 百度自己的案例
健身房APP结合菜品识别开发案例
连锁健身品牌技术部门负责人马主管，负责开发健身房的APP。由于健身和减脂塑形讲究“三分练，七分吃”，该吃什么、吃多少是非常重要的，越来越多的会员通过APP中的饮食板块来指导每天的饮食。但目前饮食版块需要用户手动输入食物名称来计算卡路里，用户体验很差，有时候会员们并不能准确的输入食物名称，造成他们无法追踪每天从饮食中摄入的卡路里。
于是马主管准备在APP中增加一个功能，用户随手拍摄食物照片，一键上传即可识别图片中菜品名称，从而获取菜品类别、营养成份及参考卡路里含量等信息，根据识别结果进一步提供饮食推荐、健康管理方案。当他着手做这件事时因缺少相关技术，使得项目进度缓慢。通过对市面上多家厂商能力的比较，马主管选择了百度图像识别中的菜品识别产品，实现了50000种以上菜品的识别，准确率在90%以上；且随着百度AI菜品数据库的持续更新，识别率不断提升，极大的降低了APP的开发成本，也为用户提供了便捷的操作方式及良好的用户体验。
2-2-2 接口简介
文档主要针对API开发者，描述百度图像识别接口服务的相关技术内容
接口名称| 接口能力简要描述|
图像单主体检测| 识别图像中的主体具体坐标位置。|
图像多主体检测（邀测）| 检测出图片中多个主体，并给出位置、标签和置信得分。|
通用物体和场景识别高级版| 识别图片中的场景及物体标签，支持10w+标签类型。|
菜品识别| 检测用户上传的菜品图片，返回具体的菜名、卡路里、置信度信息。|
| 自定义菜品识别 | 入库自定义的单菜品图，实现上传多菜品图的精准识别，返回具体的菜名、位置、置信度信息 |
|---|---|
| logo商标识别 | 识别图片中包含的商品LOGO信息，返回LOGO品牌名称、在图片中的位置、置信度。 |
| 动物识别 | 检测用户上传的动物图片，返回动物名称、置信度信息。 |
| 植物识别 | 检测用户上传的植物图片，返回植物名称、置信度信息。 |
| 果蔬食材识别 | 检测用户上传的果蔬类图片，返回果蔬名称、置信度信息。 |
| 地标识别 | 检测用户上传的地标图片，返回地标名称。 |
| 红酒识别 | 识别图像中的红酒标签，返回红酒名称、国家、产区、酒庄、类型、糖分、葡萄品种、酒品描述等信息。 |
| 货币识别 | 识别图像中的货币类型，返回货币名称、代码、面值、年份信息，可识别百余种国内外常见货币。 |
2-2-2 请求接口
2-2-2 调用方发
请求URL数据格式
向API服务地址使用POST发送请求，必须在URL中带上参数：
access_token: 必须参数，参考“Access Token获取”。
注意：access_token的有效期为30天，需要每30天进行定期更换；
https://aip.baidubce.com/rest/2.0/image-classify/v2/dish?access_token=24.f9ba9c5241b67688bb4adbed8bc91dec.2592000.1485570332.282335-8574074
2-2-4 Access Token
请求URL数据格式
向授权服务地址https://aip.baidubce.com/oauth/2.0/token发送请求（推荐使用POST），并在URL中带上以下参数：
grant_type： 必须参数，固定为client_credentials；
client_id： 必须参数，应用的API Key；
client_secret： 必须参数，应用的Secret Key；
三：微信小程序案例开发
说明：微信小程序的基本认识请看我上篇文章，这里就直接开发了
创建你需要的页面。
3-1 微信小程序-相机
微信官方文档
3-1-1 camera
属性 类型 默认值 必填 说明 最低版本
<camera style="width: 100%; height: {{wh}}px" device-position="{{position}}" device-position camara 的前后摄像头
// wh 动态获取 手机高度
wx:if="{{src===''}}">
//三张小图标 绑定含函数 <cover-view class="btns-box"> <cover-image src="/assets/images/icon/chode.png" bindtap="ChosePho" ></cover-image>//从本地选择文件，
<cover-image src="/assets/images/icon/camera.png" bindtap="takephone"></cover-image>
//拍照
<cover-image src="/assets/images/icon/reverse.png" bindtap="reverse" ></cover-image>
//摄像头的切换</cover-view>
</camera>
page({
data: {wh:0,position:'back',src:'',
}/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const syinfo = wx.getSystemInfoSync()// console.log(syinfo)this.setData({
wh:syinfo.screenHeight
//getSystemInfoSync 函数获取 手机屏幕的高度})},})
// 切换摄像头reverse(){
this.setData({position:this.data.position==='back'?'front':'back'//三元表达式 当 position = back 是true 的时候 执行 position= front 否则 ：back
})takephone(){// 上下文const ctx = wx.createCameraContext()// 调用createCameraContext的对象ctx.takePhoto({quality: 'high', //相片质量//成果后的回调函数success: (res) =>{//查看返回结果 ： res// console.log(res)this.setData({// res.tempImagePath 就是拍照后的图片，将他保存在data中 srcsrc:res.tempImagePath },()=>{this.getFaceInfo()})}})},从本地中选择图片ChosePho(){// chooseImagewx.chooseImage({count: 1,// 原图sizeType:['original'],// 图片尺寸：原图sourceType:['album'],// 选择图片的来源：['album', 'camera']success:(res)=>{// console.log(res)// 三个=，判断值 还判断类型if(res.errMsg==='chooseImage:ok' && res.tempFilePaths.length!==0){this.setData({src:res.tempFilePaths[0]}, ()=>{this.getFaceInfo()} )}}})},
说明：
| 属性 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| brand | string | 设备品牌 | 1.5.0 |
| model | string | 设备型号 | |
| pixelRatio | number | 设备像素比 | |
| screenWidth | number | 屏幕宽度，单位px | 1.1.0 |
| screenHeight | number | 屏幕高度，单位px | 1.1.0 |
| windowWidth | number | 可使用窗口宽度，单位px | |
| windowHeight | number | 可使用窗口高度，单位px | |
| statusBarHeight | number | 状态栏的高度，单位px | 1.9.0 |
| language | string | 微信设置的语言 | |
| version | string | 微信版本号 | |
| system | string | 操作系统及版本 | |
| platform | string | 客户端平台 | |
| fontSizeSetting | number | 用户字体大小（单位px）。以微信客户端「我-设置-通用-字体大小」中的设置为准 | 1.5.0 |
| SDKVersion string | 客户端基础库版本 | 1.1.0 | |
| benchmarkLevel | number | 设备性能等级（仅 Android）。取值为：-2 或 0（该设备无法运行小游戏），-1（性能未知），>=1（设备性能值，该值越高，设备性能越好，目前最高不到50） | 1.8.0 |
| albumAuthorized | boolean | 允许微信使用相册的开关（仅 iOS 有效） | 2.6.0 |
| cameraAuthorized | boolean | 允许微信使用摄像头的开关 | 2.6.0 |
| locationAuthorized | boolean | 允许微信使用定位的开关 | 2.6.0 |
| microphoneAuthorized | boolean | 允许微信使用麦克风的开关 | 2.6.0 |
| notificationAuthorized | boolean | 允许微信通知的开关 | 2.6.0 |
| notificationAlertAuthorized | boolean | 允许微信通知带有提醒的开关（仅 iOS 有效） | 2.6.0 |
| notificationBadgeAuthorized | boolean | 允许微信通知带有标记的开关（仅 iOS 有效） | 2.6.0 |
| notificationSoundAuthorized | boolean | 允许微信通知带有声音的开关（仅 iOS 有效） | 2.6.0 |
| bluetoothEnabled | boolean 蓝牙的系统开关 | 2.6.0 | |
| locationEnabled | boolean | 地理位置的系统开关 | 2.6.0 |
| wifiEnabled | boolean | Wi-Fi 的系统开关 | 2.6.0 |
| safeArea | Object | 在竖屏正方向下的安全区域 | 2.7.0 |
| locationReducedAccuracy | boolean | true 表示模糊定位，false 表示精确定位，仅 iOS 支持 | |
| theme | string | 系统当前主题，取值为light或dark，全局配置"darkmode":true时才能获取，否则为 undefined （不支持小游戏） | 2.11.0 |
3-2 通过百度接口 来分析 图片
3-2-1 --logo识别为例子
3-2-2 获取 百度 token
注意：不懂的化=话 回头看看 上面的内容
data: {wh:0,position:'back',src:'',plain:true,token:'',faceInfo:{}},getFaceInfo(){// 1token// 2参数// 3发请求 获取数据wx.request({method:'POST',url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=文档对应内容&client_id=API Key&client_secret=Secret Key',//之前自己api接口的那串字符//成果回调函数success:(res)=>{// console.log('token',res)this.setData({//Access Token我们就获取了。token:res.data.access_token}, ()=>{2： 马上执行参数函数this.processParams()})}})},//参数处理过程processParams(){创立对象：paramsconst params={image:''//我们需要携带的参数，把本地图片的格式转换为64编码，才能识别}//文件管理器：处理文件const fileManager = wx.getFileSystemManager()fileManager.readFile({//图片路径filePath :this.data.src,// 以什么格式读取文件encoding:'base64',成果回调函数success:(res)=>{// console.log("11",res)params.image=res.data//讲转换好的base64图片给 params.image// console.log("21", params)执行：百度智能接口的调用。this.testFace(params)}})},
// 发送给、请求获取数据testFace(params){加载提示wx.showLoading({title: '正在测试...',})//request请求wx.request({method:'POST', //post请求url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/logo?access_token='+this.data.token,//字符串拼接 this.data.token 获取的token// 请求头header: {'Content-Type': 'application/x-www-form-urlencoded'},// 请求体data:params,//上面获取的参数//成果回调函数success:(res)=>{// console.log(22,res)//判断一下下呢：如果 request:ok 获取的结果 不为空就执行
if(res.errMsg === 'request:ok' && res.data.result !== null){// console.log(22,res.data.result)//看看百度接口给我们返会的this.setData({//数组赋值logoInfo:res.data.result})}},complete: () => {wx.hideLoading()}}) },
百度logo为例：
四：页面渲染–微信小程序搜索-‘识图小新’（看看效果）
关于页面渲染的问题就应该很简单的，讲数组 logoInfo{
内容。。。。。。。。
}
通过wx：for 循环 渲染在页面中就可以了
<view class="logo" wx:for="{{logoInfo}}"wx:key="index" ><text>可能性：{{item.probability}}</text><text>商标：{{item.name}}</text>
</view>
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，讲了一些百度人工智能接口说明和一些基本的使用，还有微信小程序提供的api接口，函数的使用。
希望大家开开心心的学习，加油.
