uniapp微信小程序云开发的踩坑之旅

1,921 阅读2分钟

最近想自己搞个小程序,因为比较贫穷,所以打算借助微信的云开发来进行数据存储。在写的过程中遇到了一些坑,现记录一下。

1.uni-popup在vue3中无法使用

刚开始,我是打算用vue3版本进行开发。在开发过程中,需要用到uni-popup的组件,查看了一下文档,文档上是支持vue3的,果断开撸。 但是在实际开发过程中,ref无法唤起弹窗,改成vue3的写法仍是不支持,在讨论区找到了答案

image.png

为了使用其他组件还是有类似的问题,换成了vue2继续写

2.globalData定义的全局数据拿不到

想定义一些全局的数据,不想使用vuex之类的方法,想用globalData来定义,但是发现在【App.vue】中使用getApp()后拿不到,解决方法

	export default {
		globalData: {
		    env:'baby-food'  
		}, 
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
			console.log('App Launch')
			
		},
		onShow: function() {
			console.log('App Show')
			this.initCloud();
		},
		onHide: function() {
			console.log('App Hide')
		},
		
		methods:{
			initCloud(){
				this.$nextTick(()=>{
					wx.cloud.init({
						env:getApp().globalData.env,
						traceUser:true
					});
				})
			}
		}
	}

3.wx.cloud.database报错,提示环境配置不存在

image.png

代码:

const db = wx.cloud.database({
     env: 'baby-food'
})

由此可以看到env里中写的是环境的名称,这里应该使用环境ID,如何获取环境ID,【云开发控制台】-【设置】,将环境ID复制替换环境名,OK了

image.png

4.云开发-数据库中有数据,但是返回的是空数组

image.png

代码如下:

 db.collection('user').get().then(res => {
   // res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条
	console.log(res.data)
  })

返回的结果是一个空数组:[]

解决方法:【数据库】-【数据权限】-【所有用户可读,仅创建者可写】,默认的是【仅创建者可读写】

image.png

5.开启云函数

根据开发文档,开启云函数主要是需要在project.config.json中新增[cloudfunctionRoot],指定本地已存在的目录作为云开发的本地根目录,由于我是在HBuilder中开发的,所以一直找不到project.config.json的文件

image.png

后来才知道,原来是在微信开发者工具中添加,记住:微信开发者工具、微信开发者工具、微信开发者工具(重要的事情说三遍)

image.png

在微信开发者工具中新建[cloudfn]的文件夹,然后在project.config.json中添加配置,bingo,保存后就会发现cloudfn变成云函数的文件了,右击新建云函数[saveUserInfo],如图哦,好,继续干......

image.png

未完待续。。。。。。