本章主要讲述：

如何更快的上手小程序

如何搭建一个页面以及跳转到另一个页面

如何调用百度API接口实现图像识别技术

如何在微信小程序的后台添加合法域名

私信获取源码，有问题可以关注留言或私信，计算机毕业设计(小程序，网页设计，数据库，php开发等)

一.小程序安装及项目创建

1.1安装工具

1.2项目创建

二.小程序的语法结构

2.1 小程序和HTML5的区别

三.创建页面

3.1功能模块

3.2编写页面

3.3获取access_token

四.项目演示

一.小程序安装及项目创建

1.1安装工具

开发工具：微信开发者工具

推荐使用稳定版，根据机型选择下载

1.2项目创建

1.2.1自己先用邮箱创建账号并激活，然后，进入小程序开发管理

1.2.2在这里获取APPID，用它来创建项目即可

1.2.3 创建完成后，我们可以看到如下界面，分为一下几个功能区：

1.2.4接下来就是认识小程序的目录结构

1.2.5小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

二.小程序的语法结构

2.1 小程序和HTML5的区别

主要说明以下三点

1.标签

2.页面跳转

HTML5: <a href='#'></a>

微信小程序： navigator

navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect;

navigator仅支持5级页面的跳转;

navigator不可跳转到小程序外的链接地址;

3.image

小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。

默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽，auto在这里不生效。(开发者说这样设置的原因是：如果设置 auto ，页面布局会因为图片加载的过程有一个闪的现象(例如高度从 0 到 height )，所以要求一定要设置一个宽度和高度。)

最新的api支持获取图片的高宽。不过这里返回的高宽是px单位，不支持屏幕自适应;

图片包括三种缩放模式scaleToFill、aspectFit、aspectFill，三种缩放模式的实现原理对应如下：

scaleToFill{

background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

}

aspectFit{

background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

}

aspectFill{

background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

}

三.创建页面

3.1功能模块

3.1.1我们先在一个页面添加一个功能模块，index.js(注意路径)，目的是点击'我要当商家'进行跳转

const menuData = [[{title: '我要当商家',tit: '',url: '',type: 'shopping',},],];
onClickCell({ currentTarget }) {const { type } = currentTarget.dataset;switch (type) {case 'shopping': {wx.navigateTo({ url: '/pages/usercenter/shopping/shopping' });break;}}},

3.1.2 我们需要在app.json里面配置跳转目标页面的路径，当输入完后会自动生成文件目录

3.2编写页面

3.2.1写入shopping.json文件中

{"navigationBarTitleText": "商家功能中心","usingComponents": {}
}

3.2.2写入shopping.wxml文件中(简单示例)

<!-- <view class="container"><view class="upload-image-container"><button bindtap="chooseMedia">选择图片</button><image src="{{imageUrl}}" mode="aspectFit"></image></view><view class="result-container"><view class="result-title">识别结果：</view><view class="result-content">{{result}}</view></view>
</view> -->

3.2.3写入shopping.wxss文件中

/* .container {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.upload-image-container, .result-container {margin-top: 20px;
}.upload-image-container button {background-color: #4e7af0;color: white;border-radius: 4px;padding: 10px;font-size: 16px;border: none;margin-bottom: 10px;
}.result-container .result-title {font-size: 18px;margin-bottom: 10px;
}.result-container .result-content {font-size: 16px;
} */

3.2.4写入shopping.js文件中 wx.chooseMedia(Object object)详见官方技术开发文档点击https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

// // pages/usercenter/shopping/shopping.js
// Page({
//   /**
//    * 页面的初始数据
//    */
//   data: {
//     imageUrl: '',
//     result: ''//   },//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad(options) {//   },
// /**
//    * 用户上传图片
//    */
//   chooseMedia: function() {
//     const that = this
//     wx.chooseMedia({
//       count: 1,
//       mediaType: ['image'],
//       sourceType: ['album', 'camera'],
//       // maxDuration: 30,
//       camera: 'back',
//       success: function (res) {
//         const imageBase64 = res.data
//             // 图片上传至百度AI接口进行图像识别
//             wx.request({
//               url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general',
//               method: 'POST',
//               dataType: 'json',
//               header: {
//                 'content-type': 'application/x-www-form-urlencoded'
//               },
//               data: {
//                 access_token: '', // 替换为自己的access_token
//                 image: imageBase64,
//                 BaiDuClassify: 'true'
//               },
//               success: function(res) {
//                 console.log('图像识别成功')
//                 console.log(res)
//                 const result = res.data.result
//                 if (result && result.length > 0) {
//                   that.setData({
//                     classification: result[0].keyword
//                   })
//                 } else {
//                   that.setData({
//                     classification: '无法识别'
//                   })
//                 }
//               },
//               fail: function(res) {
//                 console.log('图像识别失败')
//                 console.log(res)
//                 that.setData({
//                   classification: '无法识别'
//                 })
//               }
//             })
//           }
//         })
//       },
//   /**
//    * 生命周期函数--监听页面初次渲染完成
//    */
//   onReady() {//   },//   /**
//    * 生命周期函数--监听页面显示
//    */
//   onShow() {//   },//   /**
//    * 生命周期函数--监听页面隐藏
//    */
//   onHide() {//   },//   /**
//    * 生命周期函数--监听页面卸载
//    */
//   onUnload() {//   },//   /**
//    * 页面相关事件处理函数--监听用户下拉动作
//    */
//   onPullDownRefresh() {//   },//   /**
//    * 页面上拉触底事件的处理函数
//    */
//   onReachBottom() {//   },

3.3获取access_token

3.3.1首先进入百度AI开发平台以文字识别为例，点击立即使用，然后先注册百度账号进行登录

3.3.2登录后点击创建应用，按照需求创建即可

3.3.3点击应用列表就可以看到相关信息

3.3.4然后点击技术文档，查看获取token的几种方法，就能成功获取access_token

3.3.5注意：我们获取到token的时候写入shopping.js中，然后进行预览，会出这样的错误

3.3.6是因为我们没有在微信小程序的后台添加合法域名,方法如下：

重新编译就可成功

四.项目演示

私信获取源码，有问题可以关注留言或私信，计算机毕业设计(小程序，网页设计，数据库，php开发等)

【微信小程序调用百度API实现图像识别功能】----项目实战相关推荐

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
微信小程序利用百度api达成植物识别
看完本文你可学会: 如何使用百度智能云如何在微信小程序中去接入百度api,达成植物识别的效果如何使用百度智能云? 官网:https://cloud.baidu.com 进入官网,在用户中心下选择图 ...
微信小程序调用高德api定位当前经纬度，根据城市名获取对应经纬度
最近写小程序有一个首页关于定位功能,指定高德API,话不多说,上图: 首先小程序需要先设置定位提示语,在mainfest.json中添加配置scope.userLocation: "mp-w ...
微信小程序调用百度文字转语音API
文字转语音,这里接入的是百度的https://ai.baidu.com/docs#/TTS-API/top里面有详细的介绍怎么去申请.不多说什么直接效果已解决ios播放没有语音的bug,已经亲测魅族 ...
laravel接口+微信小程序调用
微信小程序调用laravel后台接口 laravel后台数据接口 //api路由前缀 Route::group(['prefix'=>'api'],function (){ //在Api文件下 ...
微信小程序调用相册和相机
首先来写好wxml部分:给一个图片列表(img_list)和上传图片的按钮(addimg) <view class="container"><view class ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
微信小程序调用豆瓣电影API（详细）
微信小程序调用豆瓣电影API(详细) 首先给出现在可以使用(有返回值的)的API网址现在是获取数据的过程 1.在 JS 文件中声明一个变量 2.我们写一个获取信息的函数我们打开 ==当前热映的AP ...

【微信小程序调用百度API实现图像识别功能】----项目实战

一.小程序安装及项目创建

1.1安装工具

1.2项目创建

二.小程序的语法结构

2.1 小程序和HTML5的区别

三.创建页面

3.1功能模块

3.2编写页面

3.3获取access_token

四.项目演示

【微信小程序调用百度API实现图像识别功能】----项目实战相关推荐

最新文章

热门文章