M7~WAOI6MGY[O[5G~YKB2VS.png


前言


vuereactangular


reacttarovueuniapp


uniappUniCloud云开发


uniCloudserverless 模式和 js


uniappunicloud


初始化数据库


创建云数据库


👉 打开UniCloud控制台注册登录后会进入到服务空间列表。


👉 创建一个服务空间


_{174GRCOM0G`]Z28C0TRE9.png


  • 服务商选择阿里云，毕竟阿里云的速度快，空间大，而且还免费。


  • 服务空间可以自己随意命名，只要符合规则即可。


👉 创建完成之后，会自动打开创建好的当前服务空间


QYI1HKZD{NY7SIWEQ905017.png


👉 创建第一个数据表（用户信息）


KHUZQK7XW78}O3[A%K8RZ%7.png


  • 创建数据表分为两种方式：


    • 空表：需要自己定义表结构和索引等信息。


uniCloud


👉 添加表结构（用户信息）


R~9R_ITO64WAO3CKDT175)J.png


unCloud


微信授权头像昵称openId


数据表结构清单可以参考uniCloud官方文档


⭐️ properties中的属性


初始化项目


安装编辑器


使用uniapp需要使用对应的编辑器 - HbuilderX


HSHXIC7{)Y98)]85SLX311Z.png



创建uniapp项目


WQ2LFD%$GHQ$E_R6PYRKSJV.png


uni-app


  • 项目名称和保存路径自定义即可。


  • 项目模板这里选择默认模板，如果你有其他需求，可以选择其他已经是完整项目的模板


  • 勾选启用uniCloud，并选择阿里云来作为项目的云开发。


关联阿里云


uniCloud关联云服务空间或项目


~224WM(_(0B8S3~AGK@NA%E.png


👉 勾选之前在uniCloud控制台创建的云空间


1TH~{O`_KMP2L7BF_5{370V.png


启动项目


运行 - 运行到小程序模拟器 - 微信开发者工具


Q$V[{472G[%_XM~8%WXL}6W.png


👉 启动小程序时，同时也会启动uniCloud控制台，用于后面上传云函数等操作


8K8QOOSU2Q~WOWP{`OZOR3B.png


👉 至此，项目初始化完成了

H0HC(_]FG7PAC]%BIN[(D[O.png



新建云函数


cloudfunctions


新建云函数


SRCZ`DG3@C8Z1SGCM2WIK26.png


  • 云函数名称根据自己需求去定义即可。


登录注册用户信息


页面逻辑


👉 页面上在未登录时，会有一个登录按钮，点击登录按钮之后获取用户信息。



👉 提示用户授权



  • getUserProfile是uniapp封装的微信小程序api，用来获取用户信息授权


👉 调用云函数保存用户信息



  • uni.login函数是uniapp封装的微信小程序中的登录API，用来获取用户code


  • uniCloud.callFunction是用来调用云函数的方法


    • name: 云函数名称（在上面新建云函数时写的名称）


    • data：传给云函数的数据


A15Z{T[G55F$WKIC1D4EOU0.png


云函数逻辑



mp_wx_data


  • 这一部分是用来获取到数据表的方法。



pro-user


  • 云函数中分为了四个模块：（模块名称可以根据需求来自定义）


code2Session


register


update


getUser


SXX7@4ST2H)$JK~U$$L)`R3.png


登录成功显示用户信息



  • 这里没有做跳转页面的操作，全部是在一个页面上完成的。通过用户信息来判断isLogin状态


VOZBGFH%A77C~O7NZ8OXPTQ.png


数据表中成功新增数据


ZA{Q)A)522R[B2{FPFFJ7$J.png


总结


微信小程序获取用户信息的云开发已完成，大家可以开脑洞去实现自己需要的小程序。