Step1:新建小程序

使用自己的appid

勾選不使用云服務（后面可以在項目中再使用，這里若勾選會多出很多亂七八糟的東西）

選擇不使用模板

---

Step2:搭建tabBar

從阿里巴巴圖標庫https://www.iconfont.cn/下載需要的圖標，保存到icons文件夾中。

app.json中和window同層級添加tabBar,并修改“pages”包含的page.
(pages代碼中刪去了index和log頁面，但文件夾依然存在，可以選中點擊右鍵手動刪去)

"pages": ["pages/homepage/homepage","pages/my/my","pages/other/other"],..."tabBar": {"color": "#999","selectedColor": "63B8FF","list": [{"pagePath": "pages/other/other","text": "其它","iconPath": "icons/其它.png","selectedIconPath": "icons/其它selected.png"},{"pagePath": "pages/homepage/homepage","text": "消息","iconPath": "icons/首頁.png","selectedIconPath": "icons/首頁selected.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "icons/我的.png","selectedIconPath": "icons/我的selected.png"}]},

---

Step3:通過云函數獲取用戶openid

云環境初始化
首先，從云開發控制臺獲取到云環境id
然后，在app.js寫入以下代碼中初始化云環境

onLaunch() {//云環境初始化wx.cloud.init({env:'云環境id',//改為自己的云環境idtraceUser: true,})...

創建云函數

首先，在project.config.json中添加cloudfunctions

{"cloudfunctionRoot": "cloudfunctions/",...

新建云函數

修改云函數的index.js文件

// 云函數入口文件 const cloud = require('wx-server-sdk')cloud.init()//獲取用戶的openid exports.main = async(event, context) => {return event.userInfo; //返回用戶信息 }

上傳并部署
3.將openid設置為全局變量

修改app.js文件

onLaunch() { ... this.getOpenid();},getOpenid() { wx.cloud.callFunction({name: 'getOpenid',complete: res => {console.log('云函數獲取到的openid: ', res.result.openid)//！注意：這里openid的i可能是大寫也可能是小寫，具體的可以先在控制臺打印res.result查看this.globalData.openid=res.result.openid},}) },globalData: {openid:""}

---

Step4:授權登錄

my.wxml

<!-- userInfo如果為空證明沒有登錄 --> <button wx-if="{{!userInfo}}" bindtap="login">獲取頭像昵稱</button> <view wx:else class="userInfo"><image src="{{userInfo.avatarUrl}}"></image><text>{{userInfo.nickName}}</text> </view>

my.js

Page({data: {userInfo: '', //用于存放獲取的用戶信息},login() {wx.getUserProfile({desc: '必須授權才能繼續使用', // 必填 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中success:(res)=> { console.log('授權成功', res);this.setData({ userInfo:res.userInfo})},fail:(err)=> {console.log('授權失敗', err);}})}, })

my.wxss

.userInfo{display: flex;flex-direction: column;align-items: center; } .userInfo image{width: 200rpx;height: 200rpx;border-radius: 200rpx; }

my.json

{"usingComponents": {},"navigationBarTitleText":"登錄" }

Step5:一個云函數實現云數據庫的增刪查改

云函數測試集合collection名稱為test，記錄如下

1.創建云函數dbManipulation

// 云函數入口文件 const cloud = require('wx-server-sdk')cloud.init() const db = cloud.database()// 云函數入口函數 exports.main = async (event, context) => {console.log("云函數event", event)return RESULT(event) }（云函數代碼不完整） ···這里有一段核心代碼(是RESULT函數的具體實現)...

上傳并部署好
2.修改utils.js文件

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` }const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}` } //彈窗提示 function tips(title='',time=1500,icon='none') {wx.showToast({title: title,time:time,icon:icon}) } //彈窗確認提示 function confirm(content='',callback) {wx.showModal({title:'溫馨提示',content:content,success:function(res) {callback(res);}}) } //云函數請求 function cloudRequest(name,data,callback) {wx.showLoading({title: '',})wx.cloud.callFunction({name:name,data:data,success:res=>{wx.hideLoading();callback(res);},fail:err=>{console.log(err);wx.hideLoading();}}) } module.exports = {formatTime,tips:tips,confirm:confirm,cloudRequest:cloudRequest }

運用案例(e.g.主頁)
homepage.wxml

<view>數據庫查詢結果</view> <view wx:for="{{testList}}"><view>{{item.name}}</view> </view> <button bindtap="add">增加“C”</button> <button bindtap="delete" data-name="Python">刪除“Python”</button> <button bindtap="update" data-id="eb860d36634e87d900ccb62b24c3bfc0">傳入“R”的_id,改為Matlab</button>

homepage.js

import{tips,confirm,cloudRequest} from '../../utils/util.js' Page({data: {~~刪除線格式~~ testList: [],},onLoad: function (options) {this.getTestList();//調用函數查詢數據庫內容},//數據庫增加記錄add(){cloudRequest('dbManipulation', {module: 'test',//集合名稱action: 'add',//操作params: {name:"C"}}, function (res) {console.log('add-res', res)})this.getTestList();//更新后刷新數據},//數據庫刪除記錄delete(e){const {name}=e.currentTarget.dataset;cloudRequest('dbManipulation', {module: 'test',//集合名稱action: 'delete',//操作map: {name:name}}, function (res) {console.log('remove-res', res)})this.getTestList();//更新后刷新數據},//數據庫修改記錄update(e){const {id}=e.currentTarget.dataset;cloudRequest('dbManipulation', {module: 'test',//集合名稱action: 'update',//操作id:id,params: {name:"Matlab"}}, function (res) {console.log('update-res', res)})this.getTestList();//更新后刷新數據},//數據庫查詢getTestList() {var that = this;cloudRequest('dbManipulation', {module: 'test',//集合名稱action: 'query',//操作map: {}}, function (res) {console.log('查詢得到的數據res', res)that.setData({testList:res.result.data})})}, })

總結

以上是生活随笔為你收集整理的微信小程序万能模板（tabBar\openid\授权登录\云开发之一个云函数实现云数据库增删查改！）的全部內容，希望文章能夠幫你解決所遇到的問題。

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