小程序初始認識

個人第一個小程序

---

1.首先搭建小程序所需環境，在微信公衆平臺上按照起步，申請帳號、登記信息、獲取到AppID接着安裝開發工具，我安裝的是v1.02.1810250版。
打開後出現了「初始化失敗，請使用 2.2.3 或以上的基礎庫以使用雲能力」的報錯。這時打開左上角工具欄中的設置-->點擊項目設置-->調試基礎庫到2.2.3 便可。

接着又出現了 cloud init error: {errmsg: "operatewxdata:fail invalid scope"的報錯，解決方法爲點擊上方的雲開發--->開通雲服務--->右鍵項目名，綁定當前環境

2.代碼構成

• app.json:是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等,個人QuickStart 項目裏邊的初始 app.json 配置內容以下：

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "雲開發 QuickStart",
    "navigationBarTextStyle": "black"
  }
}

其中：
pages---用於描述當前小程序全部頁面的路徑，讓用戶指導此小程序頁面定義在那個目錄；
window ---定義小程序全部頁面的頂部背景顏色，文字顏色定義等

• project.config.json
  用於記錄開發工具的配置，在更換電腦時，載入項目文件便可恢復原有的配置。
• **.json
  用來定製每一個頁面的樣式都有的配置文件，屬性以下：
  
• WXML 模板
  充當的相似 HTML 的角色，但有一些不一樣：
  1).比起傳統的html代碼，WXML已經封裝了許多的組件，不須要用div、span等標籤來組成，而經常使用view、button、text等包裝好的組件。
  2).使用到相似VUE的MVVM開發模式，JS只須要管理狀態，經過模板語法來描述狀態和界面結構關係。
• WXSS樣式
  具備CSS的大部分特性，同事有一些擴充和修改。
  1).新增了尺寸單位rpx，可免去換算手機設備的不一樣寬度和像素比。
  2).提供了全局樣式app.wxss,和局部頁面樣式**.wxss。
  3).僅支持部分選擇器：
• JS交互
  交互邏輯與VUE相似，此外還有豐富的小程序API。

3.小程序的運行機制

• 小程序的啓動
  微信客戶端在打開小程序以前，會把整個小程序的代碼包下載到本地，經過app.json的pages中的第一個頁面路徑就是小程序的首頁了，經過小程序底層的一些機制，就能夠渲染出這個首頁。小程序啓動以後，在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
      onLaunch: function () {
        // 小程序啓動以後 觸發
      }
    })

• 程序與頁面
  每個頁面包含四個文件，.json配置生成一個小程序的格式框，頂部的字體和顏色在這裏定義，而後裝載.WXML和WXSS樣式，最後加載.JS。JS中的Page是一個頁面構造器，經過它，結合小程序框架把data和index.html一塊兒渲染出最終的結構。渲染以後，在onLoad的回調函數中處理你的邏輯。

[1]: https://developers.weixin.qq.com/miniprogram/dev/