2020年小程序開發-雲開發技術總結

2020年注定是不平凡的一年，一場冠狀疫情的爆發，讓人們突然認識到生命的可貴，人們對生命重新有了新的認識。譜寫了太多的悲傷，太多難過，太多的眼淚和辛酸。珍惜當下，敬畏生命，敬畏自然。

下面圍繞這些規范寫內容

• 文章的創新型

• 文章的實用性

• 代碼的可借鑒性

• 代碼的規范度

小程序雲開發入門到實踐：

wx.cloud.init({
  // env 參數：
  //   env 參數
  //   小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
  //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看 如不填則使用默認環境（第一個創建的環境）
  // env: 'my-env-id',
  traceUser: true,
})

wx.cloud.init({
  env: 'da-da',
  traceUser: true,
})

雲函數的配置與部署

1.下載安裝node.js，node.js是在服務端運行JavaScript的運行環境，雲開發所使用的服務端環境是node.js,npm是Node包管理器，通過npm可以方便的安裝雲開發所使用的依賴包。

node --version
npm --version
打開電腦終端（Windows電腦為cmd命令提示符，Mac電腦為終端Terminal）

如果用淘寶鏡像cnpm

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm --version

上傳到雲存儲的文件都有一個全網唯一的fileID，fileID只用於小程序內部，可以將fileID傳入到SDK就可以對文件進行下載，刪除，獲取文件信息等操作，非常方便。

<image src="fileID"></image>

體驗一下函數的調用：

可以獲取用戶的openid，用戶在小程序里有獨一無二的openid，相同的用戶在不同的小程序openid也不同，因此我們可以用openid來區分用戶，可以使用雲函數的Cloud.getWXContext()來獲取用戶的openid

獲取用戶信息：

<button 
  open-type="getUserInfo" 
  bindgetuserinfo="onGetUserInfo"
  class="userinfo-avatar"
  style="background-image: url({{avatarUrl}})"
  size="default"
></button>

onLoad: function() {
  // 獲取用戶信息
  wx.getSetting({
    success: res => {
      if (res.authSetting['scope.userInfo']) {
        // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
        wx.getUserInfo({
          success: res => {
            this.setData({
              avatarUrl: res.userInfo.avatarUrl,
              userInfo: res.userInfo
            })
          }
        })
      }
    }
  })
},

onGetUserInfo: function(e) {
  if (!this.data.logged && e.detail.userInfo) {
    this.setData({
      logged: true,
      avatarUrl: e.detail.userInfo.avatarUrl,
      userInfo: e.detail.userInfo
    })
  }
},

小程序的open-data可以用於展示微信用戶的信息，可以在miniprogram目錄index文件夾下的index.wxml文件：

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
<open-data type="userCity" lang="zh_CN"></open-data>
<open-data type="userProvince" lang="zh_CN"></open-data>
<open-data type="userCountry" lang="zh_CN"></open-data>

學習小程序開發-雲開發我覺得挺好，下面總結一下：

小程序是一種新的開放能力，開發者可以快速地開發一個小程序，小程序可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

第一，速度快，無需下載安裝，加載速度快於HTML5，微信登錄，隨時可用；第二，無需適配，一次開發，多端兼容，免除了對各種手機機型的適配；第三，支持直接或app分享給微信好友和群聊；第四，可達到近乎原生app的操作體驗和流暢度，在離線狀態亦可使用；第五，用完即走，隨手可得，通過掃碼，長按，微信搜索，公眾號，好友推薦等方式快速獲取服務，用完即走；第六，低門檻，已有公眾號的組織可快速注冊，可快速生成門店小程序。

小程序的技術發展過程：

HTML5：能力很少；體驗差；強烈依賴於開發者的素質

H5+JSSDK：無法管控；安全問題；依賴開發者素質

小程序：強管理；統一開發體驗

小程序語言：

渲染層：WXML+WXSS

邏輯層：JavaScript

配置：JSON

小程序設計規范：

友好：重點突出，流程明確

清晰：導航明確，減少等待，異常反饋

便捷：減少輸入，避免誤操作，操作流暢

統一：視覺統一，WeUI

小程序運營規范：

賬號信息：名稱描述清晰，與功能一致，材料真實

服務類目：類目與頁面內容一致，便捷可用

功能：完整可用，無推薦、排行榜，無搜索小程序，不互推

數據：獲取用戶數據時需告知，不得私下收集用戶數據

一般如果你打開一個小程序項目報錯如下：

未找到入口app.json文件，或者文件讀取失敗，請檢查后重新編譯。

別怕是因為你需要了解小程序文件結構：

小程序包含一個描述整體程序的app和多個描述各自頁面的page。

app.js是小程序邏輯，app.json是小程序公共設置，app.wxss是小程序公共樣式表。

什么是組件，組件是以某種方式對業務邏輯和功能進行封裝。

slot

component.wxml

<!--組件模板-->
<view class="wrapper">
 <view>組件的內部節點</view>
 <slot></slot>
</view>

page.wxml
// 引用組件的頁面模板
<view>
 <component-tag-name>
  <view>插入到組件slot中的內容</view>
 <component-tag-name>
</view>

多slot

component.js

Component({
 options: {
  multipleSlots: true // 在組件定義時的選項中啟用多slot支持
 },
 properties: { },
 methods: { }
})

component.wxml

// 組件模板
<view class="wrapper">
 <slot name="before"></slot>
 <view>組件的內部細節</view>
 <slot name="after"></slot>
</view>

// 引用組件的頁面模板
page.wxml
<view>
 <component-tag-name>
  // 這部分內容將被放置在組件<slot name="before">的位置上 -->
  <view slot="before">這里是插入到組件slot name="before"中的內容</view>
  // 這部分內容將被放置在組件<slot name="after">的位置上 -->
  <view slot="after">這里是插入到組件slot name="after"中的內容</view>
 </component-tag-name>
</view>

說說雲開發是什么？

雲開發是微信團隊聯合騰訊雲提供的原生Serverless雲服務，致力於幫助更多的開發者快速實現小程序業務的開發，快速迭代。

一行代碼創建數據：

db.collection('todos').add({
 data: {
  description: 'learn cloud dadaqianduan.cn',
  done: false
 },
 success(res){
  console.log(res)
 }
})

一行代碼查詢數據

db.collection('todos').doc('todoidentifiant-aleatoire').get({
 success(res) {
  console.log(res.data)
 }
})

雲開發QuickStart界面：

點擊獲取openid：

跟着提示操作可以查看：

點擊上傳圖片

前端操作數據庫

新增記錄
onAdd: function() {
 const db = wx.cloud.database()
 db.collection('counters').add({
  data: {
   count: 1
  },
  success: res => {
   // 在返回結果中會包含新創建的記錄的_id
   this.setData({
    counterId: res._id,
    count: 1
   })
   wx.showToast({
    title: '新增記錄成功',
   })
   console.log('新增')
  },
  fail: err => {
   wx.showToast({
    icon: 'none',
    title: '新增失敗'
   })
   console.error('失敗')
  }
 })
}

onAdd方法會往counters集合新增一個記錄，新增如下格式的一個JSON記錄：

{
  "_id": "數據庫自動生成記錄ID字段",
  "_openid": "數據庫自動插入記錄創建者的openid",
  "count": 1
 }

// 查詢
 onQuery: function() {
 const db = wx.cloud.database()
 // 查詢當前用戶所有的 counters
 db.collection('counters').where({
  _openid: this.data.openid
 }).get({
  success: res => {
   this.setData({
    queryResult: JSON.stringify(res.data, null, 2)
    })
    console.log('')
   },
   fail: err => {
    wx.showToast({
     icon: 'none',
     title: '失敗'
    })
    console.log('');
   }
  })
 }

// 更新
onCounterInc: function() {
 const db = wx.cloud.database()
 const newCount = this.data.count + 1
 db.collection('counters').doc(this.data.counterId).updata({
  data: {
   count: newCount
  },
  success: res => {
   this.setData({
    count: newCount
   })
  },
  fail: err=>{
   icon: 'none',
   console.error('')
  }
 })
},

onCounterDec:function() {
 const db = wx.cloud.database()
 const newCount = this.data.count - 1
  db.collection('counters').doc(this.data.counterId).updata({
  data: {
   count: newCount
  },
  success: res => {
   this.setData({
    count: newCount
   })
  },
  fail: err=>{
   icon: 'none',
   console.error('')
  }
 })
}

刪除功能

onRemove: function() {
    if (this.data.counterId) {
      const db = wx.cloud.database()
      db.collection('counters').doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({
            title: '刪除成功',
          })
          this.setData({
            counterId: '',
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '刪除失敗',
          })
          console.error('[數據庫] [刪除記錄] 失敗：', err)
        }
      })
    } else {
      wx.showToast({
        title: '無記錄可刪，請見創建一個記錄',
      })
    }
  },

快速創建雲函數

// 雲函數入口函數
exports.main = async (event, context) => {
  console.log(event)
  console.log(context)
  return {
    sum: event.a + event.b
  }
}

開發雲項目，進行QuickStart小程序改造：

需要把miniprogram文件夾下的pages,images,components,style文件夾里的文件，文件夾都要情況，app.wxss里的樣式代碼都要清空，將app.json的pages配置項設置為：

"pages": [
  "pages/index/index"
],

雲開發項目目錄：

project // 你的小程序項目
├── cloudfunctions //雲函數根目錄
│   └── login //login雲函數目錄，可以通過右鍵雲函數根目錄來新建
├── miniprogram //你原有的小程序文件存放的目錄
└── project.config.json 

在project.config.json添加miniprogramRoot配置

"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",

小程序的文件結構

設置小程序窗口表現

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "black"
},

底部都有一個帶有小圖標的切換tab，icon 大小限制為40kb，建議尺寸為81px * 81px，注意格式要是png哦

小程序的根目錄：

├── image  
├── pages 
├── utils 
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json

相對路徑與絕對路徑

./ 代表當前目錄 <img src=”./img/icon.jpg” /> 等同於<img src=”img/icon.jpg” />

../ 代表上一級目錄

/ 指的是當前根目錄，是相對目錄；<img src=”/img/icon.jpg” />

使用uniCloud

首先將cli項目導入HBuilderX，在項目根目錄（src同級）創建cloudfunctions-aliyun或者-tcb目錄，然后打開src/manifest.json，在基礎配置，uni-app應用表示，處點擊重新獲取。

<template>
  <view class="content">
    <view class="btn-list">
      <button type="primary" @click="fun">test</button>
    </view>
  </view>
</template>

<script>
export default {
    data() {
        return {
            imageSrc: ''
        }
    },
    methods:{
        fun:function () {
            console.log('函數運行......');
            uni.showLoading();
            uniCloud.callFunction({
                name:"add",
                data:{
                    name:"graceUI",
                    age : 20
                }
            }).then((res)=>{
                uni.hideLoading();
                console.log(res);
                var msg = res.result;
                uni.showToast({
                    title:msg.msg
                })
            });
        }
    }
}
</script>
<style>
.btn-list{margin:25rpx;}
</style>

uniapp搭建雲開發服務項目

創建雲服務空間，右鍵打開cloudfunctions 創建雲服務空間 會打開web控制台

創建的雲函數，所有操作都是右鍵上傳或者部署雲函數

上面講到uniCloud，那么什么是uniCloud呢？

uniCloud是Dcloud聯合阿里雲，騰訊雲，為uniapp的開發者提供的基於serverless模式和js編程的雲開發平台

uniCloud的好處在於用熟悉的js，輕松搞定前台整體業務。不管用什么服務器運維，彈性擴容，防DDos攻擊，全都不需要操心

其實客戶端調用雲函數，如下：

uniCloud.callFunction()//調用

**雲開發api-**雲開發API

wx.cloud
wx.cloud.database()
wx.cloud.database().command
wx.cloud.database().command.aggregate

提前發起權限設置

wx.authorize({
  scope: 'scope.record',
  success () {
    // 用戶已經同意小程序使用錄音功能，后續調用 wx.startRecord 接口不會彈窗詢問
    wx.startRecord()
  }
})

1.雲開發api分類

2.雲開發api初始化方法

3.雲開發api使用注意事項

初始化 服務端
npm install --save wx-server-sdk

const cloud = require('wx-server-sdk')
cloud.init({
 env: 'test-x' // 環境id
})

雲開發的初始化選項支持傳入一個Object，指定各個服務使用的默認環境

雲開發api使用注意事項：

1.雲開發api同時支持callback風格和promise風格

2.雲開發api初始化時如果沒有設置id，默認使用先創建的那個

3.在服務端可以借助雲開發sdk內置的getWXContext來獲取到用戶的身份信息

雲開發數組查詢

const db = wx.cloud.database();
const _ = db.command;

db.collection("todos")
.where({
 progress: _.in([0,100])
})
.get({
 success: console.log,
 fail: console.error
});

Index.js

const db = wx.cloud.database();
const _ = db.command
Page({
 query: function() {
  console.log('query')
  db.collection('data')
  .where({
   count: _.nin([1,3,4])
  })
  .get().then(console.log)
 }
})

了解網絡狀態

wx.getNetworkType({
  success(res) {
    console.log(res)
  }
});
所在的手機當前的網絡狀態是WiFi、3G、4G、5G

獲取設備信息

wx.getSystemInfo({
  success (res) {
    console.log("設備的所有信息",res)
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})
獲取用戶手機的微信版本、操作系統及版本、屏幕分辨率、設備的型號與品牌、基礎庫版本等信息。

頁面鏈接跳轉

wx.navigateTo({
  url: '/pxxx'
})

wx.navigateBack({
  delta: 1
})
返回頁面的上一層

顯示消息提示框

wx.showToast({
  title: '彈出成功',
  icon: 'success',
  duration: 1000
})

設置當前頁面的標題

wx.setNavigationBarTitle({
  title: 'xxxx'
})

打開文件選擇器上傳文件

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    const tempFilePaths = res.tempFilePaths
  }
})

小程序上獲取用戶信息的四種模式

wx.login -> 獲取code僅可用於獲取openid, unionid 和session_key

button -> 用戶首次需使用按鈕模式，提示用戶主動點擊按鈕，方可獲取用戶信息

wx.getUserInfo -> 用戶首次授權后，調用該接口可以獲取用戶信息，openid和unionid，需調用session_key解密后方可獲得

open-data -> 僅可用於展示用戶數據，js邏輯層無法獲取

小程序雲開發：

雲函數：wx.cloud.callFunction；數據庫：wx.cloud.database；文件存儲：wx.cloud.uploadFile

第一步創建雲開發，其目錄結構：

雲函數： cloudfunctions

前端代碼：miniprogram

圖片等資源： images

頁面目錄: pages

全局配置： app.js - app.json

全局樣式文件： app.wxss

項目配置文件：project.config.json

項目里使用創建的環境，在app.js文件配置

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        // env 參數說明：
        //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看
        //   如不填則使用默認環境（第一個創建的環境）
        env: 'my-env-id',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

b

其實調用雲函數文件：

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

獲取當前用戶openid：

<view>雲函數</view>
<button bindtap="getOpenId">獲取當前用戶openid</button>

getOpenId() {
 wx.cloud.callFunction({
  name: 'login'
 }).then(res=>{
  console.log(res);
 }).catch(err=>{
  console.log(err);
 })
}

批量刪除的代碼是怎么寫的呢，如下：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();

// 雲函數入口函數

exports.main = async(event, context) => {
 try{
  return await db.collection('user').where({
   name: 'jeskson'
  }).remove()
 }catch(e){
  console.log(e);
 }
}

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

雲開發模式：

小程序端-》原生接口-》雲開發：雲數據庫，雲函數，雲存儲，雲調用，HTTP API

創建數據庫：

可以在uniCloud中直接創建，也可以通過node.js的后台代碼來創建，在uniapp中，為了安全起見，是不允許客戶端直接調用數據庫，而是通過客戶端調用雲函數，元函數調用數據庫的形式

數據庫和集合的引用：

  const db=uniCloud.database();
  const ban=db.collection('集合名');//集合名就是數據表的名稱
  db.createCollection(collectionName)//創建集合

數據庫的增刪改查

  const db=uniCloud.database();
  const ban=db.collection('集合名');
  
  ban.get().then(res=>{
  console.log(res)
  }).catch(msg=>{
  console.log(msg)
  });
  //獲取集合中的數據，promise寫法
  
  ban.get({sucess:(res)=>{
  console.log(res)
  },
  fail:(msg)=>{
  console.log(msg)
  }
  });
  //第二種寫法
  //這里只簡單的介紹，詳細的可查看 官方文檔
  ban.where({
    name:"查詢的name"，
    index：查詢的下標等  
  }).get().then(res=>{
  console.log(res)
  }).catch(e=>{
  console.log(msg)
  });
  
  //添加
  ban.add({
    data:{
        id:要添加的id，
        name：要添加的name
    }
  }).then(res=>{
  console.log(res)
  }).catch(e=>{
  console.log(msg)
  });
  
//更新
  ban.doc('id').update({
    data:{
      name:'要替換的屬性名'
    }
  }).then(res=>{
  console.log(res)
  }).catch(e=>{
  console.log(msg)
  });
  
  ban.doc('id').set({
    data:{
      name:'要替換的屬性名'，
      id：要替換的id名
    }
  }).then(res=>{console.log(res)}).catch(e=>{console.log(msg)});
  
//刪除數據，只能每次刪除一條
  ban.doc('id').remove({ }).then(res=>{
  console.log(res)
  }).catch(e=>{
  console.log(msg)
  });

雲存儲：uploadFile(Object object)

uni.chooseImage({
 count: 1,
 success: (res) => {
  console.log(res);
  var path=res.tempFilePaths[0];//獲取當前圖片的路徑
  uniCloud.uploadFile({
   filePath: path, // 當前圖片路徑
   cloudPath: 'img', // 文件名
   success: (res1) => {
    console.log(res1);
   }
  })
 }
})

// promise寫法
const result = await uniClound.uploadFile({
 filePath: filePath
});

deleteFile(Object object) 刪除雲端文件

  // promise寫法
uniCloud
  .deleteFile({
    fileList: ['雲儲存的ID']；//字符串類型的數組
  })
  .then(res => {});

// callback寫法
uniCloud.deleteFile(
  {
    fileList: ['雲儲存的ID'],
    success(){},
    fail(){},
    complete(){}
  }
);

客戶端調用雲函數：

  //index.js雲函數文件
  'use strict'; 
  uniCloud.init();
  
  const db=uniCloud.database();
  exports.main = async (event, context) => {
    return new Promise((resolve,reject)=>{
    db.collection('banner').get().then(res=>{
        resolve(res);
    }).catch(msg=>{
        reject(msg);
    })
  })
};

  onLoad() {
          uniCloud.callFunction({//客戶端調用雲函數，雲函數調用數據庫
              name:'index',
              success:(res)=> {
                  console.log(res);
                  var ban=res.result.data[0].banner;
                  console.log(ban);
              }
          })
  },

uni-app使用微信小程序雲函數的步驟

修改manifest.json

"mp-weixin" : {
        /* 小程序特有相關 */
        "appid" : "4555xxxxxxxx",
        "cloudfunctionRoot": "./functions/", 
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    }

安裝copy-webpack-plugin插件

npm install -save copy-webpack-plugin;

講列表索引：

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

其中

*this表示在for循環中的item本身，而{{item}}的item是默認的。

<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  {{title}}
</view>

1. block並不是一個組件，只是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性

!0  // 返回true
!true  // 返回false
!false  // 返回true
!''  // 返回true
!'yes'  // 返回false
!["ok"] // 返回false
!{} // 返回false
!!true   // 返回true
!!{}     // 返回true，
!!false  // 返回false
!!""     // 返回false

hidden屬性：

<view wx:if="{{false}}">組件不顯示不渲染</view>
<view hidden="{{true}}">組件不顯示</view>
<view hidden>組件不顯示</view>
<view hidden="{{false}}">組件顯示</view>

audio組件，是音頻組件：

• src：要播放音頻的資源地址
• poster：默認控件上的音頻封面的圖片資源地址
• name：默認控件上的音頻名字
• author：默認控件上的作者名字

video組件，是表示視頻的組件：

• autoplay：是否自動播放
• loop：是否循環播放
• muted：是否靜音播放
• inital-time：指定視頻初始播放位置，單位是秒
• controls：是否顯示默認播放控件

地圖：

<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location
></map>

latitude: 2xxx.5xxxx3,
longitude: 1xx.xxx28,
markers: [{
  id: 1,
  latitude: xxx2.5xxxxx,
  longitude: 1xxx.xxx28,
  title: '深圳xxx'
}],

在地圖上標記多個點

markers: [{
  id: 1,
  latitude: xxx2.5xxxxx,
  longitude: 1xxx.xxx28,
  title: '深圳xxx'
  },
  {...

1. callout:點擊marker出現氣泡callout、以及氣泡上的label
2. circle：在地圖上顯示圓，比如用於顯示方圓幾公里
3. polygon：指定一系列坐標點，比如圈出實際的范圍
4. polyline：指定一系列坐標點，比如跑步的路線

轉發功能：

onShareAppMessage: function (res) {
  if (res.from === 'button') {
    console.log(res.target)
  }
  return {
    title: '雲開發',
    path: "pages/home/home",
    imageUrl:"https://happ.jpg",
    success: function (res) {
        // 轉發成功
    },
    fail: function (res) {
        // 轉發失敗
    }
  }
},

自定義頂部導航欄

"window":{
  "navigationStyle":"custom"
}

小程序的客服

<button open-type="contact"></button>

web-view承載網頁的容器。

<web-view src="https://mp. zxxx"></web-view>

獲取用戶信息

<button open-type="getUserInfo">彈出授權彈窗</button>

消息彈框

  wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
  })
  
  title
  icon：只有三個選項，success、loading、none
  duration：提示延遲的時間 1.5秒

彈出模態對話框

  wx.showModal({
    title: '學習',
    content: '學習',
    showCancel: true,
    confirmText: '確定',
    success(res) {
      if (res.confirm) {
        console.log('用戶點擊了確定')
      } else if (res.cancel) {
        console.log('用戶點擊了取消')
      }
    }
  })
  
  title屬性不是必填
  content屬性也不是必填
  showCancel默認值就是true
  confirmText默認值為確定

手機振動

手機振動API分兩種，一種是長振動，一種是短振動

  wx.vibrateLong({
    success(res) {
      console.log(res)
    },
    fail(err) {
      console.error(err)
    },
    complete() {
      console.log('振動完成')
    }
  })

彈出操作菜單

  wx.showActionSheet({
    itemList: ['1', '2', '3', '4'],
    success(e) {
      console.log(e.tapIndex)
    }
  })

頁面路由

redirectTo 關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
navigateTo 保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面

navigateBack 關閉當前頁面，返回上一頁面或多級頁面。

switchTab 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
reLaunch 關閉所有頁面，打開到應用內的某個頁面

生命周期

App() 必須在 app.js 中調用，必須調用且只能調用一次

App({
  onLaunch: function (options) { //監聽小程序初始化
  },
  onShow:function(options){      //監聽小程序啟動或切前台
  },
  onHide:function(){      //監聽小程序切后台
  },
  onError:function(msg){     //錯誤監聽函數     
  },
  onPageNotFound:function(){ //頁面不存在監聽函數
  },
  onUnhandledRejection:function(){//未處理的 Promise 拒絕事件監聽函數   
  },
  onThemeChange:function(){//監聽系統主題變化
  }
})

頁面的生命周期函數：

Page({
  data: {//頁面的初始數據
  },
  onLoad: function(options) {//監聽頁面加載
  },
  onShow: function() {//監聽頁面顯示
  },
  onReady: function() {//監聽頁面初次渲染完成
  },
  onHide: function() {//監聽頁面隱藏
  },
  onUnload: function() {//監聽頁面卸載
  },
  onPullDownRefresh: function() {//監聽用戶下拉動作
  },
  onReachBottom: function() {//頁面上拉觸底事件的處理函數
  },
  onShareAppMessage: function () {//用戶點擊右上角轉發
  },
  onPageScroll: function() {//頁面滾動觸發事件的處理函數
  },
  onResize: function() {//頁面尺寸改變時觸發
  },
  onTabItemTap:function(){//當前是 tab 頁時，點擊 tab 時觸發
  }
})

onLaunch與onShow

onLaunch是監聽小程序的初始化，初始化完成時觸發，全局只會觸發一次

onShow是在小程序啟動，或從后台進入前台顯示時觸發，也就是它會觸發很多次

正在加載中

App({
  onLaunch: function () {
    wx.showLoading({
      title: "正在加載中",
    })
  },
  globalData: {

  }
})

App({
  onLaunch: function () {
    wx.showLoading({
      title: "正在加載中",
    })
  },
  onShow (options) {
    wx.hideLoading({
      success: (res) => {
        console.log("加載完成，所以隱藏掉了")
      },
    })
  },
  globalData: {

  }
})

小程序打開場景值

App({
  onLaunch: function (options) {
    console.log('打印小程序啟動時的參數',options)
  },
})

path: "" //頁面路徑
query: {} //頁面的參數
referrerInfo: {} //來源小程序、公眾號或 App 的 appId
scene: 1047 //場景值
shareTicket: //帶 shareTicket 的轉發可以獲取到更多的轉發信息，例如群聊的名稱以及群的標識 openGId

了解wx.login、wx.getSetting

App({
  onLaunch: function () {
    wx.login({
      success(res){
        console.log('wx.login得到的數據',res)
      }
    })
 
    wx.getSetting({
      success(res){
        console.log('wx.getSetting得到的數據',res)
      }
    })
  },
 
  globalData: {
    userInfo: null
  }
})

獲取用戶信息wx.getUserInfo

首先需要判斷用戶是否允許

wx.getSetting({
  success(res){
    console.log('wx.getSetting得到的數據',res)
    if (res.authSetting["scope.userInfo"]){
      wx.getUserInfo({
        success(res){
          console.log("wx.getUserInfo得到的數據",res)
        }
      })
    }
  }
})

UserInfo

用戶信息

屬性

string nickName

用戶昵稱

string avatarUrl

用戶頭像圖片的 URL。

number gender

用戶性別

string country

用戶所在國家

string province

用戶所在省份

string city

用戶所在城市

string language

顯示 country，province，city 所用的語言

globalData

wx.getUserInfo({
  success(res){
    console.log("wx.getUserInfo得到的數據",res)
    this.globalData.userInfo = res.userInfo
  }
})

Promise調用方式

wx.getNetworkType() 
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

雲函數入門

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV, 
})
exports.main = async (event, context) => {
  const sum = event.a + event.b
  return sum
}

雲函數的調用

wx.cloud.callFunction({
  name: 'sum',    
  data: {        
    a: 15,
    b: 23,
  }
}).then(res => {
  console.log("雲函數返回的結果",res)
}).catch(err => {
  console.log("雲函數調用失敗",err)
})

wx-server-sdk是微信小程序服務器端的SDK

SDK包括用於微信免鑒權的私有協議、雲數據庫、雲存儲、雲調用等基礎能力，因此每一個雲函數都會使用到wx-server-sdk這個Node包。

雲函數的初始化

const cloud = require('wx-server-sdk')
cloud.init({
  env: 'x' //換成你的雲函數envId
})

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV //注意它不是字符串，不要加引號
})
cloud.DYNAMIC_CURRENT_ENV標志的是雲函數當前所在的環境

const cloud = require('wx-server-sdk')
cloud.init({
  env:cloud.DYNAMIC_CURRENT_ENV 
})
exports.main = async (event, context) => {
  const {width,height} = event
  console.log("長方形的周長與面積",[(width+height)*2,width*height])
  return {
    circum:(width+height)*2,
    area:width*height
  }
}

雲數據庫入門

wx.cloud.database().collection('集合名').where({
  _id:'記錄的id'
}).update({
  "字段名":"字段值"
})

wx.chooseImage()

<button bindtap="chooseImg">選擇圖片</button>
<image mode="widthFix" src="{{imgurl}}"></image>
<view>上傳的圖片</view>

chooseImg:function(){
  const that=this
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      const imgurl = res.tempFilePaths
      that.setData({
        imgurl
      })
    }
  })
},

count：可以選擇的照片數量，默認為9張

sourceType：選擇圖片的來源，album就是圖片可以來自手機相冊；而camera是可以來自手機拍照

sizeType

所選的圖片的尺寸，original為原圖，compressed為壓縮圖

tempFilePaths為臨時文件的路徑列表，tempFiles為臨時文件列表

image組件有默認寬度300px、高度225px

上傳多張照片

data: {
    imgurl:[],
},
<view wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
  <image mode="widthFix" src="{{item}}"></image>
</view>

獲取圖片信息

wx.getImageInfo()

chooseImg:function(){
  let that=this
  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      const imgurl = res.tempFilePaths
      console.log('chooseImage回調打印的res',res)
      that.setData({
        imgurl
      })
      wx.getImageInfo({
        src: res.tempFilePaths[0],
        success(res){
          console.log('getImageInfo回調打印的res',res)
        }
      })
    }
  })
},

wx.previewImage()預覽

previewImg:function(){
  wx.previewImage({
    current: '',
    urls: this.data.imgurl,
  })
},

保存圖片到相冊

saveImg:function(e){
  wx.saveImageToPhotosAlbum({
    filePath: "/images/xx.jpg",
    success(res) { 
      wx.showToast({
        title: '保存成功',
      })
    }
  })
}

壓縮圖片

wx.compressImage()

上傳文件

chooseFile: function () {
  let that = this
  wx.chooseMessageFile({
    count: 5,
    type: 'file',
    success(res) {
      console.log('上傳文件的回調函數返回值',res)
    }
  })
},

上傳地理位置

chooseLocation: function () {
  let that= this
  wx.chooseLocation({
    success: function(res) {
      const location=res
      that.setData({
        location
      })
    },
    fail:function(res){
      console.log("獲取位置失敗")
    }
  })
},

<map style="width: 100%; height: 300px;"
  latitude="{{location.latitude}}"
  longitude="{{location.longitude}}"
  show-location
></map>

下載文件

downloadFile(){
  const that = this
  wx.downloadFile({
    url: 'https://h.jpg',
    success (res) {
      console.log("成功回調之后的res對象",res)
      if (res.statusCode === 200) {//如果網絡請求成功
        that.setData({
          downloadFile:res.tempFilePath
        })
      }
    }
  })
},

downloadFile(){
  const downloadTask = wx.downloadFile({
    url: 'https://xxx.jpg', 
    success (res) {
      if (res.statusCode === 200) {
        that.setData({
          downloadFile:res.tempFilePath
        })
      }
    }
  })

  downloadTask.onProgressUpdate((res) => {
    console.log('下載進度', res.progress)
    console.log('已經下載的數據長度', res.totalBytesWritten)
    console.log('預期需要下載的數據總長度', res.totalBytesExpectedToWrite)
  })
},

預覽文檔wx.openDocument()

openDoc(){
  wx.downloadFile({
    url: 'https://x1.pdf', 
    success (res) {
      console.log("成功回調之后的res對象",res)
      if (res.statusCode === 200) {
        wx.openDocument({
          filePath: res.tempFilePath,
          success: function (res) {
            console.log('打開文檔成功')
          },
          fail:function(err){
            console.log(err)
          }
        })
      }
    }
  })
},

保存文件與文件緩存wx.saveFile

保存文件則是把圖片由臨時文件移動到本地存儲里

先調用wx.downloadFile再調用wx.saveFile將文件緩存的路徑存儲到頁面的data對象

調用wx.openDocument打開這個路徑

downloadPDF(){
  const that = this
  wx.downloadFile({
    url: 'https://xx.pdf', 
    success (res) {
      console.log("成功回調之后的res對象",res)
      if (res.statusCode === 200) {
        wx.saveFile({
          tempFilePath: res.tempFilePath,
          success (res) {
            console.log(res)
            that.setData({
              savedFilePath:res.savedFilePath
            })

          }
        })
      }
    }
  })
},

openPDF(){
  const that = this
  wx.openDocument({
    filePath:that.data.savedFilePath,
    success: function (res) {
      console.log('打開文檔成功')
    },
    fail:function(err){
      console.log(err)
    }
  })
}

獲取已保存的緩存文件列表

wx.getSavedFileList({
  success (res) {
    console.log(res.fileList)
  }
})

獲取緩存文件的信息

獲取臨時文件的信息，使用的是wx.getFileInfo

獲取緩存文件調用的信息，使用的則是wx.getSavedFileInfo

wx.getSavedFileInfo({
  filePath:"http://.pdf",//這是緩存文件的路徑
  success(res){
    console.log(res)
  }
})

文件管理器

wx.getFileSystemManager()來獲取全局唯一的文件管理器

const fs =  wx.getFileSystemManager()

文件管理器主要管理的就是wx.env.USER_DATA_PATH目錄里的文件

const fs =  wx.getFileSystemManager()

//創建一個文件夾
fs.mkdir({
  dirPath:wx.env.USER_DATA_PATH+"/cloudbase",
  success(res){
    console.log(res)
  },
  fail(err){
    console.log(err)
  }            
})

//讀取文件夾下有哪些文件，會返回文件夾內文件列表
fs.readdir({
  dirPath:wx.env.USER_DATA_PATH,
  success(res){
    console.log(res)
  },
  fail(err){
    console.log(err)
  }  
})

//新建一個文本文件test，並往文件里寫入數據
fs.writeFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  data:"dadaqianduan.cn",
  encoding:"utf8",
  success(res){
    console.log(res)
  }
})

//新增一些內容
fs.appendFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  data:"dadaqianduan.cn 達達前端",
  encoding:"utf8",
  success(res){
    console.log(res)
  }
})

//讀取test文本文件里的內容
fs.readFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  encoding:"utf-8",
  success(res){
    console.log(res)
  }
})

chooseImage:function() {
  const that = this
  wx.chooseImage({
    count: 1,
    success(res) {
      that.setData({
        tempFilePath: res.tempFilePaths[0]
      })
    }
  })
},
saveImage:function() {
  const that = this
  wx.saveFile({
    tempFilePath: this.data.tempFilePath,
    success(res) {
      that.setData({
        savedFilePath: res.savedFilePath
      })
      wx.setStorageSync('savedFilePath', res.savedFilePath)
    },
  })
},

onLoad: function (options) {
  this.setData({
    savedFilePath: wx.getStorageSync('savedFilePath')
  })
},

模塊化與引入模塊

const formatTime = date => {
  const year = date.getFullYear()  //獲取年
  const month = date.getMonth() + 1  //獲取月份，月份數值需加1
  const 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 
}
 
module.exports = { 
  formatTime: formatTime,
  formatNumber: formatNumber
}

const util = require('../../utils/util.js')

微信支付

綁定微信支付商戶號

callPay(){
  wx.cloud.callFunction({
    name: 'pay',
    success: res => {
      console.log(res)
      const payment = res.result.payment
      wx.requestPayment({
        ...payment,
        success (res) {
          console.log('支付成功', res) 
        },
        fail (err) {
          console.error('支付失敗', err) 
        }
      })
    },
    fail: console.error,
  })
},

pay雲函數

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    "body": "zzzzz",
    "outTradeNo" : "1xxxxxxxxxx", //不能重復，否則報錯
    "spbillCreateIp" : "127.0.0.1", //就是這個值，不要改
    "subMchId" : "xxxxxxxxxxx",  //你的商戶ID或子商戶ID
    "totalFee" : 100,  //單位為分
    "envId": "xxxxxxxx",  //你的雲開發環境ID
    "functionName": "paysuc",
    "nonceStr":"fffffffffffffff",  //隨便弄的32位字符串，建議自己生成
    "tradeType":"JSAPI"   //默認是JSAPI
  })
  return res
}

調用cloudPay.queryOrder()來查詢訂單的支付狀態

調用cloudPay.refund()來對已經支付成功的訂單發起退款

新建一個queryorder的雲函數

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async(event, context) => {
  const res = await cloud.cloudPay.queryOrder({
    "sub_mch_id":"xxxxxxxx",
    "out_trade_no":"xxxxxxxxx", //商戶訂單號，需是雲支付成功交易的訂單號
    // "transaction_id":"xxxxxxxxxxxxxxxxxxxxx",  //微信訂單號可以不必寫
    "nonce_str":"xxxxxxxxxxxxxxxxxxxxxxx" //任意的32位字符
  })
  return res
}

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async(event, context) => {
  const res = await cloud.cloudPay.refund({
    "sub_mch_id":"xxxxxxxxxx",
    "nonce_str":"xxxxxxxxxxxxxxxx",
    "out_trade_no":"xxxxxxxxxxxxxx",//商戶訂單號，需是雲支付成功交易的訂單號
    "out_refund_no":"xxxxxxxxxxxxxx",//退款單號，可以自定義，建議與訂單號相關聯
    "total_fee":100,
    "refund_fee":20,
  })
  return res
}

發訂閱消息，需要調用接口wx.requestSubscribeMessage

callPay(){
  wx.cloud.callFunction({
    name: 'pay', 
    success: res => {
      console.log(res)
      const payment = res.result.payment
      wx.requestPayment({
        ...payment,
        success (res) {
          console.log('支付成功', res) 
          this.subscribeMessage()
        },
      })
    },
  })
},
subscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: [
      "xxxxxx-xx-x",//訂閱消息模板ID
    ],
    success(res) {
      console.log("訂閱消息API調用成功：",res)
    },
    fail(res) {
      console.log("訂閱消息API調用失敗：",res)
    }
  })
},

自動回復文本消息和鏈接

<button open-type="contact" >進入客服</button>

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext() 
  try {
    const result = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'text',
      text: {
        content: 'xxxxxxx'
      }
    })
    
    const result2 = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'text',
      text: {
        content: 'xxxxx'
      }
    }) 

    return event    
  } catch (err) {
    console.log(err)
    return err
  }
}

自動回復鏈接

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext() 
  try {
    const result = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'link',
      link: {
        title: 'xxxxxxx',
        description: 'xxxxxx',
        url: 'https://xxxxxxx根據關鍵詞來回復用戶t.com/',
        thumbUrl: 'https://xxxxxxxm/love.png'
      }
    }) 
  return event    

  } catch (err) {
    console.log(err)
    return err
  }
}

根據關鍵詞來回復用戶

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext() 
  const keyword = event.Content
  try {
    if(keyword.search(/xxxx/i)!=-1){
      const result = await cloud.openapi.customerServiceMessage.send({
        touser: wxContext.OPENID,
        msgtype: 'link',
        link: {
          title: 'xxxxx',
          description: 'xxxxx',
          url: 'https://xxx.com/',
          thumbUrl: 'https://xxxx.png'
        }
      })  
    } 
    return event
  } catch (err) {
    console.log(err)
    return err
  }
}

獲取微信步數

getWeRunData(){
  wx.getWeRunData({
    success: (result) => {
      console.log(result)
    },
  })
}

訂閱消息

subscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: [
      "xxxxxxxxxxxx",//模板
      "xxxxxxxxxxxx",
      "xxxxxxxxxx
    ],
    success(res) {
      console.log("訂閱消息API調用成功：",res)
    },
    fail(res) {
      console.log("訂閱消息API調用失敗：",res)
    }
  })
},

雲開發登陸

檢查是否登錄

<script>
	global.isLogin = function() {
		try {
			var openid = uni.getStorageSync('openid');
		} catch (e) {

		}
		if (openid === '') {
			return false
		} else {
			return {
				openid
			}
		}
	};
	export default {
		onLaunch: function() {
			console.log('App Launch')
			wx.cloud.init({
				traceUser: true
			});
		}
	}
</script>

登陸頁面

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button class='bottom' type='primary' open-type="getUserInfo"
		 withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
			授權登錄
		</button>
		<!-- #endif -->
	</view>
</template>
<script>
	const db = wx.cloud.database();
	export default {
		data() {
			return {}
		},
		methods: {
			wxGetUserInfo(msg) {
				console.log(msg)
				
				var that = this;
				if (!msg.detail.iv) {
					uni.showToast({
						title: '您取消了授權，登錄失敗',
						icon: 'none'
					});
					return false
				}
				
				uni.showLoading({
				    title: '加載中'
				});
				
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
					
						console.log(loginRes)
						that.getOpenid(msg);
					},
					fail: function(r) {
						console.log(r)
					}
				})
				
			},
			getOpenid(msg) {
				var that = this;
				
				wx.cloud.callFunction({
					name: 'getOpenid',
					complete: res => {
						console.log('openid: ', res);
						try {
							uni.setStorageSync('openid', res.result.openId);
						} catch (e) {
						}
						that.saveToDb(msg, res.result.openId)
					},
				});
				
			},
			
			saveToDb(msg, openid) {
				console.log(openid)
				
				db.collection('user').where({
					_openid: openid
				}).get().then(res => {
				
					console.log(res)
					
					if (res.errMsg === 'collection.get:ok') {
					
						if (res.data.length === 0) {
							db.collection('user').add({
								data: {
									...msg.detail.userInfo,
									_openid: res.result.openId
								}
							}).then(res => {
								console.log(res);
							});
						}
						
						uni.hideLoading();
						
						uni.showToast({
							title: '授權成功',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {}
				})

			}
		},
		onLoad() {

		}
	}
</script>

總結

以上就是今天要講的內容，本文僅僅簡單介紹了小程序開發-雲開發技術總結，感謝閱讀，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友。感謝轉發分享，點贊，收藏哦！