零基礎學習微信小程序（7）:組件

view標籤

text標籤相當於html裏的span標籤，是行內元素，寫入時，不會進行換行

text標籤

view標籤相當於html裏的div標籤，是塊級元素，寫入時，會導致換行
text標籤只能嵌套text，只有該標籤纔有長按文字複製的功能

<!--pages/demo03/demo03.wxml-->
<!--長按文字複製-->
<text selectable>1</text>
<!--是否解碼-->
<text decode>2&nbsp;2</text>
<view>3</view>

image

由於小程序使用的使用對於圖片的大小是有要求的，圖片不能過大，所以最好使用的圖片是外網的圖片。
其實在csdn上上傳的圖片不是直接放置圖片到博客裏的，而是用戶在博客裏複製自己的圖片時，圖片也被上傳到了網上。此時放入圖片的連接，就可以顯示這個圖片。例如上面的圖在markdown裏的顯示是醬嬸的：

感興趣的小夥伴可以使以下點擊此處
就可以出現上面那種圖。
所以打算在小程序裏插入圖片話，需要先講圖片上傳到網站上。
注意點：
圖片存在默認的寬高：320*240
mode決定圖片的寬高適配情況，可以參考開發文檔進行使用。

小程序中的圖片支持懶加載，lazy-load.
意思就是會判斷圖片出現在屏幕的時候會自動的加載出來

swiper：

是小程序內置的輪播圖效果
輪播圖外層容器爲swiper，存在默認樣式,width=100%，height=150px。同時image存在默認寬度和高度 320*240.。
這時候的顯示效果觀賞性不強，所以這時候需要進行一定的調整。
這時候可以根據公式：
swiper width/swiper height=image width/image height
每一個輪播項是swiper-item，swiper-item的默認寬度和高度都是100%
製作輪播圖的第一步是先在swiper裏插入圖片，此時要注意圖片的大小和swiper的大小需要進行調整
第二步是爲swiper修改屬性值。

/* pages/demo08/demo08.wxss */
swiper{
    width: 100%;
    height: calc(100vw*352/1125);
}
image{
    width: 100%;
}

<swiper autoplay circular interval="4000" indicator-dots>
    <swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/153/O1CN01fM1GmB1D07CNrVw4f_!!153-0-luban.jpg"/></swiper-item>
    <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/127/O1CN01Rr0Esl1CoCtvDoqbg_!!127-0-lubanu.jpg"/></swiper-item>
    <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/18/O1CN01wD46EF1C0HjFmU5ZU_!!18-0-lubanu.jpg"/></swiper-item>
</swiper>
  

navigator：

導航組件 類似於超鏈接標籤
navigator是一個塊級元素，加入的時候是會換行的
target是表示要跳轉到當前的小程序，還是其他的小程序頁面，默認值是self即自己的小程序，miniProgram是其他的小程序頁面
url表示要跳轉的頁面路徑

<!--pages/demo09/demo09.wxml-->
<navigator url="/pages/demo08/demo08" open-type="navigate">navigate</navigator>
<navigator url="/pages/demo08/demo08" open-type="redirect">redirect</navigator>
<navigator url="/pages/index/index" open-type="switchTab">swithchTab</navigator>
<navigator url="/pages/demo08/demo08" open-type="relaunch">relaunch</navigator>

效果：

rich-text：

可以講字符串解析爲對應的標籤，類似於v-html功能

button：

contact功能的使用需要微信小程序的後臺配置，需要通過真機調試
share功能可以將小程序分享給微信朋友和微信羣裏，但是不能但是不能分享到微信朋友圈裏
getPhoneNumber功能需要結合一個事件（bindgetphonenumber）來使用，不是企業的小程序賬號，沒有權限來獲取用戶的手機號碼。在事件的回調函數中，通過參數來獲取信息，此時獲取到的信息是已經加密過的
getUserInfo功能可以獲取用戶的個人信息，使用方法相當於獲取用戶的手機號方法，不存在加密字段
launchApp功能在小程序中直接打開app，需要通過app的某個鏈接打開app
openSetting功能打開小程序的內置授權頁面，而且授權頁面中只會出現用戶曾經點擊過的權限
feedback功能是意見反饋，需要通過真機調試

<text>pages/demo10/demo10.wxml</text>
<button>默認按鈕</button>
<button size="mini">默認按鈕</button>
<button type="primary">primary按鈕</button>
<button type="primary" plain>plain按鈕</button>
<button type="primary" disabled>disabled按鈕</button>
<button type="primary" loading>loading按鈕</button>

icon圖標：

radio單選框：

需要搭配radio-group來使用，才能實現單選的功能

// pages/demo10/demo10.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    gender:""
  },
  handleChange(e){
    console.log(e);
    this.setData({
      gender:e.detail.value
    })
  }

})

<!--pages/demo10/demo10.wxml-->
<radio-group bindchange="handleChange">
    <radio value="male">male</radio>
    <radio value="female">female</radio>
</radio-group>
<view>
 {{gender}}   
</view>

checkbox複選框：

與radio的是相似的，需要搭配checkbox-group使用。

// pages/demo10/demo10.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    fruit:[],
    list:[
      {
        id:0,
        name:"apple",
        value:"apple"
      },
      {
        id:1,
        name:"grape",
        value:"grape"
      },{
        id:2,
        name:"banana",
        value:"banana"
      }
    ]
  },
  handleChange(e){
    console.log(e);
    this.setData({
      fruit:e.detail.value
    })
  }

})

<!--pages/demo10/demo10.wxml-->
<checkbox-group bindchange="handleChange">
    <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">
    {{item.name}}
    </checkbox>
</checkbox-group>
  <view>
      {{fruit}}
  </view>

文章內容爲視頻零基礎玩轉微信小程序【黑馬程序員】知識點整合