從零學習微信小程序（一）—— 基礎知識

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

最近在學習微信小程序，以前也有學過一些，前面的忘的差很少了，寫個文檔複習一下這些基礎知識

1、小程序配置文件

小程序有兩種配置文件，全局的app.json和頁面單獨的page.json

注意：配置文件中不能出現註釋

1.1 全局配置 app.json

官方文檔

小程序的全局配置，包括全部頁面路徑、界面表現、網絡超時時間、底部tab。

舉個例子

這是以前學的項目的配置文件的一部分

各字段的含義

1. pages字段 —— 用於描述當前小程序所用頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄
2. window字段 —— 定義小程序全部頁面的頂部背景顏色，文字顏色定義，導航文字
3. tabBar字段 —— 定義小程序的底部導航欄樣式

tabBar 配置屬性

1.2 頁面配置 page.json

每個小程序頁面也可使用 .json 文件來對本頁面的窗口表現進行配置。

能夠獨立定義每一個頁面的一些屬性，如頂部顏色、下拉刷新等等

注意：若是有與app.json文件相同的配置項，頁面中的配置項將會覆蓋app.json中window中的配置項

1.3 sitemap.json 配置

⼩程序根⽬錄下的 sitemap.json ⽂件⽤於配置⼩程序及其⻚⾯是否容許被微信索引。

2、wxml語法

2.1 數據綁定

2.1.1 普通寫法

wxml文件中的模板語法

在同頁面下的js中傳入模板數據

2.1.2 組件屬性

模板語法

<view id="item-{{id}}"> </view>
複製代碼

數據傳遞

Page({
  data: {
    id: 0
 }
})
複製代碼

2.1.3 bool 類型

不能直接寫 checked = "false"，該計算結果爲字符串

<checkbox checked="{{false}}"> </checkbox>
複製代碼

2.2 運算

2.2.1 三元運算

2.2.2 算數運算

2.2.3 邏輯判斷

採用wx:if 來判斷是否須要渲染該代碼塊：

<view wx:if="{{length > 5}}"> </view>
複製代碼

也能夠採用wx:elif和wx:else來添加一個else塊

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
複製代碼

注意：若是須要控制多個組件標籤，可使用block標籤將多個組件包裝起來，給block加上控制屬性

注意： <block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性

2.2.4 字符串運算

<view>{{"hello" + name}}</view>
複製代碼

//page中的js文件
Page({
  data:{
    name: 'MINA'
 }
})
複製代碼

注意：花括號和引號之間若是有空格，將最終被解析成爲字符串

2.3 列表渲染

2.3.1 wx:for

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
複製代碼

array: [{
  message: 'foo',
}, {
  message: 'bar'
}]
複製代碼

因爲未設置wx:key屬性所以會有警告，提示採用wx:key來提升性能

wx:key綁定的值有幾種選擇

1. string類型，表示循環項中的惟一屬性
2. 保留字*this，表示item自己，表明惟一的字符串和數組

2.4 條件渲染

2.4.1 hidden

<view hidden="{{condition}}"> True </view>
複製代碼

相似wx:if，頻繁切換用hidden，不常使用wx:if

3、事件綁定

經過bind關鍵字來實現。如 bindtap 、bindinput 、bindchange 等

給input綁定輸入事件

<input type="text" bindinput="handleInput"/>
複製代碼

事件處理函數，將這個數據映射到 data 數據中

handleInput(e) {
    this.setData({
      num: e.detail.value
    })
}
複製代碼

3.1注意事項

1. 綁定事件時不能帶參數，不能帶括號，如下錯誤示範

<input bindinput="handleInput(100)" />
複製代碼

2. 事件傳值，經過標籤自定義屬性的方式和value

<input bindinput="handleInput" data-item="100" />
複製代碼

3. 事件觸發時獲取數據

 handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
    // 輸入框的值
   console.log(e.detail.value);
 }
複製代碼

4、wxss 樣式

wxss 擴展特性

• 響應式長度單位rpx
• 樣式導入

4.1 尺寸單位

rpx : 能夠根據屏幕寬度進⾏⾃適應

使⽤步驟：

1. 肯定設計稿寬度 pageWidth

2. 計算⽐例 750rpx = pageWidth px ,所以 1px=750rpx/pageWidth

3. 在 less ⽂件中，只要把設計稿中的 px => 750/pageWidth rpx 便可。

4.2 樣式導入

使⽤ @import 語句能夠導⼊外聯樣式表，只⽀持相對路徑。

@import "common.wxss";
.middle-p {
  padding:15px; 
}
複製代碼

4.3 選擇器

不支持通配符選擇器*

僅支持如下選擇器

好忙，好忙，好忙~