微信小程序——校園服務小程序（二）

環境搭建好了，我們開始編寫代碼。

首先我們來看 “我的“ 界面，先寫一下登錄功能。

先看一下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})}},

總結

以上是生活随笔為你收集整理的微信小程序——校园服务小程序（二）校园论坛加预约理发服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。