微信小程序雲開發入門到發布上線

初始化項目

起步說明【非小白教程】

適合人群【建議快速看文檔，對着寫一遍】

1. 看過官方文檔，並簡單的寫過

• 起步教程
• 雲開發文檔

2. 熟悉vue/es6

小程序注冊【微信公眾平台】

獲取appid【微信公眾平台-開發-開發設置】

新建小程序雲開發項目

1. 新建項目選擇一個空目錄，填入 AppID（使用雲開發能力必須填寫 AppID）
2. 勾選創建 “小程序雲開發 ”
3. 點擊新建即可得到一個展示雲開發基礎能力的示例小程序。
4. 該小程序與普通 QuickStart 小程序有以下不同需注意：

• 無游客模式、也不可以使用測試號
• project.config.json【工具配置】 中增加了字段 cloudfunctionRoot 用於指定存放雲函數的目錄
• cloudfunctionRoot 指定的目錄有特殊的圖標
• 雲開發能力從基礎庫 2.2.3 開始支持
  

未指定環境【第一次使用雲開發】

在使用雲開發能力之前需要先開通雲開發

點擊雲開發按鈕，繼續點擊開通，繼續同意條款

新建環境

注意事項：指定環境名稱，且后面 不可更改，只能建2個【環境ID是根據環境名稱自動生成的】

修改app.js 初始化【數據庫環境ID】

環境ID如下：

項目目錄

初始化后的目錄

新建頁面示例

• js【頁面邏輯】
• json【頁面配置】
• wxml【頁面結構】
• wxss【頁面樣式表】
  

app.json【ctrl+s保存】

新建util文件夾

utils文件代碼地址

入口文件app.js

公共js全局引入，也可以在各個頁面單獨引用
app.js代碼代碼地址

配置文件

全局配置【指的就是app.json】

這里只寫了一些項目用到的，其它配置參照官方文檔

頁面配置【頁面文件json格式結尾的】【約定大於配置】

頁面配置只能設置app.json中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

雲開發【包括雲函數】

前面已經介紹了小程序端的一些基本配置及文件的介紹；
這篇來講一下雲開發，在初始化項目時已經開通了雲開發功能。

雲開發介紹

1. 三大基礎能力支持：

• 雲函數：在雲端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼
• 數據庫：一個既可在小程序前端操作，也能在雲函數中讀寫的 JSON 數據庫
• 存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制台可視化管理【類似七牛的對象存儲】

2. 雲開發控制台

數據庫周邊

• 每條記錄都有一個_id字段用以唯一標志一條記錄
• 一個_openid字段用以標志記錄的創建者，即小程序的用戶【僅在小程序端創建才會生成此字段】
• 開發者可以自定義 _id，但不可自定義和修改 _openid
• 數據庫 API 分為小程序端和服務端兩部分，服務端相對小程序端操作，服務端權限大且更安全

權限控制

數據庫的權限分為小程序端和管理端，管理端包括雲函數端和控制台。

• 小程序端運行在小程序中，讀寫數據庫受權限控制限制，
• 管理端運行在雲函數上，擁有所有讀寫數據庫的權限。雲控制台的權限同管理端，擁有所有權限。

具體權限見雲開發文檔

開發示例

注意事項：使用集合必須是已存在的，所以得提前添加

1. 創建第一個集合

• 打開控制台，選擇 "數據庫" 標簽頁，通過 "添加集合" 入口創建一個集合。
• 界面中我們可以添加記錄、查找記錄、管理索引和管理權限。
  

2. 小程序端操作數據

• 以下第一條紅框代碼：調用獲取默認環境的數據庫的引用【用node寫過接口的同學可能一下就看明白了】
  
  

3. 服務端操作數據【雲開發】

• 新建雲函數

• 右鍵雲函數根目錄文件夾： 新建Node.js雲函數，初始化如下
  

• 雲函數同步

• 右鍵雲函數文件夾：上傳並部署：雲端安裝所有依賴

• 雲函數使用

• 雲函數可相互間調用

• 雲函數可小程序端使用，小程序端使用如下：
  

其它問題匯總

小程序端

自定義組件以及第三方組件的使用【見項目pages/index代碼】

雲開發

1. 多個雲函數環境切換繁瑣，不能統一配置【感覺后面官方會退出更合適的方法】

• 解決辦法：tcb-router
• 思路：建立一個雲函數，通過不同的url尋找方法
• 相關鏈接

2. 本地調試繁瑣
   沒有嘗試--!

入門項目【硬核天地】

• git源碼
• 掃碼體驗：
  

安裝使用

1. 克隆代碼到本地

git clone [e-mail]:xushankun/yhtd-mp.git

2. 打開“微信開發者工具”，導入項目

3. 導入時填寫自己的appid 或者導入后project.config.json 里更改appid
   

4. 環境ID改為自己的【包括每個雲函數index.js里的環境ID】
   

5. 數據庫添加集合如下：

• defriend【黑名單列表】
• kklist【帖子列表】
• services【功能控制開關】 字段："isRelease":true
• users【用戶列表】

isRelease發布狀態時改為false【規避微信審核，因為個人開發者禁止用戶發布信息】