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

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

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

一、小程序配置文件

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

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

1.1 全局配置 app.json

官方文檔

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

舉個例子

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

各字段的含義

pages字段 —— 用于描述當前小程序所用頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄

window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義，導航文字

tabBar字段 —— 定義小程序的底部導航欄樣式

tabBar 配置屬性

1.2 頁面配置 page.json

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

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

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

1.3 sitemap.json 配置

?程序根?錄下的 sitemap.json ?件?于配置?程序及其??是否允許被微信索引。

二、wxml語法

2.1 數據綁定

wxml文件中的模板語法

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

模板語法

數據傳遞

Page({ data: { id: 0 } })

不能直接寫 checked = “false”，該計算結果為字符串

2.2 運算

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

也可以采用wx:elif和wx:else來添加一個else塊

1 2 3

注意：如果需要控制多個組件標簽，可以使用block標簽將多個組件包裝起來，給block加上控制屬性

注意： 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性

{{"hello" + name}}

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

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

2.3 列表渲染

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

{{index}}: {{item.message}}

array: [{ message: 'foo', }, { message: 'bar' }]

由于未設置wx:key屬性因此會有警告，提示采用wx:key來提高性能

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

string類型，表示循環項中的唯一屬性

保留字*this，表示item本身，代表唯一的字符串和數組

2.4 條件渲染

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

三、事件綁定

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

給input綁定輸入事件

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

handleInput(e) { this.setData({ num: e.detail.value }) }

3.1注意事項

綁定事件時不能帶參數，不能帶括號，以下錯誤示范

事件傳值，通過標簽自定義屬性的方式和value

事件觸發時獲取數據

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

四、wxss 樣式

wxss 擴展特性

響應式長度單位rpx

樣式導入

4.1 尺寸單位

rpx: 可以根據屏幕寬度進??適應

使?步驟：

確定設計稿寬度 pageWidth

計算?例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth

在 less ?件中，只要把設計稿中的 px => 750/pageWidth rpx 即可。

4.2 樣式導入

使?@import 語句可以導?外聯樣式表，只?持相對路徑。

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

4.3 選擇器

不支持通配符選擇器*

僅支持以下選擇器

好忙，好忙，好忙~

JavaScript 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。