騰訊雲開發微信小程序使用體驗
阿新 • • 發佈：2019-05-13
增刪改查 限制 doc 選擇圖片 事件對象 hidden udp dde 數據庫權限
主體內容
- 代碼構成
- 數據:JSON 配置文件
- 結構:WXML 模版文件
- 樣式:WXSS 頁面樣式
- 交互:JS 腳本邏輯文件
- 雲開發
- 雲數據庫
- 雲函數
- 雲存儲
WXML
是小程序框架設計的一套標簽語言，結合小程序的基礎組件，事件系統，可以構建出頁面的結構，充當的就是類似HTML的角色
- 常見組件
<view></view>類似於div- 胡子語法{{}}插值
- 數據存儲在base.js文件中
- 列表渲染
- wx:for {{index}} {{item}}
- wx:key
- 條件渲染
- 使用wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊, 也可以用wx:elseif和wx:else來添加一個else塊
- wx:if vs hidden : 如果需要頻繁切換的情景下,用hidden更好,如果在運行時條件不大可能改變則 wx:if 較好
WXSS
WXSS(WeiXin Style Sheets)是一套用於小程序的樣式語言,用於描述WXML的組件樣式,也就是視覺上的效果。
- 尺寸單位:rpx(responsive pixel) 可以根據屏幕寬度進行自適應, 適配不同寬度的屏幕 (規定屏幕寬度為750rpx)
- 建議使用iphone6作為設計稿標準
引入外部wxss: @import ‘./test_0.wxss‘
- 推薦使用小程序第三方樣式庫
- WeUI :一套同微信原生樣式視覺體驗一致的基礎樣式庫
- iView Weapp:一套高質量的微信小程序UI組件庫 可構建後臺管理系統
- Vant Weapp:輕量、可靠的小程序UI組件庫
JS
事件機制
- 事件是對用戶的交互操作行為的相應
- bind VS catch : bind允許事件冒泡 catch不允許事件冒泡
- 事件對象event
微信小程序>雲開發
騰訊雲 + 微信小程序
- 雲函數
- 雲數據庫
- 雲存儲
?
小程序傳統開發模式
開發成本比較高 開發效率低 運維成本高
- 客戶端
- 服務端
- 後端代碼
- 數據庫
- 運維
小程序雲開發模式
Serverless 開發者更關註業務邏輯
客戶端 + 雲開發 減低成本
不需要運維成本
雲函數
- 獲取appid
- 獲取openid
- 生成分享圖
- 調用騰訊雲SDK
雲數據庫
- 數據增刪改查
雲存儲
- 管理文件
- 上傳文件
- 下載文件
- 分享文件
基礎環境
個小程序帳號可免費創建兩個環境建議:
開發環境
生產環境
調試基礎庫版本應在 2.2.3 以上版本
雲數據庫能力
雲開發提供了一個JSON數據庫 提供了2GB免費存儲空間
數據類型
- String: 字符串
- Number: 數字
- Object:對象
- Array:數組
- Bool: 布爾值
- GeoPoint : 地理位置點
- Date : 時間
- Null
操作雲數據庫
小程序控制(讀寫數據庫受權限控制限制)
- 雲函數控制(擁有所有讀寫數據庫的權限)
控制臺控制(擁有所有讀寫數據庫的權限)
雲數據庫權限管理
僅創建者可寫, 所有人可讀(文章類)
- 僅創建者可讀寫
- 僅管理端可寫
僅管理端可讀寫
數據庫初始化
初始化
const db = wx.cloud.database()切換環境
const testDB = wx.cloud.database({
env:'test'
})選擇雲開發的編譯路徑
通過雲開發實現增刪查改
db.collection('name').doc('id')add() or ...### 雲函數
調用雲函數的方法:
wx.cloud.callFunction({
name: '',
data:{}
}).then(res => {}).catch()雲存儲
能力
- wx.cloud.uploadFile 上傳文件
- wx.cloud.downloadFile 下載文件
- wx.cloud.deleteFile 刪除文件
- wx.cloud.getTempFileURI 獲取臨時鏈接
實例
upload: function (){
//選擇圖片api wx.chooseImage()
wx.chooseImage({
count: 1,
sizeType:['original','compressed'],
sourceType: ['album','camera'],
success(res) {
//tempFilePath 可以作為img標簽的src屬性顯示圖片(圖片的臨時路徑)
const tempFilePaths = res.tempFilePaths;
//調用雲存儲api 上傳文件 wx.cloud.uploadFile
wx.cloud.uploadFile({
cloudPath: new Date().getTime()+'.png'//上傳到雲儲存的路徑
filePath:'tempFilePaths[0]'// 文件路徑 因為tempFilePaths為數組
success:res => {
console.log(res.fileID)
db.collection('image').add({
data: {
fileID: res.fileID
}
}).then(res => {
console.log(res);
}).ctach( err => {
console.error(err);
})
},
fail:console.error
})
}
})
}
拉取雲存儲到頁面
getFile(){
wx.cloud.callFunction({
name:'login',
}).then(res => {
db.collectin('image').where({
_openid:res.result.openid
}).get().then(res2 => {
console.log(res);
this.setData({
//將拉取結果傳給data中的images
images: res2.data
})
})
})
}文件下載
cloud.wxml:
<block wx:for="{{images}}">
<image src="{{item.fileID}}"></image>
<button data-fileid="{{item.fileID}}
bind:tap="downloadFile>文件下載</button>
</block>cloud.js:
downloadFile(event){
wx.cloud.downloadFile({
fileID:event.target.dataset.fileid,//所需下載文件名
success: res => {
//返回臨時文件路徑
console.log(res.tempFilePath)
//把當前文件保存到手機相冊
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res => {
//自動消失的提示框
wx.showToast({
title:'保存成功'
})
})
})
},
fail: console.error
})
}
騰訊雲開發微信小程序使用體驗