在飛書上開發第一個小程序-HelloWorld

原創首發于飛書文檔由此訪問：

2020年最後一天的幾個小時，點上一根香，泡好茶，帶上降噪耳機在音樂的陪伴下寫寫代碼。
2020年第一天，沒搞完的繼續搞，加油~

開發環境的搭建

一、系統是MacOS，安裝Node.js，安裝的同時也會安裝好npm 下載地址 經常使用命令以下：

# 查看Node.js版本
node -v
# 查看npm版本
npm -v
# 查看node安裝目錄
which node
# 更新已安裝的npm庫
npm update -g
# 全局安裝n命令，用n命令升級Node.js
npm install -g n
# 升級到最新穩定版
n stable
# 升級到最新版
n latest
# 升級到指定版
n v14.15.3
# 切換使用版本
n 14.15.3 (ENTER)

二、安裝命令行工具

curl -L https://sf1-scmcdn-tos.pstatp.com/obj/larkdeveloper/opdev/scripts/install_1.7.0.sh | sh

三、安裝完成後，執行如下命令校驗是否安裝成功

# 是否安裝成功
opdev help
# 檢查安裝的版本
opdev --version
# 查看單個命令幫助信息，如上傳命令
opdev upload --help

四、上傳、預等操做須要先登陸飛書帳號，輸入如下命令會打開默認瀏覽器進行登陸。

這個地方比較坑，不知道是工具兼容的問題仍是什麼，嘗試屢次失敗後關閉終端從新打開才ok。

# 登陸
opdev login
# 選擇要登陸的環境，在這裏咱們選擇「Feishu」

五、登錄成功，返回終端，顯示如下信息，說明登陸成功。

建立第一個小程序

一、進入飛書開發者後臺，建立一個企業自建應用

二、在企業自建應用列表中點擊剛纔建立的HelloWorld應用進入應用詳情頁

三、在應用詳情頁中，點擊左側「憑證與基礎信息」標籤，查看右側「應用憑證」下的App ID（App ID 是應用的惟一標識）並複製。

四、從內置模板中生成一個「HelloWord」的小程序Demo

# 查看內置模版列表
opdev template
# 返回結果，自帶5個Demo
# Available templates:
# - hello-world  Gadget base template
# - gadget-demo  Gadget api/component demo
# - widget-demo-approve  Widget demo for Approve app
# - widget-demo-report  Widget Demo for Report app
# - block-demo  Block base template
# 用內置模版建立小程序Demo, [project-path]爲Demo目錄
opdev new [project-path] -t hello-world

五、編輯「project.config.json」中的第9行，將剛纔複製的App ID填入，保存退出。

{
    "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true
    },
    "appid": "XXXXXXXXXXXXXX",
    "projectname": "Hello World"
}

六、回到命令行，執行「opdev devtools Demo1 」命令，會打開左右兩個 Chrome 瀏覽器窗口（左邊是模擬器，右邊是調試器）。

七、回到代碼編輯器，打開 /pages/index/index.ttml，修改其中的內容並保存。

八、再次預覽，若是看到下面的結果，那就證實本地預覽和調試的方法你已經掌握了。

九、由於本地是基於Chrome的模擬預覽，還能夠經過真機預覽來查看小程序的真實效果

opdev preview Demo1 -p Mobile

正常應該返回一個二維碼，經過飛書客戶端掃碼便可實現預覽

注意：這個地方容易出現問題，報錯信息以下

緣由是當前登陸用戶沒有node_modules目錄的權限，由於當時安裝node是用的root帳戶。

解決方法：

# 其中XXXX替換成你當前的用戶
sudo chown -R XXXX /usr/local/lib/node_modules

上傳和發佈小程序

一、進入命令行，執行如下命令，-p Mobile 標識上傳移動端小程序版本，輸入版本號和描述
複製下圖紅色框出現的網址在瀏覽器中打開

二、打開 啓用小程序 開關、選擇最新小程序的版本、點擊保存按鈕，確認保存成功。

三、發佈應用，在此以前，須要確保小程序的圖標已經設置好。點擊左側 版本管理與發佈 進入版本管理與發佈頁面，點擊 建立版本 按鈕，進入建立版本詳情頁。

四、填寫完信息後，選擇「申請發佈」

五、在飛書客戶端會給企業管理員發信息審覈，發送信息的是「開發者小助手（原開放平臺助手）」

六、點擊「去審覈」後進入「飛書管理後臺」-「應用審覈」-在右側點擊「審覈」按鈕

七、點擊「經過」按鈕完成應用審覈

八、完成審覈後，能夠在「版本管理與發佈」中看到版本狀態爲「已上架」

九、打開飛書客戶端，進入工做臺，能夠看到剛纔發佈的「HelloWorld」小程序，點擊能夠打開應用。


十、好了，搞定，第一個飛書小程序，過程當中仍是遇到一些問題的，但結果仍是好的。

2021新年第一天，祝你們新年快樂。

歡迎聯繫做者一塊兒交流飛書開發經驗。