2. 程式人生 > >微信小程式 常用元件

微信小程式 常用元件

阿新 • • 發佈：2019-01-05

這裡介紹一點值得記錄的例子，最後寫一個稍複雜的介面總結

tabBar（導航欄）

程式碼：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar
 
": {
    "color": "#000000",
    "selectedColor": "red",
    "backgroundColor": "yellow",
    "borderStyle": "black",
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/icon1.png",
        "selectedIconPath": "images/icon1s.png"
 

      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "images/icon2.png",
        "selectedIconPath": "images/icon2s.png"
      }
    ]
  }
}

顯示及目錄結構如下（色調比較醜，能分析問題要緊…哈哈我就是懶）
這裡寫圖片描述
tabBar屬性：

  • color：tab 上的文字預設顏色
  • selectedColor：tab 上的文字選中時的顏色
  • backgroundColor：tab 的背景色
  • borderStyle：tabbar上邊框的顏色， 僅支援 black/white
  • list：tab 的列表
  • position：導航欄的位置

list屬性

  • pagePath：頁面路徑，必須在 pages 中先定義
  • text：tab 上按鈕文字
  • iconPath：預設圖片路徑
  • selectedIconPath：選中時的圖片路徑

注意：

  • tabBar需要在app.json裡配置
  • tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按陣列的順序排序
  • 細心的同學發現沒有，我們配置的圖示並沒有顯示出來？是因為position屬性只有為bottom時才顯示圖示，寫寫試試吧
  • list裡必須包含啟動頁（即app.json的pages節點下的一個元素），tabBar的設定才有效

textview限制文字顯示多行，多餘的用…代替

-webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：

  • display: -webkit-box：必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
  • -webkit-box-orient： 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
  • text-overflow：可以用來多行文字的情況下，用省略號“…”隱藏超出範圍的文字 。
  • -webkit-line-clamp： number用於顯示的行數
  • -webkit-box-orient 預設是水平的，當值設為vertical時為垂直排列
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

swiper (輪播圖)

wxml中：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style='width: 100%'>
  <swiper-item wx:for="{{imgUrls}}" wx:for-item="imgItem">
    <image src='{{imgItem}}' class="slide-image" width="355" height="150" />
  </swiper-item>
</swiper>

.js中

data: {
    text: null,
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ]
  }
  ...

看下效果：
這裡寫圖片描述
上面用到了wx:for即列表渲染，在元件上使用 wx:for 控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。
預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item。

  • 使用 wx:for-item 可以指定陣列當前元素的變數名
  • 使用 wx:for-index 可以指定陣列當前下標的變數名

如上我們改變預設下表變數名item->imgItem
我們繫結的陣列可以在對應的.js中data下設定，即可將檢視和資料繫結。
是時候來介紹下swiper的常用屬性了，當然還有其他的屬性，敬請查閱官方文件
常用屬性

  • indicator-dots Boolean 是否顯示面板指示點
  • autoplay Boolean 是否自動切換
  • interval Number 自動切換時間間隔
  • duration Number 滑動動畫時長

form （表單）

wxml：表單裡有輸入框、滑動選擇器、開關和提交表單重置表單按鈕

<form bindsubmit='formSubmit' bindreset='formReset'>
  <input name='input' placeholder='請輸入內容'>{{inputText}}</input>
  <slider name='slider' value='{{sliderValue}}'></slider>
  <switch name='switch' checked='{{isChecked}}'></switch>
  <button form-type='submit'>提交表單</button>
  <button form-type='reset'>重置表單</button>
</form>

form的兩個屬性：

  • bindsubmit 表單提交時會攜帶 form 中的資料觸發其繫結的函式
  • bindreset 表單重置時會觸發 reset 事件
    提交表單時，需要在表單元件中加上 name 來作為 key
    .js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    inputText: '',
    sliderValue: 0,
    isChecked: false,
  },
  //表單提交
  formSubmit: function (event) {
    //列印日誌
    console.log(event)
  },
  //表單重置
  formReset: function (event) {
    console.log(event)
  }
})

輸入一些內容，並改變slider和開關的狀態，提交表單看列印的日誌如下
這裡寫圖片描述
可以看到input,slider,switch是元件的name屬性，被當做key提交
點選reset，可以看到表單中的元件狀態被重置
這裡寫圖片描述

ActionSheet（底部彈出框）

先學習下bindtap屬性，就是點選事件，當元件被點選時，會觸發繫結的函式。
wxml：
簡單介紹下：點選按鈕時，action-sheet即底部彈出框顯示，其中的action-sheet-item為彈出框的條目，最後一個條目為action-sheet-cancel，顧名思義，此條目用於取消操作，其外觀會和其它條目不同，會觸發action-sheet的bindchange事件（點選彈出框外面空白地方也會觸發bindchange事件），點選每一個條目（包括取消）時，將action-sheet隱藏。

<button bindtap='showActionSheet'>showActionSheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <action-sheet-item bindtap="actionSheetItem" data-name="name1" data-value='我是第1條資料'>item1</action-sheet-item>
  <action-sheet-item bindtap="actionSheetItem" data-name="name2" data-value='我是第2條資料'>item2</action-sheet-item>
  <action-sheet-item bindtap="actionSheetItem" data-name="name3" data-value='我是第3條資料'>item3</action-sheet-item>
  <action-sheet-cancel bindtap="actionSheetItem" data-name="cancel" data-value='我是取消'>取消</action-sheet-cancel>
</action-sheet>

.js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    actionSheetHidden: true,

  },
  //顯示action-sheet
  showActionSheet: function () {
    this.setData({ actionSheetHidden: false })
  },
  //點選取消
  actionSheetChange: function () {
    console.log("actionSheetChange")
    this.setData({ actionSheetHidden: true })
  },
  //條目點選事件
  actionSheetItem: function (event) {
    console.log(event)
    this.setData({ actionSheetHidden: true })
  }
})

先點選按鈕，讓action-sheet顯示
這裡寫圖片描述
點選item1，會觸發actionSheetItem函式，看下actionSheetItem函式中列印的日誌：

這裡寫圖片描述
可以看到條目1中攜帶的資料name和value傳到了actionSheetItem的引數中，真實案例中就可以拿到被點選條目的資料，進行下一步的操作了
回到上一步，再看看點選取消會有什麼不同吧
這裡寫圖片描述
注意看，我們先打印出actionSheetChange日誌，可以得出，當點選取消時，先被觸發的時action-sheet的bindchange函式，然後才執行的取消條目的bindtap函式，同時可以也可以拿到取消條目所傳遞的資料，但取消一般是不怎麼需要的。

modal：（對話方塊）

wxml：
點選按鈕顯示對話方塊，點選確認按鈕或取消按鈕隱藏對話方塊

<button bindtap='modalShow'>modalShow</button>
<modal title='我是標題' confirm-text='確認' cancle-text='取消' hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">我是內容</modal>

.js

Page({
  /**
 * 頁面的初始資料
   */
  data: {
    modalHidden: true,

  },
  modalShow: function () {
    this.setData({ modalHidden: false })
  },
  modalConfirm: function () {
    this.setData({ modalHidden: true })
  },
  modalCancel: function () {
    this.setData({ modalHidden: true })
  }
})

看下顯示結果吧：
這裡寫圖片描述
很簡單，還是先介紹下屬性吧

  • title 標題
  • confirm-text 確認按鈕上的字
  • cancle-text 取消按鈕上的字
  • bindconfirm 點選確認時觸發的事件
  • bindcancel 點選取消時觸發的事件

toast（吐司）

wxml：
點選按鈕顯示吐司，本例中吐司的持續時間為2秒，2秒後會觸發bindchange函式，手動隱藏toast（其中的duration為吐司的持續時間）

<button bindtap='toastShow'>toastShow</button>
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="2000">我是吐司</toast>

.js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    toastHidden: true,

  },
  //點選按鈕
  toastShow: function () {
    this.setData({ toastHidden: false })
  },
  //吐司的持續時間到了自動觸發
  toastChange: function () {
    this.setData({ toastHidden: true })
  }
})

看下效果吧，屬性就不再介紹咯
這裡寫圖片描述

loading（載入框）

wxml：
點選按鈕顯示載入框，模擬資料請求，兩秒後隱藏載入框（不同於toast，沒有duration屬性）

<button bindtap='loadingShow'>loadingShow</button>
<loading hidden="{{loadingHidden}}">載入中...</loading>

.js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    loadingHidden: true,
  },
  loadingShow: function () {
    this.setData({ loadingHidden: false })
    var that = this
    setTimeout(function () {
      that.setData({
        loadingHidden: true
      })
    }, 2000)
  }
})

其實目前的微信公眾平臺元件列表已經沒有上述的四個元件了，我們可以呼叫微信的api來使用以上四個操作反饋元件，就不多分析了，直接上程式碼吧。
wxml：

<button bindtap="showToast">showToast</button>
<button bindtap="showLoading">showLoading</button>
<button bindtap='showModal'>showModal</button>
<button bindtap='showActionSheet'>showActionSheet</button>

.js

Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },
  //展示吐司
  showToast: function () {
    wx.showToast({
      title: '我是吐司',
      duration: 2000,
      icon: "loading"
    })
  },
  //展示等待框，請求資料完成後需要手動呼叫wx.hideLoading()隱藏
  showLoading: function () {
    wx.showLoading({
      title: '我是loading',
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 2000);
  },
  //展示對話方塊
  showModal: function () {
    wx.showModal({
      title: '提示',
      content: '這是一個對話方塊',
      success: function (res) {
        if (res.confirm) {
          console.log('使用者點選確定')
        } else if (res.cancel) {
          console.log('使用者點選取消')
        }
      }
    })
  },
  //顯示操作選單
  showActionSheet: function () {
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      //使用者點選的按鈕，從上到下的順序，從0開始
      success: function (res) {
        console.log("success" + res.tapIndex)
      },
      //點選取消會走fail
      fail: function (res) {
        console.log("fail" + res.errMsg)
      }
    })
  }
})

實現gridview效果

實現思路：

  • 定義父容器佈局方式為flex，主軸方向為由左往右，flex-wrap為wrap，當條目顯示不下時，就會換行顯示從而實現gridview效果
  • 我是案例背景框居於條目底部，採用絕對定位的方式（絕對定位的元素時相對離它最近的一個已定位的父級元素進行定位），那我們需要讓它的父佈局即條目view 已定位（條目view的position:relative），然後給bottom為0就好了

其它的就沒什麼了，程式碼如下：
效果：
這裡寫圖片描述

wxml：

<view class='case'>

  <view class='case-head'>
    <view class='case-head-line'></view>
    <text class='case-head-point'>·</text>
    <text class='case-head-text'>案例</text>
    <text class='case-head-point'>·</text>
    <view class='case-head-line'></view>
  </view>

  <view class='case-list'>
    <view class='case-item' wx:for="{{caseList}}">
      <image class='case-item-image'>
      </image>
      <view class='case-item-bottom'>
        <text class='case-item-text'>我是案例</text>
      </view>
    </view>
  </view>

</view>

wxss：

/*頁面  */

.case {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/*案例 頭部父佈局  */

.case-head {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  font-size: 10;
}

/*案例 頭部線  */

.case-head-line {
  width: 260rpx;
  height: 3rpx;
  background-color: #3791ca;
}

/*案例 頭部點  */

.case-head-point {
  font-size: 30pt;
  color: #3791ca;
}

/*案例 頭部文字  */

.case-head-text {
  font-size: 11pt;
  color: #3791ca;
}

/*案例 列表  */

.case-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

/*案例 列表條目  */

.case-item {
  width: 350rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: red;
  display: flex;
  position: relative;
  flex-direction: column;
}

/*案例 列表條目中圖片  */

.case-item-image {
  width: 350rpx;
  height: 200rpx;
}

/*案例 列表條目底部佈局  */

.case-item-bottom {
  width: 100%;
  height: 50rpx;
  background-color: #636363;
  position: absolute;
  bottom: 0;
  display: flex;
  opacity: 0.9;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*案例 列表條目中文字  */

.case-item-text {
  font-size: 9pt;
  color: white;
}

.js：

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    caseList: ["", "", "", "", "", "", "", "", "", "", "", "", "", ""]
  },

})

綜合專案

需求：
開啟小程式顯示首頁，點選個人中心判斷appData中是否有個人資訊，若有則展示，若無則跳轉到登入頁面，登入頁面加相關邏輯判斷，輸入使用者名稱密碼成功後（本例不為空即為成功）儲存使用者資訊到appData中，跳轉到個人中心介面。

原始碼點我

貼幾張專案的效果圖：
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述

相關推薦

微信小程式 常用元件

這裡介紹一點值得記錄的例子，最後寫一個稍複雜的介面總結 tabBar（導航欄） 程式碼： { "pages": [ "pages/index/index", "pages/logs/logs" ], "window"

微信小程式 基礎元件

基礎元件 框架為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。 什麼是元件： 元件是檢視層的基本組成單元。 元件自帶一些功能與微信風格的樣式。 一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。<tagname

微信小程式——父子元件傳參以及方法的呼叫

父元件向子元件傳參 A元件為父元件，B元件為子元件，以下是A元件向B元件傳參 在A元件中引入B元件（父元件引入子元件） 在A元件的json中寫入（父元件）： { "component": true, "usingComponents": { "com

微信小程式 picker元件運用物件陣列

官方文件 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html wxml： <view class='input-box flexac'> <text>積分抵扣

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫 文件 https://phonycode.github.io/wuss-weapp 掃碼體驗 使用微信掃一掃體驗小程式元件示例 演示圖片 快速上手 在開始使用 Wuss We

微信小程式——switch元件設定大小

附上switch元件的文件地址 https://developers.weixin.qq.com/miniprogram/dev/component/switch.html 如上圖，官方文件沒有給出如何修改switch元件大小的值，只給出修改顏色的值，接下來就讓我們來解決修改

微信小程式textarea元件

textarea 多行輸入框。該元件是原生元件，使用時請注意相關限制。 屬性名 型別 預設值 說明 最低版本 value String   輸入框

微信小程式picker元件

picker 從底部彈起的滾動選擇器，現支援五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，預設是普通選擇器。 普通選擇器：mode = selector 屬性名 型別 預設值

【微信小程式】元件之頁面佈局

小程式的flex佈局 小程式建議使用flex佈局進行排版 flex就是一個盒裝彈性佈局 flex是一個容器，所有子元素都是它的成員。 定義佈局：display：flex flex 容器的屬性： 1、屬性flex-direction: 排列方向。有下面

5個最優秀的微信小程式UI元件庫

開發微信小程式的過程中，選擇一款好用的元件庫，可以達到事半功倍的效果。自從微信小程式面世以來，不斷有一些開源元件庫出來，下面5款就是排名比較靠前，使用者使用量與關注度比較高的小程式UI元件庫。還沒用到它們的你，可以關注和了解一下哦！ WeUI WXSS WeUI WXSS是騰訊官方UI元件庫

用微信開發者工具--開啟微信小程式weui元件示例

瀏覽器搜尋 ：https://github.com/Tencent/weui-wxss/ 1.下載為小程式設計的weui元件， 2.在開發者工具中開啟dist目錄，而不是整個目錄, 在開發者工具中就可以預覽weui元件的示例了。   如果想在自己專案中引用weui元件，需要

微信小程式內容元件圖示 icon，打勾

    <view class="group">       <block wx:for="{{iconSize}}">         <icon type="success"

微信小程式（元件的業務）slot 的使用

1.呼叫元件向自定義元件插入內容，使用  slot 在自定義模板中有一對<view><slot></slot></view>,這裡是幹什麼用的呢？在元件模板中可以提供一個 <slot> 節點，用於承載元件引用時提供的子節點。

微信小程式（元件中的使用）observer函式的應用

小程式observer函式的應用   需求是這樣的 就是構建月份的元件中，月份小於10月的時候 顯示的數字都是一個位數，需要轉換成兩位數， 比如8月份是8 ，那就要轉換為08 ，同理可得 其他低於十月份的月份也是要這樣做： 開啟元件的js檔案 接下來看下程式碼： p

微信小程式map元件bindmarkertap事件點選無效

今天做小程式遇到了map元件上任何事件都不起作用，無法執行函式。 貼出可能解決的辦法： 1、<map> 元件需要設定ID，雖然小程式map元件不是強制要填，但不填可能會有一些問題 2、marker 一定要有id，這個id一定是有效的，不能為空。這個是最重要的 3、設一下marker的層

微信小程式使用元件實現移動端軟鍵盤

效果圖如上，這是一個簡單的 新增牌照的功能，因為鍵盤內容需要自己定義，就自己製作了一個響應的軟鍵盤， 有中文鍵盤和 字母數字鍵盤。點選ABC按鍵可以切換，刪除按鍵可以刪除輸入的內容， 新能源車牌和普通車牌也可以切換。 demo使用了微信小程式的自定義元件，相似的功能也可以拿過去改一

微信小程式的元件用法與傳統HTML5標籤的區別

小程式與傳統HTML5的區別 小程式剛開放公測，網際網路圈內開始了各種解讀和猜測。其中有觀點認為小程式和HTML5有著緊密關聯，甚至小程式就是基於HTML5開發。 經過仔細研究文件和程式碼開發，從檢視層的角度來說，小程式與傳統HTML5還是有明顯的區別，主要區別在於：

微信小程式：元件實踐

前階段有網友問了一個關於小程式元件的問題： 有一個列表，我點選編輯，出現一個彈窗修改元件，輸入修改數值點選確定，對應的列表項的值就被更改過來，點選取消，不做任何操作。 據說能獲取到文字框的值，可是列表值一直更改不了。我就抽空寫了個demo發現並未出現

微信小程式 image元件的mode屬性 以及 圖片出現橫向滾動軸

微信在3月27釋出新增的六大能力中開放申請個人開發者啦！！因為公司也要做小程式，現在趁著專案在客戶那邊還沒確定，於是自己搞了一個pixiv（也就是P站）的app（這個app名字就叫做pixiv）轉成微

[外掛/工具]微信小程式實用元件：帶字母滑動的listview

http://www.wxapp-union.com/thread-2159-1-1.html 這是一個帶字母可滑動的列表小程式。 電腦上的截圖 如何使用 複製page下的資料夾到自己專案中 配置app