微信小程序 云开发 欢迎登录注册
提示：此文章相关代码在新版小程序上或许已经不可用！该小程序片段需要使用云函数，云函数具体内容参考github。需要使用云开发提供的数据库，相关的具体使用方法还请参考小程序云开发的相关最新文档。该部分代码没有任何重用的价值，仅供参考
前段时间和同学一起做了一个小程序，用来参加学校的比赛，完成后把项目内容分割一下，贴到博客上面，算是学习记录和总结吧。
因为是学生党，而且并没有很大的需要，所以选择了微信小程序为开发者提供的“云开发”选项。
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
按照微信的说法：
云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
目前提供三大基础能力支持：
- 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
- 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
- 存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
首先，开通云开发功能是第一步（默认你已经注册好了微信小程序账号而且申请好了一个AppId）,经测试，云开发并不能使用测试号，只能使用真实的AppId。
注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：{ errMsg: “invalid scope” } 的错误
之后新建就行了。
新建的项目已经包含了一个快速开发的Demo,而且含有云函数示例，初始化函数等等，最好可以先看看，熟悉一下。
首先看一下app.js这个文件：
//app.jsApp({onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({traceUser: true,})}})
wx.cloud.init()为云端环境初始化函数,如果有多个云开发环境则需要指定env参数，如下:
wx.cloud.init({env: 'test-x1dzi'})
具体可以查看官方文档：
developers.weixin.qq.com
接下来声明一些全局数据
//全局数据globalData: {//用户IDuserId: '',//用户信息userInfo: null,//授权状态auth: {'scope.userInfo': false},//登录状态logged: false}
最后的样子是这样：
//app.jsApp({//全局数据globalData: {//用户IDuserId: '',//用户信息userInfo: null,//授权状态auth: {'scope.userInfo': false},//登录状态logged: false},onLaunch: function() {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({traceUser: true,env: 'winbin-2hand'})}}})
注意将env参数换成你自己的云开发环境。
把Pages目录下的除index外的文件夹删除。
并且在app.json中的Pages字段中下仅保留index项:
app.json
{"pages": ["pages/index/index"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "云开发 QuickStart","navigationBarTextStyle": "black"，"navigationStyle": "custom"},"sitemapLocation": "sitemap.json"}
页面文件内容如下：
index.wxml
<view class='container'><open-data class="avs" type="userAvatarUrl"></open-data><view class='username'><text>Hello </text><open-data type="userNickName"></open-data></view><button hidden='{{hiddenButton}}' class='moto-container' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"><text class='moto'> 开启小程序之旅</text></button></view>
因为微信小程序声称wx.getUserInfo(Object object)在以后将不再支持，这里使用另一种方式来显示用户的信息。
标签 <open-data type=""></open-data>可以用来显示用户的一些信息
<open-data type="userAvatarUrl"></open-data>显示用户的头像
<open-data type="userNickName"></open-data>显示用户的昵称
详情可以查看：wx.getUserInfo中的示例代码部分
页面样式如下：
index.wxss
page {width: 100%;height: 100%;}.container {background: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-758991.png');background-size: 400vw 100vh;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;}.avs {opacity: 0.9;width: 200rpx;height: 200rpx;margin-top: 160rpx;}.username {font-size: 32rpx;font-weight: bold;margin-top: 200rpx;}.moto-container {line-height: normal;border: 1px solid #450f80;width: 200rpx;height: 80rpx;border-radius: 5px;text-align: center;margin-top: 200rpx;padding: 0px;outline: none;}.moto {font-size: 22rpx;font-weight: bold;line-height: 80rpx;text-align: center;color: #450f80;}
这里使用了全屏背景
效果如下：
#接下来是js脚本#
首先说一下思路
流程图如下
接下来是index.js
//index.js
const app = getApp();Page({/*** 页面的初始数据*/data: {hiddenButton: true},/***从云端获取资料*如果没有获取到则尝试新建用户资料*/onGotUserInfo: function(e) {var _this = this//需要用户同意授权获取自身相关信息if (e.detail.errMsg == "getUserInfo:ok") {//将授权结果写入app.js全局变量app.globalData.auth['scope.userInfo'] = true//尝试获取云端用户信息wx.cloud.callFunction({name: 'get_setUserInfo',data: {getSelf: true},success: res => {if (res.errMsg == "cloud.callFunction:ok")if (res.result) {//如果成功获取到//将获取到的用户资料写入app.js全局变量console.log(res)app.globalData.userInfo = res.result.data.userDataapp.globalData.userId = res.result.data._idwx.switchTab({url: '/pages/home/home'})} else {//未成功获取到用户信息//调用注册方法console.log("未注册")_this.register({nickName: e.detail.userInfo.nickName,gender: e.detail.userInfo.gender,avatarUrl: e.detail.userInfo.avatarUrl,region: ['none', 'none', 'none'],campus: "none",studentNumber: "none",})}},fail: err => {wx.showToast({title: '请检查网络您的状态',duration: 800,icon: 'none'})console.error("get_setUserInfo调用失败", err.errMsg)}})} elseconsole.log("未授权")},/*** 注册用户信息*/register: function(e) {let _this = thiswx.cloud.callFunction({name: 'get_setUserInfo',data: {setSelf: false,userData: e},success: res => {if (res.errMsg == "cloud.callFunction:ok" && res.result) {_this.setData({hiddenButton: true})app.globalData.userInfo = eapp.globalData.userId = res.result._id_this.data.registered = trueapp.getLoginState()console.log(res)wx.navigateTo({url: '/pages/mine/info/info'})} else {console.log("注册失败", res)wx.showToast({title: '请检查网络您的状态',duration: 800,icon: 'none'})}},fail: err => {wx.showToast({title: '请检查网络您的状态',duration: 800,icon: 'none'})console.error("get_setUserInfo调用失败", err.errMsg)}})},/*** 生命周期函数--监听页面加载*/onLoad: function() {let _this = this//需要用户同意授权获取自身相关信息wx.getSetting({success: function(res) {if (res.authSetting['scope.userInfo']) {//将授权结果写入app.js全局变量app.globalData.auth['scope.userInfo'] = true//从云端获取用户资料wx.cloud.callFunction({name: 'get_setUserInfo',data: {getSelf: true},success: res => {if (res.errMsg == "cloud.callFunction:ok" && res.result) {//如果成功获取到//将获取到的用户资料写入app.js全局变量console.log(res)app.globalData.userInfo = res.result.data.userDataapp.globalData.userId = res.result.data._idwx.switchTab({url: '/pages/home/home'})} else {_this.setData({hiddenButton: false})console.log("未注册")}},fail: err => {_this.setData({hiddenButton: false})wx.showToast({title: '请检查网络您的状态',duration: 800,icon: 'none'})console.error("get_setUserInfo调用失败", err.errMsg)}})} else {_this.setData({hiddenButton: false})console.log("未授权")}},fail(err) {_this.setData({hiddenButton: false})wx.showToast({title: '请检查网络您的状态',duration: 800,icon: 'none'})console.error("wx.getSetting调用失败", err.errMsg)}})}})
下面是云函数配置
根据传入的参数：update ,getSelf ,setSelf ,getOthers
分别执行：更新用户信息，获取自身信息，设置自身信息，获取其他用户信息 四种操作。
此函数需要使用npm添加md5模块，用来加密用户openid并将其存放在数据库中
// clouldfunctions/get_setUserInfo/package.json
{"name": "get_setUserInfo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"wx-server-sdk": "latest","md5-node": "latest"}}
// clouldfunctions/get_setUserInfo/index.js
const cloud = require('wx-server-sdk')const md5 = require('md5-node')//cloud.init()cloud.init({traceUser: true,env: 'winbin-2hand'})const db = cloud.database()const usersTable = db.collection("users")const _ = db.command// 云函数入口函数exports.main = async(event, context) => {console.log(event)const wxContext = cloud.getWXContext()//更新当前信息if (event.update == true) {try {return await usersTable.doc(md5(wxContext.OPENID)).update({data: {userData: _.set(event.userData)},})} catch (e) {console.error(e)}} else if (event.getSelf == true) {//获取当前用户信息try {return await usersTable.doc(md5(wxContext.OPENID)).field({openid: false}).get()} catch (e) {console.error(e)}} else if (event.setSelf == true) {//添加当前用户信息try {return await usersTable.add({data: {_id: md5(wxContext.OPENID),openid: wxContext.OPENID,userData: event.userData,boughtList: [],messageList: [],ontransList: []}})} catch (e) {console.error(e)}} else if (event.getOthers == true) {//获取指定用户信息try {return await usersTable.doc(event.userId).field({userData: true}).get()} catch (e) {console.error(e)}}}
数据库数据形式:
至此就全部完成了。有需要的可以到github上查看：github:john-tito
2020.6.25
对评论区存在的部分问题进行更新。
代码问题：
参考Github上提供的代码。appid 问题：
此处不确定是否需要手动修改，需要注意。
首页背景问题 ：
背景图片链接已经失效，如需要自行修改。
其他问题：
该问题系小程序开发技术升级造成。
页面跳转问题：
自行修改。
getLoginState()不存在，自行删除。
逻辑问题：
此处 setself 字段改为true，云函数根据此字段的true来设置数据库的用户信息。
md5-node模块安装问题：
在云函数目录上右键，按照如下图操作即可。
微信小程序 云开发 欢迎登录注册相关推荐
- 微信小程序云开发 之 登录注册界面 详细教程
文章目录 前言 一.前期的准备(很重要) 1.程序的需求 2.微信开发者文档 3.数据库的设计 二.小程序设计阶段 1.选择开发方式 2.云开发 第一步:注册微信小程序,获取小程序的 AppID 第二 ...
- 微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号 在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...
- 微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
- 微信小程序-云开发下的用户注册及用户登录逻辑
文章目录 一.前言 二.思路分析 三.这样做的好处 1.安全性 2.便捷性 3.健壮性 四.实现代码 1.创建集合.配置权限 2.实现代码(app.js) 五.一些疑惑 六.结语 一.前言 基于微信小 ...
- 小程序云开发实现登录与注册（附源码）
小程序云开发实现登录与注册(附源码) 1. 看效果 2.wxss <view class="v1"><!-- v2父容器 子view使用绝对布局 -->&l ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- 微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台 小秃僧 新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
- 微信小程序云开发项目——多肉植物销售小程序
前言 此项目为本人在大学的毕业设计作品,基于微信小程序云开发技术进行开发,暂未商用和托管.编写文章意在为求职做准备,亦乐于与大家进行经验交流分享,欢迎进行评论咨询哦. 简介 用户角色分为:一般顾客.商 ...
- 微信小程序云开发及背后的云服务支持。
文章目录 导语 什么是微信小程序云开发? 云开发的优势 云开发的技术生态支持 微信云开发主要能力特性 云数据库: 云函数: 云存储: 身份认证: 云调用: 云开发与传统开发的模式区别 小程序云开发带来 ...
最新文章
- 升级CommunityServer2.0出现的两个问题的解决方法
- 简单的DOS命令操作数据库
- python常用命令汇总-Python爬虫框架Scrapy常用命令总结
- AndroidMainifest标签说明2——lt;activitygt;
- linux 64位vcs,求助，VCS在ubuntu 64位的问题
- 收藏属于自己flash类库集工具
- Linux启动报：UNEXPECTED INCONSISTENCY: RUN fsck MANUALLY问题解决
- filename.whl is not supported wheel on this platform 部分第三方库无法安装的解决办法
- 解决域用户安装软件权限问题
- 设计模式之装饰者模式
- xp无法查看工作组计算机 服务没有启动,XP系统弹出“无法查看工作组计算机”提示怎么办？...
- dubbo 报错 com.alibaba.com.caucho.hessian.io.Hessian2Output.writeObject(Hessian2Output.java:408)
- Eclips 反编译
- matlab的模型文件扩展名,[转载]matlab simulink基础知识
- Unity实现镜面反射效果
- Android日常开发收集的Tips
- 《清华园日记》读后感
- Android 开发简单记事本程序（附源码）
- 关键词分析-对同行网站进行全面的分析-免费关键词分析工具
- 使用信号量机制解决生产者消费者问题