小程序開發(fā)框架

小程序開發(fā)框架的目標是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗的服務。

整個小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。

小程序提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯

WXML 語法參數(shù) (參考官網(wǎng))

• WXML 語法參數(shù)鏈接

1. 數(shù)據(jù)綁定

• 雙括號
• 和vue、react的對比
  • 運算
  • 三元
  • 方法調(diào)用 (不行)
• 屬性可以使用{{}}

2. 條件渲染

• wx:if
• wx:if 和 wx:elif wx:else
• block
• wx:if 和 hidden

####3. 列表渲染

• wx:for 遍歷簡單類型數(shù)組
• wx:for 遍歷對象數(shù)組
• 起別名 wx:for-item=‘it’ wx:for-index=‘i’
• wx:key

?

WXS 語法參考 (參考官網(wǎng))

• .wxs 文件
• wxs標

第一種方式 : 單獨創(chuàng)建一個.wxs文件1. 創(chuàng)建common.wxs文件2. 創(chuàng)建一個方法 function my_slice(str) { return str.slice(0,1)}3. module.exports.my_slice=my_slice4. 引入 <wxs src='./common.wxs' module='tool'>5. 使用 : <view>{{ tool.my_slice(str) }}</view>第二種方式 : 在 wxml內(nèi) 使用 wxs 標簽處理1. 創(chuàng)建一個 wxs 標簽 <wxs></wxs>2. 創(chuàng)建方法 function my_case(str) { return str.toUpperCase() }3. 導出 module.exports.my_case = my_case4. 使用模塊接收 <wxs module='tool1'></wxs>5. 使用 tool1.my_case(str)

事件綁定

1. bindTap

• 綁定事件

<button bindtap="click1">按鈕1</button>

• 事件處理函數(shù)

Page({click1() {console.log(111)} })

• 傳參

// 傳遞 <button bindtap="click2" data-msg="abc" data-index="123">按鈕2</button>// 接收 click2(e){ e.currentTarget.dataset },

2. catchTap 阻止冒泡

<view bindtap='click0'><button bindtap='click1'>按鈕1</button> <button catchtap='click2'>按鈕2</button> </view>

3. bindinput

• 綁定事件

<input bindinput="handleInput" />

• 事件處理函數(shù)

Page({// 綁定的事件handleInput: function(e) {e.detail.value} })

數(shù)據(jù)操作

• setData1

• [setData2](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object data, Function callback))

• 獲取數(shù)據(jù) : this.data.name

• 修改數(shù)據(jù) :

  • 直接修改 this.data 而不調(diào)用 this.setData 是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致。
  • setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時改變對應的 this.data 的值（同步）。

console.log(this.data.name) // zs this.setData({name :'ls' }) console.log(this.data.name) // ls

WXSS

• WXSS鏈接

• WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

• 與 CSS 相比，WXSS 擴展的特性有：

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

1. 尺寸單位

• rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

• 官網(wǎng)建議：開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。

• 注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發(fā)時盡量避免這種情況。

2. 樣式導入

• 使用@import語句可以導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。

/* app.wxss */ @import 'common.wxss';.middle {color : 'red' }

3. 行內(nèi)樣式

<view style="color : red;">啊哈</view>

4. 選擇器

目前支持的選擇器有：

選擇器樣例樣例描述

.class	.intro	選擇所有擁有 class=“intro” 的組件
#id	#firstname	選擇擁有 id=“firstname” 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
nth-child(n)	view:nth-child(n)	選擇某個索引的標簽
::after	view::after	在 view 組件后邊插入內(nèi)容
::before	view::before	在 view 組件前邊插入內(nèi)容

• 注意 :
  • 小程序 不支持通配符 *
• 樣式初始化配置

page,view,input,text {margin: 0;padding: 0;box-sizing: border-box; }

5. 小程序使用less

原生小程序不支持less，我們可以借助 vscode 使用 less

編輯器是vscode

安裝 VSCode插件 : easy less

在vs code的設置中加入如下，配置

"less.compile": {"outExt": ".wxss" }

新建 less文件，如 index.less, 保存即可, 自動機會編程出樣式到對應的index.wxss 里面

要么只用less ,要么只用 wxss 不要混著用,后果很嚴重, 因為 wxss的東西被會覆蓋掉

less => wxss + wxml

自定義組件

類似 vue 和 react 中的自定義組件

小程序允許我們使用自定義組件的方式來構建頁面。

1. 創(chuàng)建自定義組件

• 創(chuàng)建文件夾 components/
• 創(chuàng)建 組件 文件夾 Test/
• 右鍵 新建 Component

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FL1bY39c-1595140559959)(D:\黑馬課程\備課\05-小程序\整理最新筆記+代碼★\md-imgs\組件1.png)]

• 注意聲明組件 (一般情況下是聲明過了)
  • 在組件的 json 文件中進行自定義組件聲明

// Test.json {"component": true // 聲明組件 }

• 注意注冊組件 (一般情況下 也已經(jīng)注冊過了)

Component({/*** 1. 組件的屬性列表 - 外界傳進來的數(shù)據(jù)*/properties: {name : {type : String,value :'初始值'}},/*** 2. 組件的初始數(shù)據(jù) - 組件自己的私有數(shù)據(jù)*/data: {},/*** 3. 組件的方法列表*/methods: {} })

3. 引入組件

• 首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑

// index.wxml 想使用組件的話, 就要在 index.json 里 先引入 {"usingComponents": {// 要使用的組件的名稱 // 組件的路徑"Test":"/components/Test/Test"} }

####4. 使用組件

<Test></Test>

法列表
*/
methods: {
}
})

#### 3. 引入組件- 首先要在頁面的 `json` 文件中進行引用聲明。還要提供對應的組件名和組件路徑```js // index.wxml 想使用組件的話, 就要在 index.json 里 先引入 {"usingComponents": {// 要使用的組件的名稱 // 組件的路徑"Test":"/components/Test/Test"} }

####4. 使用組件

<Test></Test>

總結

以上是生活随笔為你收集整理的小程序基础 （二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。