uni-app做多端小程序开发的基本项目搭建(二) ——云函数和文件上传的使用

1.前言

通过上一篇文章，用uni-app的uniCloud云开发实现了简单的增删查改的操作，要做一个app项目，目前我可能还需要用到的功能有：选择图片上传到云存储，使用云函数封装等，本文主要介绍这两个功能的简单实现，其他更强大的API需要去查看官方文档再练习使用。本文还将简单的介绍
使用HbuilderX的打包功能和将程序转为微信小程序的实现过程。

2.选择图片上传到云存储

新建一个页面，并在index.vue页面配置路由跳转，因为在app打包之后，进入app的默认界面是index页面

<template>
	<view>
		<button type="primary" @click="pickImg">选择图片</button>
		<image :src="imgpath" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgpath:''
			}
		},
		methods: {
			pickImg(){
				uni.chooseImage({
					success: (res) => {
						console.log(res.tempFilePaths[0])
						 this.imgpath=res.tempFilePaths[0]
					}
				})
			}
		}
	}
</script>

目前实现的效果为：选择图片后只是把选择的图片的地址赋值给了data里面的imgpath里，还没有实现上传到云存储中。

需要用到的是API中的文件上传，这里的使用方式和微信小程序的类似

js部分代码修改为：

pickImg(){
	let _that=this
	uni.chooseImage({
		success: (res) => {
			// console.log(res.tempFilePaths[0])
			//  this.imgpath=res.tempFilePaths[0]
			 
			 uniCloud.uploadFile({
				 cloudPath:'img',
				 filePath:res.tempFilePaths[0]
			 }).then(datares=>{
				 console.log(datares)
				 _that.imgpath=datares.filePath
			 })
		}
	})
}

如果是在手机上测试，点击“选择图片”按钮后会弹出提示给用户，用户可以启用手机相机拍照或者是选择手机本地图片。

3.云函数测试

在cloudfunctions目录新建一个云函数addNum

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	
	//返回数据给客户端
	return event.a+event.b
};

注意：创建好之后一定要上传部署

测试结果：

再写一个云函数，获取到上篇文章写的通讯录的数据并显示到界面上：

创建云函数并部署


测试：

4.打包成安卓apk测试

现在需要将上面写的app打包成apk安装包，我们只需要借助HbuilderX编辑器即可实现。

发行->原生App-云打包

接着按提示打包，耐心等待即可得到打包好的安卓apk程序，并可在手机上测试！

5.微信小程序测试

发行->原生App->小程序-微信

将你的微信小程序AppId拿过来

系统会自动打开微信小程序开发者工具

这里注意：要提前开启微信开发者工具->设置->安全
里面的服务端口打开

点击预览即可在手机扫码测试！

6.手机测试微信小程序时会出现拿不到数据的问题

因为在预览调试的时候手机需要打开开发者选项才可以正确的获取的服务器的数据。

1.打开手机的开发者模式，一般都在设置->关于手机->版本号，多次点击版本号

这个方法我尝试了没起作用

2.还有一种方法：小程序有一个开发调试
打开调试

然后重新扫码就可以正常调试了