騰訊雲開發微信小程序使用體驗

主體內容

• 代碼構成
  • 數據: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
    })
}