2. 程式人生 > >1、微信小程式學習：基本控制元件的使用

1、微信小程式學習：基本控制元件的使用

阿新 • • 發佈：2019-02-08

最近公司app客戶端沒有新的需求了，接下來的工作任務是學習微信小程式的開發，先從最基本的控制元件開始學習。

一、檢視容器

1、view的使用

wxml檔案中的程式碼：

//建立一個view，class='style'是引用wxss檔案中的樣式

<view class='style'>Hello World</view>

wxss檔案中的程式碼：

/**view的樣式佈局
 * background-color:背景顏色
 * text-align:文字對齊方式
 * color:文字的顏色
 * font-size:文字字型大小
 * width:控制元件的寬度
 * height:控制元件的高度
*/
 

.style {
  background-color:#0000ff;
  text-align: center;
  color: #ff0000;
  font-size: 20px;
  width: 200px;
  height: 100px;
}

2、scroll-view的使用

wxml檔案中的程式碼：

//建立一個scroll-view，class='style'是引用wxss檔案中的樣式

<scroll-view class='style'>scroll-view</scroll-view>

wxss檔案中的程式碼：

/**scroll-view的樣式佈局
 * background-color:背景顏色
 * text-align:文字對齊方式
 * color:文字的顏色
 * font-size:文字字型大小
 * height:控制元件的高度
*/
 

.style {
  background-color:#0000ff;
  text-align: center;
  color: #ff0000;
  font-size: 20px;
  height:500px;
}

3、swiper(滑塊檢視容器)的使用

wxml檔案中的程式碼：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}"
 
>
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

js檔案中的程式碼：

Page({
  data: {
    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'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500
  }
})

這裡寫圖片描述

二、基礎內容

1、icon的使用

wxml檔案中的程式碼：

<icon type='success' size='40' color='red'></icon>

系統提供了一些常用的圖示，我們可以自己設定圖示的顏色和尺寸，也可以設定圖示的型別，可選型別有以下幾種：

'success', 
'success_no_circle', 
'info', 
'warn', 
'waiting', 
'cancel', 
'download', 
'search', 
'clear'

這裡寫圖片描述

2、text的使用

wxml檔案中的程式碼：

<text>text</text>

3、rich-text(富文字)的使用

wxml檔案中的程式碼：

<rich-text>tich-text</rich-text>

3、progress(進度條)的使用

wxml檔案中的程式碼：

/**
*percent:百分比
*show-info:在進度條右側顯示百分比
*active:進度條從左往右的動畫
*/
<progress percent="20" show-info active />

二、表單元件

1、button的使用

(1)建立按鈕

/** wxss **/
//button預設的型別是default，系統還提供了另外兩種型別:type="primary"和type="warn"

<button type='default'>按鈕</button>

(2)按鈕新增點選事件

/** wxss **/
<button type='primary' bindtap="setLoading" loading="{{loading}}">按鈕</button>
/** js **/
setLoading: function (e) {
    this.setData({
      loading: !this.data.loading
    })
  }

2、checkbox的使用

/** wxss **/
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>
/**js **/
Page({
  data: {
    items: [
      { name: 'USA', value: '美國' },
      { name: 'CHN', value: '中國', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英國' },
      { name: 'TUR', value: '法國' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
  }
})

c

3、form(表單)的使用

/** wxss **/
<form bindsubmit="formSubmit" bindreset="formReset">
 <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>

  <button formType="submit">Submit</button>
  <button formType="reset">Reset</button>
</form>

這裡寫圖片描述

控制檯輸出結果：
這裡寫圖片描述

4、input(輸入框)的使用

/** wxss **/
<input placeholder="請輸入賬號">輸入框</input>

5、label(文字框)的使用

/** wxss **/
<label>我是label</label>

6、pikcer(選擇器)的使用

/** wxss **/
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
    當前選擇：{{array[index]}}
  </view> 
</picker>
/** js **/
Page({
  data: {
    array: ['美國', '中國', '巴西', '日本'],
    index: 0,
  },
  bindPickerChange: function (e) {
    console.log('picker傳送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }
})

這裡寫圖片描述

7、pikcer-view(嵌入頁面的滾動選擇器)的使用

pikcer是彈出式的選擇器，picker-view是直接嵌在頁面上面的選擇器

/** wxss **/
<view>
  <view>國家:{{country}}</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{arr}}" style="line-height: 50px">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>
/** js **/
Page({
  data: {
    arr:["中國","美國","巴西"]
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      country: this.data.arr[val[0]],
    })
  }
})

這裡寫圖片描述

8、radio(單項選擇器)的使用

/** wxss **/
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>
/** js **/
Page({
  data: {
    items: [
      { name: 'USA', value: '美國' },
      { name: 'CHN', value: '中國', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英國' },
      { name: 'TUR', value: '法國' },
    ]
  },
  radioChange: function (e) {
    console.log('radio發生change事件，攜帶value值為：', e.detail.value)
  }
})

這裡寫圖片描述

9、slider(滑動選擇器)的使用

/** wxss **/
<slider bindchange="slider2change" step="5"/>

10、slider(滑動選擇器)的使用

/** wxss **/
<slider bindchange="slider2change" step="5"/>

9、slider(滑動選擇器)的使用

/** wxss **/
<slider bindchange="slider2change" step="5"/>

11、switch(開關選擇器)的使用

/** wxss **/
Page({
  switch1Change: function (e) {
    console.log('switch1 發生 change 事件，攜帶值為', e.detail.value)
  },
  switch2Change: function (e) {
    console.log('switch2 發生 change 事件，攜帶值為', e.detail.value)
  }
})
/** js **/
Page({
  switch1Change: function (e) {
    console.log('switch1 發生 change 事件，攜帶值為', e.detail.value)
  },
  switch2Change: function (e) {
    console.log('switch2 發生 change 事件，攜帶值為', e.detail.value)
  }
})

12、textarea(多行輸入框)的使用

/** wxss **/
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="請輸入內容" />

三、導航

小程式的導航欄樣式在app.json中定義

{
  "pages":[
    "pages/index/index",        
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "導航條",
    "navigationBarTextStyle":"white"
  }
}
屬性 型別 預設值 說明
backgroundTextStyle String dark 下拉背景字型、loading 圖的樣式，僅支援 dark/light
navigationBarBackgroundColor HexColor 000000 導航欄背景顏色，如”#000000”
navigationBarTitleText String 導航欄標題
navigationBarTextStyle String white 導航欄標題顏色，僅支援 black/white

四、媒體元件

1、image(圖片)的使用

/** wxss **/
<image style="width: 200px; height: 200px; background-color: #eeeeee;" src="{{src}}"></image>
/** js **/
Page({
  data: {
    src: 'https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t=20171227'
  }
})

2、camera(相機)的使用

/** wxss **/
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預覽</view>
<image mode="widthFix" src="{{src}}"></image>
/** js **/
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

相關推薦

1、微信小程式學習：基本控制元件的使用

最近公司app客戶端沒有新的需求了，接下來的工作任務是學習微信小程式的開發，先從最基本的控制元件開始學習。 一、檢視容器 1、view的使用 wxml檔案中的程式碼： //建立一個view，class='style'是引用wxss檔案中的樣式

微信小程式裡面的標籤和html標籤的對比、微信小程式基礎之常用控制元件

微信小程式和html5標籤的區別： HTML5 微信小程式 <h1></h1>...<h6></h6> <p>&l

微信小程式學習(10)-button控制元件

button控制元件學習 1.button屬性 2.size和type屬性對button的影響 size屬性的預設值為default，type屬性的預設值也為default，如果值為default時，該屬性可以省略； <view class="content">

微信小程式學習：location API介面

微信小程式的位置介面共有兩個： 1、wx.getLocation(OBJECT)獲取當前的地理位置、速度。 2、wx.openLocation(OBJECT) 使用微信內建地圖檢視位置 然後，根據object引數說明，結合module模組化重寫了下兩個介面在暴露出來引用，讓

微信小程式（2）控制元件

一。基本控制元件----button按鈕 <!--index.wxml--> <view class="container"> <button size="mini">按鈕</button> <button

微信小程式——學習筆記（二）：邏輯層（1）

邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。 用App()函式註冊一個小程式。 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次） 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow 當小程式從前臺進入後臺，會觸發 onHide 當小程式發生指令碼錯

【微信小程式學習筆記】1：開發一個帶歷史記錄功能的四則計算器

端午CSDN學院促銷，買了微信小程式開發實戰跟著學習一下。 混合模式移動應用 微信小程式是一種Hybrid-App(混合模式移動應用)，它是介於Native-App和Web-App之間的，更接近前者，但開發成本小很多。 基本結構 pages目錄：其內的

微信小程式開發：二級、三級等多級聯動選單

二級級聯效果三級聯動效果 二級聯動和三級聯動的程式碼結構都是一樣，就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

Okam(奧卡姆)：小程式開發框架，支援百度小程式、微信小程式、支付寶小程式

Okam(奧卡姆)：小程式開發框架，支援百度小程式、微信小程式、支付寶小程式 Okam 是什麼 `Okam` 一個面向小程式開發的開發框架，開發體驗類 `Vue`。詳情 Okam 對各小程式的支援情況 支援 百度小程式 支援 微信小程式 支援 支付寶小程式 Okam 提供

微信小程式——學習筆記（三）檢視層（1）

WXS—(WeiXin Script)是小程式特有的一套指令碼語言。wxs有自己的語法，今天就學習一下wxs的語法。 1) wxs程式碼可以編寫在wxml檔案中的<wxs>標籤內，或者是XXX.wxs的檔案內。不管是標籤還是檔案都是一個單獨的模組。 2) 每個模組裡面定義的變數與函式

微信小程式——學習筆記（一）：json

json配置檔案—— 1> app.json：作用於整個小程式全域性配置   頁面路徑——page(陣列[字串="路徑+檔名"])      "pages":["pages/index/index","pages/log/index"]

微信小程式學習筆記（三）----初識小程式程式碼、輪播圖實現

從這一節開始我們就開始接觸小程式前臺程式碼了，其實前臺邏輯還是比較簡單的，學習難度比學習一個前端框架難不了多少，記得以前一開始學前端框架的時候，流程就是：熟悉一下--檢視元件--找到要用的--複製貼上，其實對於大部分人來說，小程式前臺也是一樣。 首先，我們可以先看下小程式的

微信小程式學習筆記（三）表單提交、PHP後臺資料互動

【form表單提交】 form.wxml： <form bindsubmit="formSubmit" bindreset="formReset"> <view> 暱稱：<input type="text" name="nic

微信小程式學習筆記（六）檔案上傳、下載

（以上傳圖片為例） 後臺上傳介面Upload.php：（tp5） <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上傳

微信小程式學習筆記——第一彈：小程式程式碼結構

    近來被微信小遊戲強勢刷了一波後，萌生了學習微信小程式/小遊戲的衝動~    作為一個馬上就要畢業的學生狗(｡☉౪ ⊙｡)，學習一下新技術，順道還能豐富自己的簡歷，簡直不能再美滋滋了~~~    學習筆記會持續更新 至 完成第一個小程式例項，如果以下對小程式的理解有錯誤

【明天的地平線】專注Java相關技術：SpringBoot、Spr ingCloud、MyBatis、Docker、微服務、叢集、分散式、 Linux、Jenkins、Netty、Angular 5 、Vue 2、微信小程式、程式碼生成器等的技術研究和乾貨分

專注Java相關技術：SpringBoot、Spr ingCloud、MyBatis、Docker、微服務、叢集、分散式、 Linux、Jenkins、Netty、Angular 5 、Vue 2、微...

微信小程式學習筆記（1）

首先，註冊帳號 這裡指的是微信公眾平臺的註冊帳號，不是微信App賬號。 訪問https://mp.weixin.qq.com/，如果沒有帳號，輸入郵箱，註冊一個。註冊過程中會讓你從四個類別（微信訂閱號、服務號、企業微信、小程式）中選擇一個，選擇“小程式"就好了。 後續輸

微信小程式聯盟：微信小程式之獲取並解密使用者資料（獲取openId、unionId）

前言在實際的小程式開發中，往往需要使用者授權登陸並獲取使用者的資料，快速對接使用者系統。openId : 使用者在當前小程式的唯一標識 unionId : 如果開發者擁有多個移動應用、網站應用、和公眾帳號（包括小程式），可通過unionid來區分使用者的唯一性，因為只要是同一

微信小程式學習1

微信小程式幾個檔案說明:.js檔案： 邏輯處理檔案.wxml檔案:  頁面佈局檔案.wxss: 頁面控制元件座標、樣式設定檔案在wxml檔案中設定一個 button ，利用 bindtap 繫結一個方openWeChat的呼叫方法；.wxml檔案內容：<button c

微信小程式學習（1）——小程式專案檔案及資料夾的功能介紹

因為工作的需要所以開始接觸微信小程式了，特此來記錄自己的學習過程和遇到的一些問題。 在新建一個微信小程式專案時主要會有如下幾個資料夾和檔案，主要就是介紹一下他們的主要功能。 檔案： app.js：主要就是註冊微信小程式應用 app.json：一些微信小程式的全