日韩午夜无码A级毛片,精品久久国产一区二区三区香蕉

一、AVM 組件介紹

AVM（未處理） (Application-View-Model) 跨端框架是一個(gè)移動優(yōu)先的高性能跨端JavaScript框架，支持一次編寫多端渲染。它提供更趨近于原生的編程體驗(yàn)，通過簡潔的模型來分離應(yīng)用的用戶界面、業(yè)務(wù)邏輯和數(shù)據(jù)模型，適合高度定制的應(yīng)用開發(fā)。

AVM 中的絕大多數(shù)代碼和部件都是以組件化的方式組織的，在這個(gè)條件下，可以產(chǎn)出大量可復(fù)用、實(shí)用性強(qiáng)的功能組件和業(yè)務(wù)組件。

因此我們希望在APICloud平臺現(xiàn)有的模塊生態(tài)下，新增 “AVM組件” ，為開發(fā)者建立AVM組件代碼復(fù)用的橋梁。該類型模塊要求提交AVM組件源碼，該源碼可以是某個(gè)基礎(chǔ)組件的框架，例如自定義渲染的選擇器組件、日歷等，也可以是某個(gè)業(yè)務(wù)場景的封裝，例如收貨地址地圖選點(diǎn)、聯(lián)系人信息卡片和購物車頁面交互等，或是對原生功能模塊的UI封裝，例如基于融云IM模塊封裝的會話列表，聊天窗口等。開發(fā)者通過平臺獲取到該模塊的源碼后，可以通過 Studio3 導(dǎo)入自身APP項(xiàng)目中直接使用。

以下規(guī)范旨在統(tǒng)一 AVM 組件的的標(biāo)準(zhǔn)和形式，同時(shí)幫助審核人員提高審核效率，保證組件品質(zhì)。

二、組件審核規(guī)范

0. 總則

AVM 組件包需要盡可能能支持多端運(yùn)行，包含 STML（或者是 JS ）、CSS、 JS 代碼以及所依賴的圖片等資源文件和幫助文檔。應(yīng)遵循簡潔，抽象，低耦合的原則，避免冗余的 CSS/JS 代碼。充分考慮拓展性和普適性，能夠?qū)Χ喾N場景和業(yè)務(wù)做到最大程度適用。

1. 組件包資源結(jié)構(gòu)

目錄中 ${component-name} 為變量，即組件名稱。

┌─${component-name}/                    // 組件根目錄 以組件名稱命名
│  ├─asset/                             // 組件附件資源目錄 包括圖片資源 字體等
│  ├─demo-${component-name}/            // 組件演示目錄 格式為demo-組件名稱
│  │  ├─demo-${component-name}.stml     // 組件演示頁面文件 與父文件夾同名
│  ├─${component-name}.stml/js          // 組件入口文件 (可以是 STML / JS )
│  ├─${component-name}.css              // 組件依賴的獨(dú)立外部css文件
│  ├─readme.md                          // 組件的說明文檔
│  ├─package.json                       // 包信息文件
└────────────────

1.0. 最外層目錄和壓縮包

1.0.1. 模塊包的最外層目錄必須為該組件名。

1.0.2. 壓縮格式為zip包，請右鍵根目錄進(jìn)行壓縮，而不是在文件夾類全選進(jìn)行壓縮。

1.1. 組件包最佳實(shí)踐

1.1.1. 應(yīng)盡可能的確保組件的輕量，避免引入大的外部樣式表、字體文件等外部資源

1.1.2. 對于使用圖片等外部資源的組件，應(yīng)將外部資源以 API 形式開放給使用者，避免將資源打包在組件包內(nèi)

1.1.3. 本組件如果依賴其他組件，應(yīng)將依賴的組件打包在本組件包內(nèi)

1.2. * 組件包處理流程

1.2.1. 組件包可通過開發(fā)工具導(dǎo)入到項(xiàng)目中直接使用。

1.2.2. 組件包中代碼及資源在開發(fā)工具調(diào)試或云編譯過程中將被還原至 widget 對應(yīng)的目錄中，具體規(guī)則為：

asset 下圖片/視頻等多媒體資源拷貝至widget的image目錄
css/字體文件拷貝至widget的css目錄
js資源拷貝至widget的script目錄。
demo演示目錄會拷貝到pages目錄，所以在demo中的組件資源的引用路徑層級，以在pages目錄下的情況為準(zhǔn)。

2. 組件包內(nèi)包信息 package.json 模板說明

{
  "name": "a-button",
  "version": "1.0.0",
  "description": "一個(gè)按鈕組件的描述",
  "main": "test.stml",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "apicloud",
  "license": "MIT",
  "avm": {
    "platform": ["app","web","mp"],
    "systemType": ["ios","android"],
    "keywords": ["ui","input","component"],
    "site":"https://example.com",
    "price":100,
    "meta":{...}
  }
}

2.1. 使用標(biāo)準(zhǔn)的 json 格式創(chuàng)建包信息文件 (建議使用 npm init 生成模板)

name [String] 組件名稱
version [String] 當(dāng)前版本
description [String] 簡介
main [String] 組件入口
author 作者/聯(lián)系郵箱

2.2. 添加 avm 字段，包含以下信息：

platform [Array] 適配平臺 {app:native,web:h5網(wǎng)頁,mp:小程序}
systemType [Array] 支持的系統(tǒng)類型 {ios,android}
keywords [Array] 組件關(guān)鍵字
site [String] 支持網(wǎng)站網(wǎng)址
price [Number] 整數(shù)售價(jià)(單位分)
meta [Object] 組件元信息，詳情請參考 2.3

2.3. meta 組件元信息說明

為了更好的規(guī)范組件屬性和方法信息，特此新增 avm.meta 字段，用于結(jié)構(gòu)化規(guī)范組件內(nèi)容。

其結(jié)構(gòu)如下：

{
  "component": "a-button",
  "desc": "一個(gè)快速定義樣式尺寸的按鈕組件",
  "type": 2,
  "nativeModules": ["aMap","bMap"],
  "event": [
    {
      "name": "myEvent",
      "desc": "按鈕的一個(gè)自定義事件",
      "params": [
        {
          "name": "$event",
          "desc": "事件源對象",
          "type": "Event"
        },
        {
          "name": "paramX",
          "tip": "回調(diào)參數(shù)的說明",
          "type": "string",
          "enum": [
            "primary",
            "success",
            "warning",
            "danger"
          ],
          "default": "success"
        }
      ]
    }
  ],
  "props": [
    {
      "name": "color",
      "tip": "按鈕的顏色",
      "type": "string",
      "enum": [
        "primary",
        "success",
        "warning",
        "danger"
      ],
      "default": "success"
    }
  ],
  "methods": [
    {
      "name": "myMethod",
      "desc": "一個(gè)可以對外使用的方法",
      "params": [
        {
          "name": "paramX",
          "tip": "回調(diào)參數(shù)的說明",
          "type": "string",
          "enum": [
            "primary",
            "success",
            "warning",
            "danger"
          ],
          "default": "success"
        }
      ]
    }
  ]
}

上面是一個(gè)典型的組件元信息。重點(diǎn)關(guān)注以下字段：

component 組件名稱
desc 組件描述（可選，不填取 package.json 的 description）
type 組件類型 1：容器類 2：普通類 3：彈窗類
nativeModules 組件依賴的原生組件
event 組件事件列表詳情參考示例
props 組件屬性列表詳情參考示例
methods 組件提供的外部方法列表詳情參考示例

3. 組件命名規(guī)范

3.1. 組件包名即為組件名，并代表該組件的命名空間，組件名需要和2.1中提到的 package.json 的 name 保持一致。組件名稱使用全小寫，多個(gè)單詞使用 - （中劃線）分割。

3.2. 組件名稱需要在APICloud平臺全局獨(dú)立，建議使用個(gè)性化特殊前綴來作為組件命名空間。

例如寫了一個(gè)輸入框組件，如果直接叫做 input ，則比較泛，需要增加自己的個(gè)性標(biāo)識，或者是使用意圖性質(zhì)的限定詞語。

例如：my-input tom-input password-input

3.3. 使用單語言模式的 js 組件的入口文件名推薦使用 index.js ，這樣在引入的時(shí)候可以只書寫到組件根目錄即可。

3.4. [重要] 組件樣式目前需要附帶組件名稱作為前綴來形成 scope 。樣式規(guī)則推薦使用 BEM 規(guī)范。

例如組件名稱叫做 simple-sfc 那么樣式需要附帶 simple-sfc 作為前綴

按照 BE--M 的規(guī)范來組織 css 結(jié)構(gòu)，例如：

simple-sfctitle-text--disabled 表示組件（simple-sfc）內(nèi)的標(biāo)題的文本（title-text），是禁用狀態(tài)（disabled）。

3.5. 其他資源和 js 函數(shù)命名等無嚴(yán)格要求，建議遵循語言特性和標(biāo)準(zhǔn)編程風(fēng)格即可。

注：如果組件引入了外部js文件，該js文件須按照ES6規(guī)范編寫，即該js文件可通過export | import配對使用。

3.6. 組件中不能攜帶包括不限于 view text 這類通配選擇器，避免干擾頁面其他元素樣式。所有出現(xiàn)的css選擇器必須攜帶前綴。

4. 組件包 README.MD 文檔規(guī)范說明

說明文檔是組件的說明書，有助于其他開發(fā)者更高效便捷地使用組件。請遵循以下示例文檔：

請重點(diǎn)關(guān)注格式的樣式級別。

## 使用方式


import AButton from "../../components/act/a-button.stml";
import AButton from "../../components/act/a-button.js";
或
import "../../components/act/a-button.stml";
import "../../components/act/a-button.js";


## 代碼示例


### 按鈕類型
按鈕支持 default、primary、success、warning、danger 五種類型，默認(rèn)為 default。


<a-button type="primary">主要按鈕</a-button>
<a-button type="success">成功按鈕</a-button>
<a-button type="default">默認(rèn)按鈕</a-button>
<a-button type="warning">警告按鈕</a-button>
<a-button type="danger">危險(xiǎn)按鈕</a-button>


[對應(yīng)的運(yùn)行效果圖]


### 樸素按鈕
通過 plain 屬性將按鈕設(shè)置為樸素按鈕，樸素按鈕的文字為按鈕顏色，背景為白色。


<a-button plain type="primary">樸素按鈕</a-button>
<a-button plain type="primary">樸素按鈕</a-button>


[對應(yīng)的運(yùn)行效果圖]




## 幫助說明 聯(lián)系方式等


### 幫助說明


  對本組件使用過程中需要特別注意或者額外信息等進(jìn)行說明。


### 聯(lián)系方式 


  如果您在使用本組件過程中，遇到任何問題，可通過xxx聯(lián)系...

AVM 組件開發(fā)規(guī)范

一、AVM 組件介紹

二、組件審核規(guī)范