小程序初始認識

wapeyang 發布于2019-08-23 12:33 / 2491人閱讀

摘要：僅支持部分選擇器交互交互邏輯與類似，此外還有豐富的小程序。中的是一個頁面構造器，通過它，結合小程序框架把和一起渲染出最終的結構。

我的第一個小程序

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/

云服務器 GPU云服務器小程序小程序小程序附近小程序門店小程序小程序小程序打開小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98721.html

小程序初始認識

摘要：僅支持部分選擇器交互交互邏輯與類似，此外還有豐富的小程序。中的是一個頁面構造器，通過它，結合小程序框架把和一起渲染出最終的結構。我的第一個小程序 1.首先搭建小程序所需環境，在微信公眾平臺上按照起步，申請賬號、登記信息、獲取到AppID接著安裝開發工具，我安裝的是v1.02.1810250版。打開后出現了初始化失敗，請使用 2.2.3 或以上的基礎庫以使用云能力的報錯。這時打開左...

forrest23 2019-08-29 17:05 評論0 收藏0
小程序初始認識

摘要：僅支持部分選擇器交互交互邏輯與類似，此外還有豐富的小程序。中的是一個頁面構造器，通過它，結合小程序框架把和一起渲染出最終的結構。我的第一個小程序 1.首先搭建小程序所需環境，在微信公眾平臺上按照起步，申請賬號、登記信息、獲取到AppID接著安裝開發工具，我安裝的是v1.02.1810250版。打開后出現了初始化失敗，請使用 2.2.3 或以上的基礎庫以使用云能力的報錯。這時打開左...

zhangwang 2019-08-02 11:48 評論0 收藏0
Day 2: AngularJS —— 對AngularJS的初步認識

摘要：開始使用現在創建一個名為的文件，它將會是一個基于的網上書店應用。這將初始化應用程序，并告訴要在這一部分活躍。將為每個元素增加元素。控制器和視圖之間的粘合劑，而且會注入到?，F在我們添加書籍數組的對象到對象，這個對象對視圖是可見的。編者注：我們發現了比較有趣的系列文章《30天學習30種新技術》，準備翻譯，一天一篇更新，年終禮包。以下是第二天技術的譯文。昨晚我完爆了一天一技術的任務...

joyqi 2019-08-19 14:24 評論0 收藏0
第一篇--認識Jmeter

摘要：為了最大限度的靈活性，允許使用正則表達式創建斷言。線程組理解一個虛擬用戶組，線程組內線程數量在運行過程中不會發生改變。測試執行后操作，即線程組執行完成后執行的內容。 Jmeter是Apache組織開發的基于Java的壓力測試工具，它最初被設計用于Web應用測試，但后來擴展到其他測試領域。它可以用于測試靜態和動態資源，例如靜態文件、Java 小服務程序、CGI 腳本、Java 對象、數...

張憲坤 2019-08-15 12:07 評論0 收藏0
小程序使用之自定義組件

摘要：今天要介紹的是小程序的自定義組件，類似的在做開發的過程中會用到自定義，封裝成通用的組件可以在不同頁面里重復使用可以將復雜的頁面拆分成多個低耦合的模塊，便于代碼的維護。文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介紹了關于 wxs 的使用，通過wxs處理數據再渲染到view層，可以簡...

Ververica 2019-08-02 12:09 評論0 收藏0