小程序中的常用組件，及組件的共同屬性、wxcss、weui-wxss、Mustache語法、邏輯判斷wx:if、wx:elif、wx:else

組件文檔連接：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

小程序中有很多組件，我們只介紹個別組件，小程序文檔比較完善，邊用邊查完全可以，但是我們需要知道有組件這個東西的存在，

<text></text>相當於html中得span標簽，是行內元素，默認里面的文本不會換行，加上\n可以讓換行，text中的內容長按默認不會被選中，加上 selecttable="{{true}}"

可以讓text中的文本長按會選中

<text selectable="{{true}}">長按會選中</text>

<text selectable>長按會選中</text>

<text space='nbsp'>空格大小\n</text>
<text space='ensp'>空格大小\n</text>
<text space='nmsp'>空格大小\n</text>

<text>不解碼    5  &gt;  3</text>
<text decode>解碼    5  &gt;  3</text>

 

 text的space屬性決定 text中文本空格的大小

 button組件

屬性比較多久不一一演示了，直接截圖個文檔，用的時候直接查文檔就行

 

 還有好多屬性，用到的時候可以查看

button常用的屬性有size、type、plain（鏤空效果）、disabled、loading、hover-class

open-type 可以獲取用戶一些特殊權限，可以綁定一些特殊事件，比如說獲取用戶信息

 view組件，塊級元素，相當於html的div

常見屬性：hover-class、

 

 image組件

image組件可以寫成單標簽也可以寫成雙標簽

image標簽默認有自己的大小：320x240

行內塊元素

src指定圖片地址

 

可以給按鈕加一個點擊事件，從系統相冊中選擇圖片

這個事件調用系統api

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作為img標簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
})

bindload屬性：監聽圖片加載完成

 

 lazy-load：圖片懶加載

show-menu-by-longpress：長按圖片識別小程序碼，目前不是二維碼，2.7版本開始支持

mode：圖片裁剪、縮放方式（默認是填充image組件） 常用widthFix：寬度不變高度自適應

input組件

原生組件

可以是單標簽也可以是雙標簽

value：是input的默認值

 

 type：決定鍵盤的類型（英文字母+字符、數字、身份證號）

password：密碼

placeholder：占位符

綁定事件：bindinput，bindfocus、bindblur等等

 

scroll-view組件

 用來做局部滾動效果

將scroll-view中的塊元素改變成行內元素 display：inline-block;

將scroll-view設置成write-space:nowrap;//使元素不換行

<scroll-view scroll-x>
元素  元素......橫向滾動
</scroll-view>

<scroll-view scroll-y>
元素  元素......縱向滾動
</scroll-view>

綁定事件：

bindscroll="監聽滾動"    

handleScroll(event){
    
    console.log(event)
}

當然還有好多其它屬性，用的時候，查看文檔即可

 組件的共同屬性：

 

 wx:if和hidden的區別和vue中的v-show和v-if的區別是一樣的

bindtap和catchtap的區別

小程序中的wxss

小程序中支持的選擇器：

 

 權重同css一樣的

 小程序中wxss對單位的擴展

 

 1rpx=屏幕寬度的1/750

樣式導入，可以將wxss文件導入到想用的wxss文件中

@import  '相對路徑/絕對路徑';

 

 官方給我們提供了weUI庫，寫了一些樣式，可以減少開發量

github地址：https://github.com/Tencent/weui-wxss

我門可以下載下來，在微信開發者工具中導入，看看所有的ui組件，如果想單獨使用某個組件，可以找到對應的組件的wxml和js和wxss文件復制進項目就行

Mustache語法

 

 邏輯判斷：

 

 

 

 

 

 如果顯示隱藏切換頻率非常高用hidden、如果不需要渲染組件用wx:if

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.