<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [TOC] ### 2.1.2 渲染層/視圖層--View 視圖層 View 框架的視圖層由 WXML 與 WXSS 編寫,由組件來進行展示。將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層。 WXML(WeiXin Markup language) 用于描述頁面的結構。 WXS(WeiXin Script) 是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。 WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。 組件(Component)是視圖的基本組成單元。 #### 2.1.2.1 WXML WXML(WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面的結構。 ##### 1. 數據綁定 WXML 中的動態數據均來自對應`*.js`文件中page 的 data。 數據綁定使用 Mustache 語法(雙大括號)將變量包起來,可以作用于: * 內容 ~~~HTML <view> {{ message }} </view> ~~~ ~~~JavaScript Page({ data: { message: 'Hello MINA!' } }) ~~~ * 組件屬性(需要在雙引號之內) ~~~HTML <view id="item-{{id}}"> </view> ~~~ ~~~JavaScript Page({ data: { id: 0 } }) ~~~ * 控制屬性(需要在雙引號之內) ~~~HTML <view wx:if="{{condition}}"> </view> ~~~ ~~~JavaScript Page({ data: { condition: true } }) ~~~ * 關鍵字(需要在雙引號之內) true:boolean 類型的 true,代表真值。 false: boolean 類型的 false,代表假值。 ~~~HTML <checkbox checked="{{false}}"> </checkbox> ~~~ >[danger]不要直接寫 checked="false",其計算結果是一個字符串,轉成 boolean 類型后代表真值。 * 三元運算 ~~~HTML <view hidden="{{flag ? true : false}}"> Hidden </view> ~~~ * 算數運算 ~~~HTML <view> {{a + b}} + {{c}} + d </view> ~~~ ~~~JavaScript Page({ data: { a: 1, b: 2, c: 3 } }) ~~~ view中的內容為 `3 + 3 + d`。 * 邏輯判斷 ~~~HTML <view wx:if="{{length > 5}}"> </view> ~~~ * 字符串運算 ~~~HTML <view>{{"hello" + name}}</view> ~~~ ~~~JavaScript Page({ data:{ name: 'MINA' } }) ~~~ * 數據路徑運算 ~~~HTML <view>{{object.key}} {{array[0]}}</view> ~~~ ~~~JavaScript Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } }) ~~~ * 組合 也可以在 Mustache 內直接進行組合,構成新的對象或者數組。 * 數組 ~~~HTML <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view> ~~~ ~~~JavaScript Page({ data: { zero: 0 } }) ~~~ 最終組合成數組`[0, 1, 2, 3, 4]`。 * 對象 ~~~HTML <template is="objectCombine" data="{{for: a, bar: b}}"></template> ~~~ ~~~JavaScript Page({ data: { a: 1, b: 2 } }) ~~~ 最終組合成的對象是 `{for: 1, bar: 2}` 也可以用擴展運算符` ... `來將一個對象展開 ~~~HTML <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> ~~~ ~~~JavaScript Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } }) ~~~ 最終組合成的對象是 `{a: 1, b: 2, c: 3, d: 4, e: 5}`。 如果對象的 key 和 value 相同,也可以間接地表達。 ~~~HTML <template is="objectCombine" data="{{foo, bar}}"></template> ~~~ ~~~JavaScript Page({ data: { foo: 'my-foo', bar: 'my-bar' } }) ~~~ 最終組合成的對象是` {foo: 'my-foo', bar:'my-bar'}`。 >[warning] 上述方式可以隨意組合,但是如有存在變量名相同的情況,后邊的會覆蓋前面 如: ~~~HTML <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template> ~~~ ~~~JavaScript Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } }) ~~~ 最終組合成的對象是 `{a: 5, b: 3, c: 6}`。 >[warning] 花括號和引號之間如果有空格,將最終被解析成為字符串 ~~~HTML <view wx:for="{{[1,2,3]}} "> {{item}} </view> ~~~ 等同于 ~~~HTML <view wx:for="{{[1,2,3] + ' '}}"> {{item}} </view> ~~~ ##### 2. 列表渲染 * `wx:for` 在組件上使用`wx:for`控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。 默認數組的當前項的下標變量名默認為 `index`,數組當前項的變量名默認為 `item` ~~~HTML <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> ~~~ ~~~JavaScript Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) ~~~ 使用 `wx:for-item` 可以指定數組當前元素的變量名, 使用 `wx:for-index` 可以指定數組當前下標的變量名: ~~~HTML <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> ~~~ `wx:for` 也可以嵌套,下邊是一個九九乘法表 ~~~HTML <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> ~~~ * `block wx:for` 類似 `block wx:if`,也可以將 `wx:for` 用在`<block/>`標簽上,以渲染一個包含多節點的結構塊。例如: ~~~HTML <block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> ~~~ * `wx:key` 如果列表中項目的位置會動態改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(如 `<input/>` 中的輸入內容,`<switch/>` 的選中狀態),需要使用 `wx:key` 來指定列表中項目的唯一的標識符。 `wx:key` 的值以兩種形式提供 **字符串**,代表在 for 循環的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態改變。 **保留關鍵字 `*this`** 代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字。 當數據改變觸發渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,并且提高列表渲染時的效率。 >[warning] 如不提供 wx:key,會報一個 warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。 >[warning] 當 wx:for 的值為字符串時,會將字符串解析成字符串數組 如: ~~~HTML <view wx:for="array"> {{item}} </view> ~~~ 等同于 ~~~HTML <view wx:for="{{['a','r','r','a','y']}}"> {{item}} </view> ~~~ >[warning] 花括號和引號之間如果有空格,將最終被解析成為字符串 如: ~~~HTML <view wx:for="{{[1,2,3]}} "> {{item}} </view> ~~~ 等同于 ~~~HTML <view wx:for="{{[1,2,3] + ' '}}" > {{item}} </view> ~~~ ##### 3. 條件渲染 * `wx:if` 在框架中,使用 `wx:if="{{condition}}"` 來判斷是否需要渲染該代碼塊: ~~~HTML <view wx:if="{{condition}}"> True </view> ~~~ 也可以用 wx:elif 和 wx:else 來添加一個 else 塊: ~~~HTML <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> ~~~ * `block wx:if` 因為 `wx:if` 是一個控制屬性,需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽,可以使用一個 `<block/>` 標簽將多個組件包裝起來,并在上邊使用 `wx:if` 控制屬性。 ~~~HTML <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> ~~~ >[warning] `<block/>` 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。 `wx:if` vs `hidden` 因為 `wx:if` 之中的模板也可能包含數據綁定,所以當 wx:if 的條件值切換時,框架有一個局部渲染的過程,因為它會確保條件塊在切換時銷毀或重新渲染。 同時 `wx:if` 也是惰性的,如果在初始渲染條件為 false,框架什么也不做,在條件第一次變成真的時候才開始局部渲染。 相比之下,hidden 就簡單的多,組件始終會被渲染,只是簡單的控制顯示與隱藏。 一般來說,wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此, >[warning] 如果需要頻繁切換的情景下,用 hidden 更好,如果在運行時條件不大可能改變則 wx:if 較好。 ##### 4. 模板 WXML提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調用。 * 定義模板 使用 `name` 屬性,作為模板的名字。然后在`<template/>`內定義代碼片段,如: ~~~HTML <!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> ~~~ * 使用模板 使用 `is` 屬性,聲明需要的使用的模板,然后將模板所需要的 data 傳入,如: ~~~HTML <template is="msgItem" data="{{...item}}"/> ~~~ ~~~JavaScript Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) ~~~ `is` 屬性可以使用 Mustache 語法,來動態決定具體需要渲染哪個模板: ~~~HTML <template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block> ~~~ * 模板的作用域 模板擁有自己的作用域,只能使用 data 傳入的數據以及模版定義文件中定義的 `<wxs />` 模塊。 ##### 5. 事件 * **什么是事件** >[info] * 事件是視圖層到邏輯層的通訊方式。 > * 事件可以將用戶的行為反饋到邏輯層進行處理。 > * 事件可以綁定在組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。 > * 事件對象可以攜帶額外信息,如 id, dataset, touches。 * **事件的使用方式** * 在組件中綁定一個事件處理函數。 如`bindtap`,當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。 ~~~HTML <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> ~~~ 在相應的Page定義中寫上相應的事件處理函數,參數是`event`。 ~~~JavaScript Page({ tapName: function(event) { console.log(event) } }) ~~~ 可以看到log出來的信息大致如下: ~~~JavaScript { "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] } ~~~ * **事件分類** 事件分為冒泡事件和非冒泡事件: * 冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。 * 非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。 WXML的冒泡事件列表: | 類型 | 觸發條件 | 最低版本 | | --- | --- | --- | | touchstart | 手指觸摸動作開始| | touchmove | 手指觸摸后移動| | touchcancel | 手指觸摸動作被打斷,如來電提醒,彈窗| | touchend | 手指觸摸動作結束| | tap | 手指觸摸后馬上離開| | longpress | 手指觸摸后,超過350ms再離開,如果指定了事件回調函數并觸發了這個事件,tap事件將不被觸發| 1.5.0 | | longtap | 手指觸摸后,超過350ms再離開(推薦使用longpress事件代替)| | transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發| | animationstart | 會在一個 WXSS animation 動畫開始時觸發| | animationiteration | 會在一個 WXSS animation 一次迭代結束時觸發| | animationend | 會在一個 WXSS animation 動畫完成時觸發| | touchforcechange |在支持 3D Touch 的 iPhone 設備,重按時會觸發| 1.9.90 | >[info] 除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件,如`<form/>`的`submit`事件,`<input/>`的`input`事件,`<scroll-view/>`的`scroll`事件 * 事件綁定和冒泡 事件綁定的寫法同組件的屬性,以 key、value 的形式。 >[info] * `key` 以`bind`或`catch`開頭,然后跟上事件的類型,如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起,bind和catch后可以緊跟一個冒號,其含義不變,如`bind:tap`、`catch:touchstart`。 > * `value` 是一個字符串,需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。 >[warning] `bind`事件綁定不會阻止冒泡事件向上冒泡,`catch`事件綁定可以阻止冒泡事件向上冒泡。 如在下邊這個例子: ~~~HTML <view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view> ~~~ 點擊` inner view` 會先后調用handleTap3和handleTap2(因為tap事件會冒泡到 `middle view`,而 `middle view` 阻止了 tap 事件冒泡,不再向父節點傳遞),點擊 `middle view` 會觸發handleTap2,點擊 `outer view` 會觸發handleTap1。 * 事件的捕獲階段 自基礎庫版本 1.5.0 起,觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前,且在捕獲階段中,事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時,可以采用`capture-bind`、`capture-catch`關鍵字,后者將中斷捕獲階段和取消冒泡階段。 在下面的代碼中,點擊 `inner view` 會先后調用handleTap2、handleTap4、handleTap3、handleTap1。 ~~~HTML <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view> ~~~ 如果將上面代碼中的第一個capture-bind改為capture-catch,將只觸發handleTap2。 ~~~HTML <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2"> outer view <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"> inner view </view> </view> ~~~ * 事件對象 如無特殊說明,當組件觸發事件時,邏輯層綁定該事件的處理函數會收到一個事件對象。 `BaseEvent` 基礎事件對象屬性列表: | 屬性 | 類型 | 說明 | | --- | --- | --- | | type | String | 事件類型 | | timeStamp | Integer | 事件生成時的時間戳 | | target | Object | 觸發事件的組件的一些屬性值集合 | | currentTarget | Object | 當前組件的一些屬性值集合 | `CustomEvent` 自定義事件對象屬性列表(繼承 BaseEvent): | 屬性 | 類型 | 說明 | | --- | --- | --- | | detail | Object | 額外的信息 | `TouchEvent` 觸摸事件對象屬性列表(繼承 BaseEvent): | 屬性 | 類型 | 說明 | | --- | --- | --- | | touches | Array | 觸摸事件,當前停留在屏幕中的觸摸點信息的數組 | | changedTouches | Array | 觸摸事件,當前變化的觸摸點信息的數組 | 特殊事件: `<canvas/>` 中的觸摸事件不可冒泡,所以沒有 currentTarget。 `type`:代表事件的類型。 `timeStamp`:頁面打開到觸發事件所經過的毫秒數。 `target`:觸發事件的源組件。 | 屬性 | 類型 | 說明 | | --- | --- | --- | | id | String | 事件源組件的id | | tagName | String | 當前組件的類型 | | dataset | Object | 事件源組件上由data-開頭的自定義屬性組成的集合 | `currentTarget`:事件綁定的當前組件。 | 屬性 | 類型 | 說明 | | --- | --- | --- | | id | String| 當前組件的id | | tagName | String | 當前組件的類型 | | dataset | Object | 當前組件上由data-開頭的自定義屬性組成的集合 | `dataset`:在組件中可以定義數據,這些數據將會通過事件傳遞給 SERVICE。 書寫方式: 以data-開頭,多個單詞由連字符-鏈接,不能有大寫(大寫會自動轉成小寫)如`data-element-type`,最終在 event.currentTarget.dataset 中會將連字符轉成駝峰`elementType`。 示例: ~~~HTML <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view> ~~~ ~~~JavaScript Page({ bindViewTap:function(event){ event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法 event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫 } }) ~~~ `touches`:touches 是一個數組,每個元素為一個 Touch 對象(canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組)。 表示當前停留在屏幕上的觸摸點。 Touch 對象 | 屬性 | 類型 | 說明 | | --- | --- | --- | | identifier | Number | 觸摸點的標識符| | pageX, pageY | Number | 距離文檔左上角的距離,文檔的左上角為原點 ,橫向為X軸,縱向為Y軸| | clientX, clientY | Number | 距離頁面可顯示區域(屏幕除去導航條)左上角距離,橫向為X軸,縱向為Y軸| CanvasTouch 對象 | 屬性 | 類型 | 說明 | | --- | --- | --- | | identifier | Number | 觸摸點的標識符 | x, y | Number | 距離 Canvas 左上角的距離,Canvas 的左上角為原點 ,橫向為X軸,縱向為Y軸 `changedTouches`:changedTouches 數據格式同 touches。 表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。 `detail`:自定義事件所攜帶的數據,如表單組件的提交事件會攜帶用戶的輸入,媒體的錯誤事件會攜帶錯誤信息,詳見組件定義中各個事件的定義。 點擊事件的`detail `帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。 ##### 6. 引用 WXML 提供兩種文件引用方式`import`和`include`。 * import:可以在該文件中使用目標文件定義的template 如: 在 item.wxml 中定義了一個叫item的template: ~~~HTML <!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> ~~~ 在 index.wxml 中引用了 item.wxml,就可以使用item模板: ~~~HTML <!-- index.wxml --> <import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> ~~~ import 有作用域的概念,即只會 import 目標文件中定義的 template,而不會 import 目標文件 import 的 template。即是只會import本文件中import定義的文件。 如:C import B,B import A,在C中可以使用B定義的template,在B中可以使用A定義的template,但是C不能使用A定義的template。 ~~~HTML <!-- A.wxml --> <template name="A"> <text> A template </text> </template> ~~~ ~~~HTML <!-- B.wxml --> <import src="a.wxml"/> <template name="B"> <text> B template </text> </template> ~~~ ~~~HTML <!-- C.wxml --> <import src="b.wxml"/> <template is="A"/> <!-- Error! Can not use tempalte when not import A. --> <template is="B"/> ~~~ * include include 可以將目標文件除了` <template/>` `<wxs/>` 外的整個代碼引入,相當于是拷貝到 include 位置,如: ~~~HTML <!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> ~~~ ~~~HTML <!-- header.wxml --> <view> header </view> ~~~ ~~~HTML <!-- footer.wxml --> <view> footer </view> ~~~ #### 2.1.2.2 WXS WXS(WeiXin Script)是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。 [【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/) >[info] * wxs 不依賴于運行時的基礎庫版本,可以在所有版本的小程序中運行。 >* wxs 與 javascript 是不同的語言,有自己的語法,并不和 javascript 一致。 >* wxs 的運行環境和其他 javascript 代碼是隔離的,wxs 中不能調用其他 javascript 文件中定義的函數,也不能調用小程序提供的API。 >* wxs 函數不能作為組件的事件回調。 >* 由于運行環境的差異,在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。 WXML+WXS類似HTML+JavaScript,可在WXML中調用WXS里定義的函數進行“頁面渲染”和“數據處理”等。 ##### 1. 頁面渲染 ~~~HTML <!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> ~~~ 頁面輸出:"hello world" ##### 2. 數據處理 ~~~JavaScript // page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } }) ~~~ ~~~HTML <!--wxml--> <!-- 下面的 getMax 函數,接受一個數組,且返回數組中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports.getMax = getMax; </wxs> <!-- 調用 wxs 里面的 getMax 函數,參數為 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view> ~~~ 頁面輸出:5 #### 2.1.2.3 WXSS [【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html) WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式。 WXSS 用來決定 WXML 的組件應該怎么顯示。 為了適應廣大的前端開發者,WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序,WXSS 對 CSS 進行了擴充以及修改。 與 CSS 相比,WXSS 擴展的特性有: ##### 1. 尺寸單位--rpx rpx(responsive pixel): 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 建議: 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準(1rpx = 0.5px, 1px = 2rpx)。 注意: 在較小的屏幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。 ##### 2. 樣式導入 使用`@import`語句可以導入外聯樣式表,`@import`后跟需要導入的外聯樣式表的相對路徑,用`;`表示語句結束。 示例代碼: ~~~CSS /** common.wxss **/ .small-p { padding:5px; } ~~~ ~~~CSS /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } ~~~ ##### 3. 內聯樣式 框架組件上支持使用 style、class 屬性來控制組件的樣式。 `style`:靜態的樣式統一寫到 class 中。style 接收動態的樣式,在運行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。 ~~~HTML <view style="color:{{color}};" /> ~~~ `class`:用于指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上`.`,樣式類名之間用空格分隔。 ~~~HTML <view class="normal_view" /> ~~~ ##### 4. 選擇器 目前支持的選擇器有: | 選擇器 | 樣例 | 樣例描述 | | --- | --- | --- | | .class | `.intro` | 選擇所有擁有 class="intro" 的組件 | | #id | `#firstname ` | 選擇擁有 id="firstname" 的組件| | element | `view` | 選擇所有 view 組件| | element, element | `view, checkbox` | 選擇所有文檔的 view 組件和所有的 checkbox 組件| | ::after | `view::after` | 在 view 組件后邊插入內容| | ::before | `view::before` | 在 view 組件前邊插入內容| ##### 5. 全局樣式與局部樣式 定義在 `app.wxss` 中的樣式為全局樣式,作用于每一個頁面。在 page 的 `wxss` 文件中定義的樣式為局部樣式,只作用在對應的頁面,并會覆蓋 `app.wxss` 中相同的選擇器。 #### 2.1.2.4 組件 框架為開發者提供了一系列基礎組件,開發者可以通過組合這些基礎組件進行快速開發。 [【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/component/index.html) 什么是組件: >[info] * 組件是視圖層的基本組成單元。 > * 組件自帶一些功能與微信風格的樣式。 > * 一個組件通常包括`開始標簽`和`結束標簽`,`屬性`用來修飾這個組件,`內容`在兩個標簽之內。 > * 所有組件與屬性都是小寫,以連字符`-`連接 組件示例: ~~~HTML <tagname property="value"> Content goes here ... </tagname> ~~~ 基礎組件分為以下七大類: ##### 1. 視圖容器(View Container) | 組件名 | 說明 | | --- | --- | | view | 視圖容器 | | scroll-view | 可滾動視圖容器 | | swiper | 滑塊視圖容器 | ##### 2. 基礎內容(Basic Content) | 組件名 | 說明 | | --- | --- | | icon | 圖標 | | text | 文字 | | progress | 進度條 | ##### 3. 表單(Form) | 組件名 | 說明 | | --- | --- | | button | 按鈕 | | form | 表單 | | input | 輸入框 | | checkbox | 多項選擇器 | | radio | 單項選擇器 | | picker | 列表選擇器 | | picker-view | 內嵌列表選擇器 | | slider| 滾動選擇器 | | switch | 開關選擇器 | | label | 標簽 | ##### 4. 導航(Navigation) | 組件名 | 說明 | | --- | --- | | navigator | 應用鏈接 | ##### 5. 多媒體(Media) | 組件名 | 說明 | | --- | --- | | audio | 音頻 | | image | 圖片| | video | 視頻 | ##### 6. 地圖(Map) | 組件名 | 說明 | | --- | --- | | map | 地圖 | ##### 7. 畫布(Canvas) | 組件名 | 說明 | | --- | --- | | canvas | 畫布|
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看