點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

微信小程序+云開(kāi)發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè)

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:56:09

微信小程序+云開(kāi)發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè)

微信小程序+云開(kāi)發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè):前段時(shí)間和同學(xué)一起做了一個(gè)小程序，用來(lái)參加學(xué)校的比賽，完成后把項(xiàng)目?jī)?nèi)容分割一下，貼到博客上面，算是學(xué)習(xí)記錄和總結(jié)吧。因?yàn)槭菍W(xué)生黨，而且并沒(méi)有很大的需要，所以選擇了微信小程序?yàn)殚_(kāi)發(fā)者提供的云開(kāi)發(fā)選項(xiàng)。開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序+云開(kāi)發(fā)實(shí)現(xiàn)歡迎登錄注冊(cè):前段時(shí)間和同學(xué)一起做了一個(gè)小程序，用來(lái)參加學(xué)校的比賽，完成后把項(xiàng)目?jī)?nèi)容分割一下，貼到博客上面，算是學(xué)習(xí)記錄和總結(jié)吧。因?yàn)槭菍W(xué)生黨，而且并沒(méi)有很大的需要，所以選擇了微信小程序?yàn)殚_(kāi)發(fā)者提供的云開(kāi)發(fā)選項(xiàng)。開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、

前段時(shí)間和同學(xué)一起做了一個(gè)小程序，用來(lái)參加學(xué)校的比賽，完成后把項(xiàng)目?jī)?nèi)容分割一下，貼到博客上面，算是學(xué)習(xí)記錄和總結(jié)吧。

因?yàn)槭菍W(xué)生黨，而且并沒(méi)有很大的需要，所以選擇了微信小程序?yàn)殚_(kāi)發(fā)者提供的“云開(kāi)發(fā)”選項(xiàng)。

開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，即可使用云端能力。
按照微信的說(shuō)法：

云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的云端支持，弱化后端和運(yùn)維概念，無(wú)需搭建服務(wù)器，使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開(kāi)發(fā)，即可實(shí)現(xiàn)快速上線(xiàn)和迭代，同時(shí)這一能力，同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。
目前提供三大基礎(chǔ)能力支持：

云函數(shù)：在云端運(yùn)行的代碼，微信私有協(xié)議天然鑒權(quán)，開(kāi)發(fā)者只需編寫(xiě)自身業(yè)務(wù)邏輯代碼

數(shù)據(jù)庫(kù)：一個(gè)既可在小程序前端操作，也能在云函數(shù)中讀寫(xiě)的 JSON 數(shù)據(jù)庫(kù)

存儲(chǔ)：在小程序前端直接上傳/下載云端文件，在云開(kāi)發(fā)控制臺(tái)可視化管理

首先，開(kāi)通云開(kāi)發(fā)功能是第一步（默認(rèn)你已經(jīng)注冊(cè)好了微信小程序賬號(hào)而且申請(qǐng)好了一個(gè)AppId）,經(jīng)測(cè)試，云開(kāi)發(fā)并不能使用測(cè)試號(hào)，只能使用真實(shí)的AppId。

注：AppID 首次開(kāi)通云環(huán)境后，需等待大約 10 分鐘方可正常使用云 API，在此期間官方后臺(tái)服務(wù)正在做準(zhǔn)備服務(wù)，如嘗試在小程序中調(diào)用云 API 則會(huì)報(bào) cloud init error：{ errMsg: “invalid scope” } 的錯(cuò)誤

新建一個(gè)項(xiàng)目

之后新建就行了。

新建的項(xiàng)目已經(jīng)包含了一個(gè)快速開(kāi)發(fā)的Demo,而且含有云函數(shù)示例，初始化函數(shù)等等，最好可以先看看，熟悉一下。

自帶Demo

首先看一下app.js這個(gè)文件：

//app.js
App({
 onLaunch: function () {
if (!wx.cloud) {
 console.error('請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力')
} else {
 wx.cloud.init({
traceUser: true,
 })
}
})

wx.cloud.init()為云端環(huán)境初始化函數(shù),如果有多個(gè)云開(kāi)發(fā)環(huán)境則需要指定env參數(shù)，如下:

wx.cloud.init({
 env: 'test-x1dzi'
})

具體可以查看官方文檔：

developers.weixin.qq.com

接下來(lái)聲明一些全局?jǐn)?shù)據(jù)

//全局?jǐn)?shù)據(jù)
globalData: {
 //用戶(hù)ID
 userId: '',
 //用戶(hù)信息
 userInfo: null,
 //授權(quán)狀態(tài)
 auth: {
 'scope.userInfo': false
 },
 //登錄狀態(tài)
 logged: false
}

最后的樣子是這樣：

//app.js
App({
	//全局?jǐn)?shù)據(jù)
	globalData: {
 	//用戶(hù)ID
	 userId: '',
	 //用戶(hù)信息
	 userInfo: null,
	 //授權(quán)狀態(tài)
	 auth: {
	 'scope.userInfo': false
	 },
	 //登錄狀態(tài)
	 logged: false
	},

	onLaunch: function() {
	if (!wx.cloud) {
	console.error('請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力')
	} else {
	wx.cloud.init({
	traceUser: true,
	env: 'winbin-2hand'
	})
	}
	}
})

注意將env參數(shù)換成你自己的云開(kāi)發(fā)環(huán)境。

把Pages目錄下的除index外的文件夾刪除。

并且在app.json中的Pages字段中下僅保留index項(xiàng):

app.json

{
	"pages": [
	"pages/index/index"
	],
	"window": {
	"backgroundColor": "#F6F6F6",
	"backgroundTextStyle": "light",
	"navigationBarBackgroundColor": "#F6F6F6",
	"navigationBarTitleText": "云開(kāi)發(fā) QuickStart",
	"navigationBarTextStyle": "black"，
	"navigationStyle": "custom"
	},
	"sitemapLocation": "sitemap.json"
}

頁(yè)面文件內(nèi)容如下：

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'> 開(kāi)啟小程序之旅</text>
 </button>
</view>

因?yàn)槲⑿判〕绦蚵暦Q(chēng)wx.getUserInfo(Object object)在以后將不再支持，這里使用另一種方式來(lái)顯示用戶(hù)的信息。

標(biāo)簽<open-data type=""></open-data>可以用來(lái)顯示用戶(hù)的一些信息

<open-data type="userAvatarUrl"></open-data>顯示用戶(hù)的頭像

<open-data type="userNickName"></open-data>顯示用戶(hù)的昵稱(chēng)

詳情可以查看：wx.getUserInfo中的示例代碼部分

頁(yè)面樣式如下：

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;
}

這里使用了全屏背景

效果如下：

在這里插入圖片描述

#接下來(lái)是js腳本#

首先說(shuō)一下思路

流程圖如下

在這里插入圖片描述

接下來(lái)是index.js

const app = getApp();
Page({
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 hiddenButton: true
 },

 /**
 *從云端獲取資料
 *如果沒(méi)有獲取到則嘗試新建用戶(hù)資料
 */
 onGotUserInfo: function(e) {
 var _this = this
 //需要用戶(hù)同意授權(quán)獲取自身相關(guān)信息
 if (e.detail.errMsg == "getUserInfo:ok") {
 //將授權(quán)結(jié)果寫(xiě)入app.js全局變量
 app.globalData.auth['scope.userInfo'] = true
 //嘗試獲取云端用戶(hù)信息
 wx.cloud.callFunction({
 name: 'get_setUserInfo',
 data: {
 getSelf: true
 },
 success: res => {
 if (res.errMsg == "cloud.callFunction:ok")
 if (res.result) {
 //如果成功獲取到
 //將獲取到的用戶(hù)資料寫(xiě)入app.js全局變量
 console.log(res)
 app.globalData.userInfo = res.result.data.userData
 app.globalData.userId = res.result.data._id
 wx.switchTab({
 url: '/pages/home/home'
 })
 } else {
 //未成功獲取到用戶(hù)信息
 //調(diào)用注冊(cè)方法
 console.log("未注冊(cè)")
 _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: '請(qǐng)檢查網(wǎng)絡(luò)您的狀態(tài)',
 duration: 800,
 icon: 'none'
 })
 console.error("get_setUserInfo調(diào)用失敗", err.errMsg)
 }
 })
 } else
 console.log("未授權(quán)")
 },

 /**
 * 注冊(cè)用戶(hù)信息
 */
 register: function(e) {
 let _this = this
 wx.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 = e
 app.globalData.userId = res.result._id
 _this.data.registered = true
 app.getLoginState()
 console.log(res)
 wx.navigateTo({
 url: '/pages/mine/info/info'
 })
 } else {
 console.log("注冊(cè)失敗", res)
 wx.showToast({
 title: '請(qǐng)檢查網(wǎng)絡(luò)您的狀態(tài)',
 duration: 800,
 icon: 'none'
 })
 }
 },
 fail: err => {
 wx.showToast({
 title: '請(qǐng)檢查網(wǎng)絡(luò)您的狀態(tài)',
 duration: 800,
 icon: 'none'
 })
 console.error("get_setUserInfo調(diào)用失敗", err.errMsg)
 }
 })
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function() {
 let _this = this
 //需要用戶(hù)同意授權(quán)獲取自身相關(guān)信息
 wx.getSetting({
 success: function(res) {
 if (res.authSetting['scope.userInfo']) {
 //將授權(quán)結(jié)果寫(xiě)入app.js全局變量
 app.globalData.auth['scope.userInfo'] = true
 //從云端獲取用戶(hù)資料
 wx.cloud.callFunction({
 name: 'get_setUserInfo',
 data: {
 getSelf: true
 },
 success: res => {
 if (res.errMsg == "cloud.callFunction:ok" && res.result) {
 //如果成功獲取到
 //將獲取到的用戶(hù)資料寫(xiě)入app.js全局變量
 console.log(res)
 app.globalData.userInfo = res.result.data.userData
 app.globalData.userId = res.result.data._id
 wx.switchTab({
 url: '/pages/home/home'
 })
 } else {
 _this.setData({
 hiddenButton: false
 })
 console.log("未注冊(cè)")
 }
 },
 fail: err => {
 _this.setData({
 hiddenButton: false
 })
 wx.showToast({
 title: '請(qǐng)檢查網(wǎng)絡(luò)您的狀態(tài)',
 duration: 800,
 icon: 'none'
 })
 console.error("get_setUserInfo調(diào)用失敗", err.errMsg)
 }
 })
 } else {
 _this.setData({
 hiddenButton: false
 })
 console.log("未授權(quán)")
 }
 },
 fail(err) {
 _this.setData({
 hiddenButton: false
 })
 wx.showToast({
 title: '請(qǐng)檢查網(wǎng)絡(luò)您的狀態(tài)',
 duration: 800,
 icon: 'none'
 })
 console.error("wx.getSetting調(diào)用失敗", err.errMsg)
 }
 })
 }
})

下面是云函數(shù)配置

根據(jù)傳入的參數(shù)：update ,getSelf ,setSelf ,getOthers

分別執(zhí)行：更新用戶(hù)信息，獲取自身信息，設(shè)置自身信息，獲取其他用戶(hù)信息四種操作。

此函數(shù)需要使用npm添加md5模塊，用來(lái)加密用戶(hù)openid并將其存放在數(shù)據(jù)庫(kù)中

// 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

// 云函數(shù)入口函數(shù)
exports.main = async(event, context) => {
 console.log(event)
 const wxContext = cloud.getWXContext()
 //更新當(dāng)前信息
 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) {
 //獲取當(dāng)前用戶(hù)信息
 try {
 return await usersTable.doc(md5(wxContext.OPENID)).field({
 openid: false
 }).get()
 } catch (e) {
 console.error(e)
 }
 } else if (event.setSelf == true) {
 //添加當(dāng)前用戶(hù)信息
 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) {
 //獲取指定用戶(hù)信息
 try {
 return await usersTable.doc(event.userId).field({
 userData: true
 }).get()
 } catch (e) {
 console.error(e)
 }
 }
}

數(shù)據(jù)庫(kù)數(shù)據(jù)形式:

在這里插入圖片描述