微信小程序盒模型與頁面佈局

案例：攝氏溫度轉換成華氏溫度

案例描述:計算公式爲F＝(9/5)*C+32

本案例主要涉及JavaScript中順序結構程序設計方法(按照解決問題順序寫成相應的語句，自上而下依次執行)、數學運算基本方法、input組件使用的方法、數據和事件綁定的實現方法。

知識要點

value:輸入框中的內容 type:input的類型

password:是否是密碼型

placeholder:輸入框內容爲空時佔位符

placeholder-style:指定placeholder的樣式

maxlength:最大輸入長度，當爲-1時不限制最大長度

indinput 鍵盤輸入是觸發

bindfocus輸入框聚焦時觸發

bindblur輸入框失去焦點時觸發

text:文本輸入鍵盤

number:數字輸入鍵盤

idcard:身份證輸入鍵盤

digit:帶小數點的數字鍵盤

程序代碼

// pages/detail/detail.js
Page({
  calc: function (e) { //事件處理函數
    var C, F; //定義變量
    C = e.detail.value; //獲取input組件中輸入的數值( value )
    this.setData({
    F: C * 9 / 5 + 32 //求出華氏溫度F並渲染到視圖層
   })
  }
})

<!--pages/detail/detail.wxml-->
<view class='box'>
<view class='title'>攝氏溫度轉華氏溫度</view>
<view>
<input placeholder= '請輸入攝氏溫度' type='digit' bindblur='calc'></input>
</view>
<view>華氏溫度爲: {{F}} </view>
</view>

input{
margin: 20px 0; /*設置input組件 上下邊距爲20px ,左右邊距爲0*/
border-bottom: 1px solid blue; /*設置input組件 下邊框粗細爲1px、實心、藍色*/
}
.box{
   border: 5px dotted silver;
   margin: 10rpx;
   padding: 20rpx;
}

效果圖