theme

云开发模式开发微信小程序

本文是基于开发"火眼金睛识物"小程序做的开发详情记录。在微信小程序搜索“火眼金睛识物”即可体验该小程序。也可直接扫描小程序二维码。

# 账号注册

# 微信小程序

申请注册 (opens new window)小程序账号
在小程序后台进入，开发>开发设置>AppId
下载微信开发者工具

# 百度AI开放平台

申请注册百度AI开发 (opens new window)账号，登录百度智能云开发平台，在产品服务中找到人工智能>图像识别
在应用中创建一个新的应用，选择需要使用的api接口。
创建成功后有一个AppID、API Key、Secret Key，这三个是接口调用必须的字段。

基础准备工作就绪，接下来创建项目，开始小程序的开发

# 新建小程序项目

打开小程序开发工具,选择小程序
填写要开发项目的名称,填写注册的微信appId,后端服务选择小程序+云开发模式
点击新建,创建项目

# 首页开发

效果图预览：

在pages的index文件夹的index.wxml下创建页面结构

<view class="container">
// 只展示一个按钮示例，其余的类似
// view相当于html中的div标签
// bindtab绑定点击事件
// data-kind为了给事件传参，小程序无法直接在事件名称里传参，通过h5的方法设置data-xxx可以传参
// start... ...
	<view class="btn_wrapper zhiwu" bindtap="showSheet" data-kind="zhiwu">
		<image class="btn_bg" src="../../assets/images/zhiwu.png" />
		<button class="btn" size="mini">植物识别</button>
	</view>
// end ... ...
</view>

1
2
3
4
5
6
7
8
9
10
11
12

在pages的index文件夹的index.wxss下设置页面样式

.container{
  width: 750rpx;
  height: 100vh;
  display: flex;
  background: url("这里一定要是网络地址图片") no-repeat;
  justify-content: center;
  background-size: 100%;
  background-color: #014775;
}
.btn_wrapper{
  position: absolute;
  width: 175rpx;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

在pages的index文件夹的index.js下设置点击按钮的事件

const app = getApp()
Page({
  showSheet: (event) => {
    let {kind} = event.currentTarget.dataset  //用于解析点击的哪个按钮
    // 调用微信默认的弹出框，用来选择上传图片的方式
    wx.showActionSheet({
      itemList: ['拍照', '本地上传'],
      success(res) {
        let flag = res.tapIndex;
        let sourceType = ""
        if (flag == 0) {
          sourceType = "camera"
        } else if (flag == 1) {
          sourceType = "album"
        }
        // 选择图片
        wx.chooseImage({
          count: 1,
          sizeType: ['compressed'], // 压缩图片
          sourceType: [sourceType],
          success: function (res) {
             //本地图片上传至网络后的名称，临时存储，只能在微信系统查看，可以通过地址查看到图片，在detail页面中的src就是用的这个地址filePath
             const filePath = res.tempFilePaths[0]
            // 上传到云存储中图片后缀部分的名称，前面还有一些环境的前缀设置，如cloud://minimovie-dev.6d6129-minipro-dev-1259595705/
            const cloudPath = 'scanImage/' + Date.now()+parseInt(Math.random()*99999) + filePath.match(/\.[^.]+?$/)[0]
            // 弹出一个系统提示框，正在上传图片
            wx.showLoading({
              title: '图片上传中',
            })
            // 调用微信上传文件的云函数
            wx.cloud.uploadFile({
              cloudPath,
              filePath,
              success: resup => {
              // resup.fileID为上传至云存储后的整个图片的命名即fileId，这个只用来从云存储中查找图片，如：cloud://minimovie-dev.6d6129-minipro-dev-1259595705/scanImage/158632063931798156.jpg
                wx.navigateTo({
                  url: `../detail/detail?pic=${filePath}&&fileId=${resup.fileID}&&kind=${kind}`,
                })
              },
              fail: e => {
                wx.showToast({
                  icon: 'none',
                  title: '上传失败',
                })
              },
              complete: () => {
                wx.hideLoading()
              }
            })

          },
          fail: e => {
            console.error(e)
          }
        })
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 详情信息开发

效果图预览：

在pages的detail文件夹的detail.wxml下创建页面结构

<view class="container">
  <!--动态设置image的src路径地址-->
  <image src="{{imgUrl}}" mode="aspectFit"></image>
  <!--wx:if用于判断对象是否存在-->
  <view wx:if="{{resultArr}}">
     <!--wx:for用于数组对象的循环展示-->
    <view class="wrapper" wx:for="{{resultArr}}" wx:key="name" wx:for-index="idx" wx:for-item="itemName">
      <text class="kindName">{{itemName.name}}</text>
      <text>概率为：{{itemName.score}}%</text>
    </view>
  </view>
  <view class="share">
    <button type="primary" open-type="share" class="btn">分享给好友</button>
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在pages的detail文件夹的detail.wxss下设置页面样式

/* miniprogram/pages/detail.wxss */
.container{
  width: 100vw;
  height: 100vh;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.wrapper{
  display: flex;
  width: 650rpx;
  justify-content: space-between;
  font-size: 16px;
  margin-top: 20rpx;
  border-bottom: 1px solid #08375F;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在pages的detail文件夹的detail.js下设置事件,涉及到云函数调用，云数据库存储

//初始化云数据库
const db = wx.cloud.database();
Page({
  //页面的初始数据
  data: {
    imgUrl: "",
    resultArr: null,
    resultObj: null
  },
  onLoad:function(options){
    //解析通过路径传递的参数
    let {pic, fileId, kind} = options
    // 给data下的imgUrl设置数据
    this.setData({
        imgUrl: pic
    })
    // 调用云函数,baiduImage云函数为自己创建的，在cloudfunctions中创建文件夹
    // 创建的详细过程，看云开发>云函数>新建云函数
    wx.cloud.callFunction({
      name: "baiduImage",
      //data里的两个参数，供云函数调用
      data: {
        fileId,
        kind
      },
      success: (res) => {
        // 云数据库查询，首先进行查找openId是否存在，如果不存在，则进行add添加
        db.collection('scanImage').where({
            _openid: res.result.wxContext.OPENID
          })
          .get({
            success: function (resIn) {
              if (resIn.data.length == 0) {
                // 云数据库存储
                db.collection("scanImage").add({
                  data: {
                    SOURCE: res.result.wxContext.SOURCE,
                    CLIENTIP: res.result.wxContext.CLIENTIP
                  }
                })
              }
            }
          })
	    // 将云函数查找的结果进行赋值，然后返回到页面进行展示
        this.setData({
            resultArr: res.result.result
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '识别失败请重试',
          duration: 3000,
          complete: () => {
            setTimeout(() => {
              wx.navigateTo({
                url: `../index/index`,
              })
            }, 3000)
          }
        })
      }
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 云开发

在前端使用云函数时,需要加上"wx-"开头。在云开发中使用cloud函数时，不用加"wx-"。

使用云开发必须在miniprogram的app.js中初始化wx.cloud.init，必须设置开发环境（唯一的），在cloudfunctions文件夹右键设置当前环境

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: 'minipro-dev'  //这个名称命名要慎重，要设置一个有意义且容易识别。因为设置后不能修改也不能删除，有点坑
      })
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11

# 云函数 (opens new window)

新建云函数baiduImage，右键文件夹选择在终端打开，安装wx-server-sdk和baidu-aip-sdk依赖。

baidu-aip-sdk的使用方法 (opens new window)

// 云函数入口文件
const cloud = require('wx-server-sdk')
const AipImageClassifyClient = require("baidu-aip-sdk").imageClassify;
// 设置百度云开发平台APPID/AK/SK
var APP_ID = "注册的AppID";
var API_KEY = "注册的API Key";
var SECRET_KEY = "注册的SECRET_KEY";
cloud.init()
// 新建一个百度云调用对象，用来调用服务接口
var client = new AipImageClassifyClient(APP_ID, API_KEY, SECRET_KEY);

// 云函数入口函数
exports.main = async (event, context) => {
  //解析出前端调用云函数时data中传递的参数
  const {fileId,kind} = event
  //通过fileId下载云存储的图片文件
  const res = await cloud.downloadFile({
    fileID:fileId
  })
  // 将云存储中的图片转为base64  
  const buffer = res.fileContent.toString("base64")
  let infoObj =null;
  switch(kind){
    case "zhiwu":
      infoObj = await client.plantDetect(buffer,{baike_num:5})
    break;
      default:
    return null;
  }
  infoObj.result.forEach(e=>{
    e.score = (parseFloat(e.score)*100).toFixed(2)
  })
  return infoObj;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在前端detail页面调用云函数，

wx.cloud.callFunction({
    name:"baiduImage",
    // 详细过程查看detail.js......
})

1
2
3
4

# 云存储 (opens new window)

可以将前端图片资源保存到云存储中，相当于上传到服务器中

// 详情查看index.js的showSheet方法
wx.cloud.uploadFile({
    cloudPath,
    filePath,
    success:()=>{
    }
})

1
2
3
4
5
6
7

# 云数据库 (opens new window)

在前端页面中初始化云数据库接口

const db = wx.cloud.database();

在scanImage集合中插入一条记录。

// 详细过程查看detail.js......
db.collection("scanImage").add({
    data: {
        SOURCE: res.result.wxContext.SOURCE
    }
})

1
2
3
4
5
6

编辑

上次更新: 2024/07/24, 09:54:49

← vue3+vite封装element组件库珠峰培训资料→