?

微信小程序基礎(chǔ)概念

小程序云開(kāi)發(fā)的三大基礎(chǔ)能力：云數(shù)據(jù)庫(kù)、云函數(shù)、云存儲(chǔ)

Java、NodeJS、JavaScript、HTML5、CSS3、VueJs、ReactJs、前端工程化、前端架構(gòu)

小程序開(kāi)發(fā)入門(mén)基礎(chǔ)，開(kāi)發(fā)流程，云開(kāi)發(fā)的使用，獨(dú)自完成小程序開(kāi)發(fā)

什么是小程序：小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶(hù)不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。

小程序開(kāi)發(fā)成本低，周期短，維護(hù)升級(jí)簡(jiǎn)單，推廣成本低。

JSON全局配置，項(xiàng)目配置

云開(kāi)發(fā)，云數(shù)據(jù)庫(kù)，云函數(shù)，云存儲(chǔ)

用戶(hù)登錄

如何通過(guò)云函數(shù)獲取openid
傳統(tǒng)微信登錄，與，云開(kāi)發(fā)微信登錄
如何獲取用戶(hù)信息

電影列表

如何云函數(shù)調(diào)用第三方api
云函數(shù)調(diào)用api，與，小程序調(diào)用api
渲染列表

電影評(píng)價(jià)

云數(shù)據(jù)庫(kù)插入數(shù)據(jù)
選擇相冊(cè)圖片或拍照
云存儲(chǔ)的圖片上傳

image.png

image.png

.json配置文件，以json格式存儲(chǔ)一些配置
.wxml模板文件，描述頁(yè)面結(jié)構(gòu)，相當(dāng)于HTML
.wxss樣式文件，調(diào)整頁(yè)面樣式，相當(dāng)于css
.js腳本邏輯文件，頁(yè)面和用戶(hù)的交互邏輯

配置文件json
project.config.json:項(xiàng)目配置
app.json:全局配置
page.json:頁(yè)面配置

頁(yè)面結(jié)構(gòu)wxml

頁(yè)面樣式wxss

頁(yè)面交互js

// app.json
pages/base/base
pages/cloud/cloud

頁(yè)面結(jié)構(gòu)wxml

<image src="{{img}}"></image>
<view wx:for="{{arr}}" wx:key="{{index}}">
{{index}}{{item}}
</view>
<view wx:for="{{list}}">
{{item.name}}{{item.age}}
</view>

now you can provide attr 'wx:key' for a 'wx:for' to improve performance.

wx:if=""

hidden="{{}}"

之間差別

image.png

wxss是一套用于小程序的樣式語(yǔ)言，描述wxml組件樣式。

尺寸單位：rpx
可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，適配不同寬度的屏幕

onTapHandler: function() {
// this.data.count++; 

 count: this.data.count + 1
},

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

云數(shù)據(jù)庫(kù)

image.png

image.png

image.png

image.png

image.png

image.png

image.png

cloud.js
const db = wx.cloud.database(); // 初始化

wxml
<button bindtap="insert">插入數(shù)據(jù)庫(kù)</button>

創(chuàng)建數(shù)據(jù)庫(kù)
user

insert: function() {
 db.collection('user').add({
  data: {
   name: 'dashu',
   age:20
  },
 success: res => {
  console.log(res);
 },
 fail: err => {
  console.log(err);
 }
 })
}

insert: function() {
 db.collection('user').add({
  data: {
   name: 'jack',
   age: 12
 }
 }).then(res=>{
  console.log(res);
 }).catch(err=>{
 console.log(err);
 })
},

<button bindtap="update">更新數(shù)據(jù)</button>

update: function() {
 db.collection('user').doc('_id').update({
data: {
age:23
 }
 }).then(res => {
console.log(res);
  }).catch(err => {
console.log(err);
 })
},

search: function() {
db.collection('user').where({
name: 'yerry'
 }).get().then(res=> {
console.log(res);
 }).catch(err=>{
console.log(err);
 });
}

image.png

image.png

云函數(shù)：

?

image.png

求和函數(shù)sum()

獲取當(dāng)前用戶(hù)的openid

批量刪除云數(shù)據(jù)庫(kù)的數(shù)據(jù)

image.png

image.png

wx-server-sdk
服務(wù)器sdk

image.png

在終端中：

npm install --save wx-server-sdk@latest

index.js
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async(event, context) => {
const wxContent = cloud.getWXContent()
return {
  event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
 }
}

修改

sum
// index.js
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
return {
  sum: event.a + event.b
 }
}

<view>云函數(shù)</view>
<button bindtap="sum">調(diào)用云函數(shù)sum</button>

sum: function() {
 wx.cloud.callFunction({
name: 'sum',
data: {
a: 2,
b: 3
  }
 }).then(res=>{
console.log(res);
 }).catch(err=>{
console.log(err);
 });
},

獲取當(dāng)前用戶(hù)openid

<button bindtap="getOpenId">獲取當(dāng)前用戶(hù)openid</button>

getOpenId: function() {
}

傳統(tǒng)的微信登錄方式

用戶(hù)端小程序

微信服務(wù)器

后端服務(wù)器

用戶(hù)端的小程序發(fā)送請(qǐng)求
通過(guò)wx.login獲取code
在微信的服務(wù)端獲取一個(gè)code
在從用戶(hù)端小程序
調(diào)用wx.request將code傳遞給后端服務(wù)器

后端服務(wù)器
使用code換取openid和session_key

最后將用戶(hù)的標(biāo)識(shí)發(fā)送給小程序本地存儲(chǔ)

云開(kāi)發(fā)微信登錄

用戶(hù)

小程序

云函數(shù)

云數(shù)據(jù)庫(kù)

用戶(hù)通過(guò)點(diǎn)擊獲取用戶(hù)信息
用戶(hù)-》小程序

小程序-》云函數(shù)
獲取用戶(hù)信息

云函數(shù)-》小程序
返回用戶(hù)信息

小程序-》云數(shù)據(jù)庫(kù)
通過(guò)小程序?qū)⒂脩?hù)信息存儲(chǔ)到云數(shù)據(jù)庫(kù)

// login
index.js
const cloud = require('wx-server-sdk')

// 初始化 cloud
// 小程序用戶(hù)openid返回小程序端
// event參數(shù)包含小程序端調(diào)用傳入的data

exports.main = (event, context) => {
console.log(event)
console.log(context)
const wxContext = cloud.getWXContext()

// 獲取WXContext(微信調(diào)用上下文)
// 包括OPENID,APPID,UNIONID

return {
 event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}

// cloud
// cloud.js cloud.json cloud.wxml cloud.wxss
getOpenId: function() {
 wx.cloud.callFunciton({
name: 'login'
 }).then(res => {
console.log(res);
 }).catch(err=>{
console.log(err);
 });
}

image.png

// batchDelete
const cloud = require('wx-server-sdk')
cloud.init()
const db=cloud.database();
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
try{
return await db.collection('user').where({
nme: 'dashu'
 }).remove();
 }catch(e) {
console.error(e);
 }
}

image.png

batchDelete: function() {
 wx.cloud.callFunction({
name: 'batchDelete'
 }).then(res => {
console.log(res);
 }).catch(err => {
console.error(err);
 });
},

image.png

云存儲(chǔ)

wx.cloud.uploadFile 上傳文件
wx.cloud.downloadFile 下載文件
wx.cloud.deleteFile 刪除文件
wx.cloud.getTempFileURL 獲取臨時(shí)連接

文件上傳

用戶(hù)，小程序，云存儲(chǔ)，云數(shù)據(jù)庫(kù)

用戶(hù)選擇圖片或拍照到小程序
小程序上傳所選圖片到云存儲(chǔ)
云存儲(chǔ)返回fileID到小程序

小程序通過(guò)fileID存儲(chǔ)到云數(shù)據(jù)庫(kù)

<view>云存儲(chǔ)</view>
<button bindtap = "upload">上傳圖片</button>

wx.chooseImage(Object object)
從本地相冊(cè)選擇圖片或使用相機(jī)拍照

upload: function() {
// 選擇圖片
 wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
 success(res){
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths);

wx.cloud.uploadFile({
cloudPath: new Date().getTime() + '.png', // 上傳到云端的路徑
 filePath: tempFilePaths[0], // 小程序臨時(shí)文件路徑，數(shù)組
 success: res => {
console.log(res.fileID)
  db.collection('image').add({
data: {
fildID: res.fileID
  }
  }).then(res => {
console.log(res);
  }).catch(err => {
console.error(err);
   })
 },
fail: console.error
})

 }
 })
}

image.png

errMsg:
parameter.filePath should be string instead of array

上傳文件
在小程序端可以調(diào)用wx.cloud.uploadFile方法進(jìn)行上傳:

wx.cloud.uploadFile({
cloudPath: 'example.png', // 上傳到云端的路徑
 filePath: '', // 小程序臨時(shí)文件路徑
 success: res => {
  console.log(res.fileID)
 },
fail: console.error
})

image.png

云存儲(chǔ)

上傳圖片展示

<button bindtap="getFile">文件展示</button>

image.png

image.png

文件下載

小程序獲取文件fileID到云存儲(chǔ)
用戶(hù)單擊下載到小程序
小程序發(fā)送文件下載請(qǐng)求到數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)返回文件信息
小程序存儲(chǔ)圖片到手機(jī)相冊(cè)

<block wx:for="{{images}}">
<image src="{{item.fileID}}"></image>
<button size="mini" data-fildid="{{item.fileID}}" bindtap="downloadFile">文件下載</button>
</block>

保存圖片到相冊(cè)：

wx.saveImageToPhotoAlbum({
 success(res){}
})

downloadFile: function(event){
 wx.cloud.downloadFile({
fileID: event.target.dataset.fileid,
success: res=> {
console.log(res.tempFilePath)
   wx.saveImageToPhotoAlbum({
filePath: res.tempFilePath
    success(res){
     wx.showToast({
title: '保存成功'
     })
    }
   })

  },
fail: console.error
  })
},

---

若本號(hào)內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問(wèn)題），請(qǐng)及時(shí)聯(lián)系我們進(jìn)行整改即可，會(huì)在第一時(shí)間進(jìn)行處理。

---

?

?