一，導入uView

在開發小程序的時候，我習慣使用uView這個ui庫。主要是直接用當然比自己寫省時間。

它的官網：uView - 多平臺快速開發的UI框架 - uni-app UI框架 (gitee.io)

導入：

npm install uview-ui@2.0.31

然后按照官網進行配置：

1. 引入uView主JS庫

在項目根目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

2. 在引入uView的全局SCSS主題文件

在項目根目錄的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

3. 引入uView基礎樣式

注意！

在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性

<style lang="scss">/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */@import "uview-ui/index.scss";
</style>

4. 配置easycom組件模式

easycom功能可以讓用戶無需安裝、引用、注冊，三個步驟后才能使用組。uni-app為了調試性能的原因，修改easycom規則不會實時生效，配置完后，需要重啟HX或者重新編譯項目才能正常使用uView的功能。

// pages.json
{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此為本身已有的內容"pages": [// ......]
}

二,使用unicluld完成增刪改查的業務功能

頁面開發就不說了,無非就是html+css,這里主要講講如何使用uniclould進行增刪改查.

為了簡化篇幅,我拿我小程序的標簽來做講解,增刪改查各講一個例子,通過這四個例子,大家也能很快學會uniclould的云對象使用,其他業務開發大差不差的.

2.1,新建標簽數據表

第一步肯定是需要在云服務器新建數據表,如下圖所示,新建一個即可:

啥也不用選,初始空表就行,就取名為tabsTable.

2.2,增加標簽

新建完數據表,就需要往數據庫中新增標簽.

于是先畫好前端ui,然后新建云對象tab:

前端調用接口:

async addTabs(){let num=Number(this.tabsNum)if(!num ||typeof num != 'number'){uni.showToast({title: "請輸入有效值",icon:'error',duration: 1500});return }const tabs = uniCloud.importObject('tab') // 導入云對象const res2 = await tabs.addTabs({token:this.token,tabsName:this.tabsName,tabsNum:num})this.tabsName=''this.tabsNum=''this.getTabs()uni.showToast({title: res2.msg,icon:'error',duration: 2000});
},

主要就是這兩行代碼:

  const tabs = uniCloud.importObject('tab') // 導入云對象const res2 = await tabs.addTabs({token:this.token,tabsName:this.tabsName,tabsNum:num})

不用去糾結uniCloud從哪來的,編譯的時候,框架會給我們自己引入的.這里直接這么用就行了,可以暫時把它理解成一個全局的對象.只要這樣引入tab云對象,就能調用該云對象的addTabs方法啦.

前端調用這個接口后,我們的后端也就是我們的tab云對象就需要去接收,它的寫法如下:

// 云對象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc語法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
const db = uniCloud.database();
const userTable = db.collection('user');
const notesTable = db.collection('notes');
const tabsTable = db.collection('tabsTable');//這幾個是在引入數據表,因為要對數據表做增刪改查
const dbCmd = db.command
const {encrypt,decrypt} =require("common-object");
module.exports = {_before: function () { // 通用預處理器
?},/*** method1方法描述* @param {string} param1 參數1描述* @returns {object} 返回值描述*/async addTabs(param) {// 業務邏輯const {token,tabsName,tabsNum}=paramlet result=JSON.parse(decrypt(token))const openId=result.openid//增加標簽,首先要用該賬戶來判斷有沒有同名的標簽let res=await tabsTable.where({openId:dbCmd.eq(openId)}).get()let res2=res.data.filter(item=>{return item.tabsName==tabsName})if(res2.length>0){return {code:10001,msg:'該標簽名已存在'}}else{//新增標簽await tabsTable.add({tabsName:tabsName,openId:openId,tabsNum:tabsNum})return {code:10000,msg:'新增成功'}}}
}

這樣就完成了增加標簽的業務邏輯啦.

2.3,刪除標簽

刪除標簽也是類似的操作流程,先畫好頁面:

在頁面調用接口:

      //刪除標簽deleteTabs(){const that=thisuni.showModal({title: '提示',content: '刪除該標簽的同時會刪除該標簽下的筆記,確定要繼續?',success:async  function (res) {if (res.confirm) {let params={token:that.token,tabsSelect:that.deletetabsSelect}const tabs = uniCloud.importObject('tab')const res = await tabs.delTabs(params)that.deletetabsSelect=''that.getTabs()uni.showToast({//提示title:res.msg})  } else if (res.cancel) {console.log('用戶點擊取消');return}}});}

對應的云對象刪除標簽接口:

// 云對象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc語法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
const db = uniCloud.database();
const userTable = db.collection('user');
const notesTable = db.collection('notes');
const tabsTable = db.collection('tabsTable');
const dbCmd = db.command
const {encrypt,decrypt} =require("common-object");
module.exports = {_before: function () { // 通用預處理器
?},//刪除標簽async delTabs(param){const {token,tabsSelect}=paramlet result=JSON.parse(decrypt(token))const openId=result.openid//先刪除該標簽下的所有筆記let res = await notesTable.where({openId:dbCmd.eq(openId),tabsSelect:tabsSelect}).remove()//然后刪除對應的標簽let res2=await tabsTable.where({openId:dbCmd.eq(openId),tabsName:tabsSelect}).remove()return {code:10000,msg:'更新成功'}},
}

2.4,修改標簽

先畫好頁面:

前端的接口調用:

      //更新標簽名async updateTabs(){let num=Number(this.newTabsNum)let params={token:this.token,oldTabsName:this.updatetabsSelect,newTabsName:this.newTabsName,newTabsNum:num}if(this.updatetabsSelect||!this.newTabsName || typeof num != 'number'){uni.showToast({title: "請輸入合法值",duration: 1500});}const tabs = uniCloud.importObject('tab') // 導入云對象const res = await tabs.updateTabs(params)this.updatetabsSelect=this.newTabsName=this.newTabsNum=''this.getTabs()uni.showToast({title: res.msg,duration: 1500});},

后端對應的接口,當然這個updateTabs方法和前文兩個接口一樣,我為了統一管理,放在同一個云對象里面了,這里為了減少篇幅,只復制了該方法出來.

  //更新標簽名async updateTabs(param){const {token,oldTabsName,newTabsName,newTabsNum}=paramlet result=JSON.parse(decrypt(token))const openId=result.openidlet res=await tabsTable.where({openId:dbCmd.eq(openId)}).get()let res2=res.data.filter(item=>{return item.tabsName==newTabsName})if(res2.length>0&&newTabsName!=oldTabsName){return {code:10001,msg:'該標簽名已存在'}}else{//更新標簽對應的文本為新標簽//第一步:先找到該用戶該標簽的所有數據let resTabnotes = await notesTable.where({openId:dbCmd.eq(openId),tabsSelect:oldTabsName}).update({tabsSelect:newTabsName})//更新-標簽let resTabs = await tabsTable.where({openId:dbCmd.eq(openId),tabsName:oldTabsName}).update({tabsName:newTabsName,tabsNum:newTabsNum})return {code:10000,msg:'更新成功'}}}

2.5,查詢標簽

前端的接口調用:

//獲取所有的標簽
async getTabs(){const tabs = uniCloud.importObject('tab') // 導入云對象const res = await tabs.getTabs({token:this.token})this.tabsList=res.datathis.columns[0]=res.data.map(item=>item.tabsName)
},

后端的接口調用:

  async getTabs(param){const {token}=paramlet result=JSON.parse(decrypt(token))let openId=result.openid//需要排序let res=await tabsTable.where({openId:dbCmd.eq(openId)}).orderBy('tabsNum','asc').get()let result2=res.data.map(item=>{return {tabsName:item.tabsName,tabsNum:item.tabsNum}})return {code:10000,data:result2}},

其他的業務開發大同小異,就不多說啦.其他功能可以掃描我文章開頭的二維碼,體驗一下,這個小程序是我自己將一直使用的,這里就當打個小廣告吧,也會持續維護迭代.有啥優化意見大家也可以提哈.

三,我的小程序體驗

我對應這個教程的小程序,可以看下圖,掃碼體驗: