微信小程序——校园服务小程序（二）校园论坛加预约理发服务

微信小程序——校园服务小程序（二）

环境搭建好了，我们开始编写代码。

首先我们来看 “我的“ 界面，先写一下登录功能。

先看一下wxml

通过判断canIUseGetUserProfile来决定是渲染手机号和验证码输入框还是渲染头像和昵称。

<view class="userinfo"><input wx:if="{{canIUseGetUserProfile}}" bindinput="getName" type="number" auto-focus placeholder="请输入手机号：" class="input_css"/><input wx:if="{{canIUseGetUserProfile}}" bindinput="getqwe" auto-focus placeholder="请输入验证码：" class="input_css"/><button  wx:if="{{!hasUserInfo}}" wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" class="huoqutouxiang"> 登录 </button><block wx:else><view><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>

登录功能主要是为了获取用户的头像、昵称、电话号、openid

那么怎么获取呢：

头像和昵称通过getUserProfile获取用户的信息。（微信开发者文档上有）

wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})

通过对应的点击事件的event获取相应的值

默认为：

昵称：nickName

头像：avatarUrl

openid我这里使用云函数获取；（云函数的使用方法很简单，网上有很多）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

直接返回对应的值就好了。

电话号则通过诱导用户输入获得。

使用input组件的bindinput获取用户输入的内容

getName(event){console.log(event.detail.value);shoujihao=event.detail.value},

手机号的验证使用了正则表达式

/^1[34578]\d{9}$/.test(shoujihao)

有需要的可以购买短信端口发送验证码。

将用户的信息导入库中，因为这是一个需要联网的项目，需要让其他用户也能看到你的信息，所以我们要将当前用户的信息导入库中，方便其他人通过服务器获取到我们的信息，

我们使用的是小程序自带的云开发技术，

peopleviewnum 和viewpeoplenum涉及到关注功能这里不做过多解释。

const db = wx.cloud.database()
const people1Collection = db.collection('people')//people是库的名字
people1Collection.add({//添加用户信息到数据库data:{shouji:shoujihao,wxtitle: this.data.weixinname,wxpages: this.data.weixinpages,viewpeoplenum:0,//关注数量peopleviewnum:0//粉丝数量},success:res=>{console.log("添加成功",res);},fail: res=>{console.log("添加失败");}})

记录登录状态，

因为许多操作只有登录过后才能操作，比如：评论，上传帖子，预约订单等，这里把登录状态存在缓存中，当缓存中存入响应的值，其他界面才能进行对应的操作。

还有用户不可能每次进入小程序都重新登陆，所以已注册的账号要有一个自动登录功能。

这里的思路是：

在onLoad（）里面先获取当前用户的openid，通过openid查询数据库，若返回值为空，则当用户是一个新用户，需要注册，这时渲染注册界面，当返回值不为空，说明这是一个已经注册过的用户，直接从库中获取数据，渲染已登录界面。

wx.cloud.callFunction({name:"getopenid"}).then(res=>{console.log(res,"登陆状态");open1=res.result.openid//console.log(zhuangtaiopenid);people1Collection.where({_openid:open1}).get().then(res =>{this.setData({people: res.data})console.log(res);if(res.data!=''){console.log("重复---------------------------------------------------吗");this.setData({canIUseGetUserProfile: false})this.gettitlepages();wx.setStorageSync('stopenid',open1)//将数据导入缓存wx.setStorageSync('loginzhuangtai', "yidenglu")//将数据导入缓存people1Collection.where({_openid:open1}).get().then(res=>{this.setData({people:res.data})console.log(res,"获取用户数据成功");shoujihao=res.data[0].shoujiconsole.log(shoujihao);wx.setStorageSync('oldshouji', shoujihao)//将数据导入缓存})}else{console.log("新用户填写手机号");this.setData({loadingHidden: true});people1Collection.where({_openid:open1}).get().then(res=>{this.setData({people:res.data})console.log(res,"获取用户数据成功");})}
})})//if(open1!=''&&open1!=null){//}if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},

微信小程序——校园服务小程序（二）校园论坛加预约理发服务相关推荐

ArcGIS——数据库与服务备份（二、arcgis server中站点服务的备份和恢复）
一.引言之前给别人部署服务不多都是手动重新发布一遍,直到有一次遇到的服务超级多,自己都记不清了,然后就懵逼了,老子要一个个发布吗==后来学长说了一个简单的备份方法. 服务器管理员通常需保留其站点配置 ...
服务计算作业二——GO语言TDD实践报告
服务计算作业二--GO语言TDD实践报告服务计算作业二--GO语言TDD实践报告教程学习为一个重复字符五次的函数编写测试,并先使用最少的代码让失败的测试先跑起来(核心概念) 把代码补充完整,使得 ...
服务端Skynet(二)——消息调度机制
服务端Skynet(二)--消息调度机制文章目录服务端Skynet(二)--消息调度机制 1.提前了解知识 1.1.互斥锁(mutex lock : **mut**ual **ex**clusio ...
Kratos战神微服务框架（二）
Kratos战神微服务框架(二) 目录 Kratos战神微服务框架(二) 项目结构 api编写 protobuf编写使用makefile service层接口实现 biz层 data层 config ...
校园服务小程序源代码分享园服务微信小程序全开源版源码-包含服务端
2021年4月17日更新严正声明: [请一定勿将程序用户商业用途且包括用此程序去参加各类学校的竞赛或者其他以获取名利而参与的竞赛等,一旦被原作者发现将会面临严重的侵权责任后果,特别是被获奖后会遭 ...
基于微信校园跑腿小程序系统设计与实现开题报告
毕业论文基于微信校园跑腿小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 Xxx ...
校园跑腿小程序--表白墙--仿造微信朋友圈
目录效果展示一.发布页面 1.1.整体页面样式 1.1.1.上传图片或者视频事件 1.1.2.选择用户当前位置二.仿造微信朋友圈页面 2.1.1.获取用户传入的经纬度并展示 2.1.2.评论用户 ...
软件工程毕业设计课题（81）微信小程序毕业设计PHP校园跑腿小程序系统设计与实现
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信校园跑腿小程序系统,前台用户使用小程序发布跑腿任何和接跑腿任务,后台管理使用基于PHP+MySql的B/S架构:通过后台管理跑腿的用户. ...
微信小程序学习笔记 ( 小程序主体学习二逻辑层 app.js 扩展高级食用方法)
目录结构上图是我建立的的微信小程序的目录结构主体学习逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...

微信小程序——校园服务小程序（二）校园论坛加预约理发服务

微信小程序——校园服务小程序（二）

微信小程序——校园服务小程序（二）校园论坛加预约理发服务相关推荐

最新文章

热门文章