微信小程序(五)-常見組件(標簽)

本文轉載自查看原文 2021-01-12 14:24 411

常見組件(標簽)

https://developers.weixin.qq.com/miniprogram/dev/component/

1.view 代替以前的div標簽

2.text

　　1.文本標簽,類似span標簽

　　2.只能㠌套自已text

　　3.長按文字可以復制(只有該標簽有這個功能) <text selectable>加了就可以復制了<text/>

　　4.可以對空格回車進行編碼<text decode>加了空格就可以顯示了<text/>,decode可以解析的有   < > & ' &ensp; &emsp;

屬性	類型	默認值	必填	說明	最低版本
selectable	boolean	false	否	文本是否可選 (已廢棄)	1.1.0
user-select	boolean	false	否	文本是否可選，該屬性會使文本節點顯示為 inline-block	2.12.1
space	string		否	顯示連續空格	1.4.0
decode	boolean	false	否	是否解碼	1.4.0

3.image

圖片圖床:就是一個在網絡上存儲圖片的地方

路過圖床:https://imgchr.com/

SM.MS圖床:https://sm.ms/

如果打算長期穩定使用請優先選擇七牛雲或者又拍雲（存儲在國內都需要有已備案域名），其次推薦的就是路過圖床和SM.MS圖床.

　　1.src 圖片用外網地址

　　2.圖片大小默認寬320px*高240px

　　3.mode 圖片裁剪、縮放的模式,決定圖片內容和圖片標簽寬高做適配

　　4.lazy-load 圖片懶加載，在即將進入一定范圍（上下三屏）時才開始加載

<image mode="heightFix" src="https://s3.ax1x.com/2021/01/12/sJ64Wd.jpg"/>

4.輪播圖

　　1.swiper 輪播圖的外層容器

1.默認寬width100% 高height=150px

2.無法實現由圖片內容撐開,需換算圖片的高度

　　 3.autoplay 自動輪播

　　 4.interval="1000" 輪播間隔時間

　　 5.circular 輪播銜接滑動

　　 6.indicator-dots 是否顯示面板指示點(索引器/分頁器/指示器)

　　 7.indicator-active-color="red" 顯示指圓點選中的顏色

　　 8.indicator-color="#0094ff" 顯示指圓點未選的顏色

　　2.swiper-item 輪播圖的輪播項

<swiper autoplay  circular interval="1000" indicator-dots indicator-active-color="red" indicator-color="#0094ff">
  <swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
  <swiper-item><image src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/></swiper-item>
  <swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
</swiper>

wxml

5.navigator

　　1.導航標簽相當於a標簽

　　2.url 跳轉路徑(相對路徑或絕對路徑)

　　3.open-type="switchTab" 跳轉方式

open-type 的合法值

值	說明	最低版本
navigate	對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能,默認值,保留當前頁面(有返回按鈕),跳轉到應用內的某個頁面,不能跳到 tabbar 頁面
redirect	對應 wx.redirectTo 的功能,關閉當前頁面(無返回按鈕),跳轉到應用內的某個頁面,不能跳到 tabbar 頁面
switchTab	對應 wx.switchTab 的功能,跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
reLaunch	對應 wx.reLaunch 的功能,關閉所有頁面，打開到應用內的某個頁面,隨便哪個頁面都可跳(包括tabBar )	1.1.0
navigateBack	對應 wx.navigateBack 的功能,關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。	1.1.0
exit	退出小程序，`target="miniProgram"`時生效	2.1.0

6.rich-text

　　1.富文本標簽,相當於vue中的v-html

　　2.nodes屬性來實現

　　 1.接收標簽字符串(常用)<rich-text nodes="<h1>小區平台<h1>"></rich-text>

　　 2.接收對象數組

7.button

　　 1.按鈕標簽外觀屬性size type

　　2.開發能力屬性 open-type

　　　1.contact 客戶開發流程

　　　　1.要將測試號appid改為自已的appid

　　　　 2.去官網注冊獲取自已的appid(如果微信綁字用了自已的郵箱,可以先到微信設置/賬號與安全/更多安全設置/郵件地址下解除綁定)

　　　　 3.登錄進入開發/開發管理/開發設置/復制開發者appID

　　　　 4.修改微信小程序開發編輯器中的appid (這個要保密)

　　　　 5.在小程序后台的功能找到客服===>添加一個客戶的微信號(自已用的就可以了)　　

　　　2.share 轉發

　　 3.getPhoneNumber 獲取用戶手機號

　　 4.getUserInfo 獲取用戶信息

　　 5.feedback 打開“意見反饋”頁面

8.icon

　　1.字體圖標

　　2.屬性

屬性	類型	默認值	必填	說明	最低版本
type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的顏色，同css的color	1.0.0

9.單選框標簽使用　　

　 1.radio 單選框

　 2.radio-group 單項選擇器

　 3.兩個標簽配合使用

　 4.案例: 單選框男和女

　　 1.radio標簽與父元素單項選擇器radio-group來使用

　　 2.value選中的單選框的值

　　 3.給單項選擇器radio-group綁定change事件(關鍵字: bindchange="事件名稱")

　　 4.需要在頁面中顯不選中的值

　　 5.代碼:

<radio-group bindchange="handlechange">
  <radio color="red" value="m">男</radio>
  <radio value="f">女</radio>
</radio-group>
<view>顯示選中的值:{{gender}}</view>

wxml

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    gender:""
  },
  handlechange(e){
    // 1.獲取單選框中的值
    let gender=e.detail.value
    // 2.把值賦給data中的gender
    this.setData({
      gender
    })
  }
})

10.單選框標簽使用　　

　 1.checkbox 多選框

　 2.checkbox-group 多項選擇器

　 3.兩個標簽配合使用

　 4.案例代碼:

<view>
  <checkbox-group bindchange="handitemchange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
  </checkbox-group>
</view>
<view>選中的值:{{checkedlist}}</view>

wxml

Page({
  data: {
    list:[
    {
      id:0,
      name:"蘋課",
      value:"apple"
    },
    {
      id:1,
      name:"香蕉",
      value:"bananer"
    },
    {
      id:2,
      name:"葡萄",
      value:"grage"
    }
  ],
  // 3.定義一個數組存放選中的值
  checkedlist:[]
  },
  // 多選櫃的選中事件
  handitemchange(e){
  // 1.獲取選中的值
  const checkedlist=e.detail.value
  // 2.進行賦值
  this.setData({
    checkedlist
  })
  }
})