前兩期講了小程序開發(fā)的準(zhǔn)備工作以及前期需要如何調(diào)試，今天我們就來介紹下開發(fā)一個(gè)支付寶小程序頁面需要了解哪些信息。

一個(gè)小程序頁面的整體功能的構(gòu)成離不開頁面展示（AXML）、頁面樣式（ACSS）以及頁面邏輯（JS）這三方面，下面本文將從這三方面具體展開。

一、AXML(組件)

AXML 頁面一般用來做頁面的布局，用支付寶提供的容器和組件在頁面上做編排。

1. 基礎(chǔ)能力與屬性介紹

不同的組件有不同的作用，組件的內(nèi)容放在開始 <xx> 和結(jié)束 <xx/> 標(biāo)簽之間，分別代表著不同的組件作用。

例如，下方登陸頁面中展示的不同組件：

?

?

<!-- axml頁面代碼塊 -->
<view>
  <image mode="scaleToFill" src="http://img.touxiangwu.com/zb_users/upload/2022/11/202211081667896715116887.jpg" />
  <view> 用戶名 </view>
  <input placeholder="" />
  <view> 密碼 </view>
  <input placeholder="" />
  <button size="default" type="primary">登錄</button>
</view>

?

?

一般組件都擁有以下的共同屬性：

?

?

其中：

• class、style 用來設(shè)置標(biāo)簽的樣式（顏色、大小等）；
• on/catch 對(duì)標(biāo)簽進(jìn)行事件綁定；
• data-* 可以用來設(shè)定標(biāo)簽的屬性，觸發(fā)事件之后，會(huì)將該值傳輸給 js 頁面對(duì)應(yīng)的方法中；

• 使用過程中可能會(huì)有一些常見問題，例如 ?? [事件的函數(shù)能像 js 一樣傳參嗎]；

• 除了公共的屬性之外，不同的組件還有各自特定的屬性，可以參考對(duì)應(yīng)組件文檔中的屬性說明進(jìn)行查看。

?

更多組件相關(guān)內(nèi)容，可以參考：組件概覽 文檔查詢～

?

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

• [小程序支持類似 vue 的 v-html 的操作嗎？]
• [axml 文件中能使用 js 函數(shù)嗎]

?

2. 進(jìn)階功能

通過上面的例子，我們知道了組件的基礎(chǔ)使用方法，但在實(shí)際開發(fā)環(huán)境中，頁面不是一成不變的，更多用到的是根據(jù)實(shí)際使用情況對(duì)頁面的組件進(jìn)行動(dòng)態(tài)的數(shù)據(jù)變化。

這里就需要給大家介紹一下 AXML 語法的進(jìn)一步功能：

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

數(shù)據(jù)綁定需要將變量封裝在 {{ }} 中，常見場景如下：

其中 message,id,condition 為動(dòng)態(tài)值，在.js頁面中設(shè)置

<view> {{ message }} </view>        文本數(shù)據(jù)動(dòng)態(tài)設(shè)置
<view id="item-{{id}}"> </view>     組件屬性需要再用""封裝
<view a:if="{{condition}}"> </view> 控制屬性需要用""封裝
<view> {{ 1+2 }} </view>            可以進(jìn)行算數(shù)運(yùn)算
<view>{{"hello" + message}}</view>  可以進(jìn)行字符串運(yùn)算

?

條件渲染

通過與動(dòng)態(tài)值 length 比較控制哪個(gè)模塊展示：

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>

?

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

• [條件渲染中 a:if 與 hidden 的區(qū)別]

列表渲染

<view a:for="{{list}}"> {{item}} </view>  

?

二、JS 頁面

JS 頁面一般用來處理頁面的邏輯。在介紹 JS 頁面之前，我們要先了解下小程序的頁面的運(yùn)行機(jī)制。

在打開一個(gè)頁面的時(shí)候，都需要在頁面對(duì)應(yīng)的 .js 文件進(jìn)行注冊(cè)，通過這個(gè)文件，我們可以在 page() 里面使用不同的 Object 對(duì)象來指定該頁面的初始化數(shù)據(jù)、生命周期以及事件處理函數(shù)。

接下來，具體看下 JS 頁面的基本功能～

1. 初始化數(shù)據(jù)

上面也說過，動(dòng)態(tài)的數(shù)據(jù)需要在 .js 文件中設(shè)置，而設(shè)置的位置就是在 data 中。

data 可以直接設(shè)置對(duì)象類型：

Page({
  data: {
    text: "Hello World~", //設(shè)置文本
    list:  ['a', 'b', 'c', 'd'],//設(shè)置數(shù)組
    arr: [{text: '1' },{text: '2' }],//設(shè)置集合
    object: {
      name: "sam",
      age: "18"
    },
  },
   doIt() {
    this.setData({
      text: "bye bye~",
    });
  },
});

?

data 也可以設(shè)置為函數(shù)類型，將函數(shù)的返回值作為當(dāng)前頁面的數(shù)據(jù)：

Page({
  data() {
    return {
      arr: [],
    };
  },
  doIt() {
    this.setData({
      arr: [1, 2, 3],
    });
  },
});

?

?? 注意：兩者的區(qū)別在于，如果通過 doIt() 方法修改數(shù)據(jù)之后，再次進(jìn)入該頁面時(shí)，對(duì)象類型的數(shù)據(jù)會(huì)變?yōu)樾薷闹蟮闹?，而函?shù)類型會(huì)變?yōu)樵贾怠?/span>

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

?? [小程序頁面關(guān)閉后重進(jìn)數(shù)據(jù)依然保留了上次的賦值什么原因]

其他常見問題：

• [setData 數(shù)據(jù)路徑修改數(shù)據(jù)]
• [小程序跳轉(zhuǎn)頁面時(shí)怎么清除 data 數(shù)據(jù)]

2. 生命周期函數(shù)

對(duì)一個(gè)頁面來說，會(huì)有頁面初始化、頁面加載、頁面隱藏、頁面關(guān)閉等不同的狀態(tài)，需要對(duì)這些狀態(tài)進(jìn)行不同的業(yè)務(wù)處理的話，就可以在下面這些函數(shù)中進(jìn)行：

page({
  onLoad(query) {}, // 頁面頁面初始化時(shí)觸發(fā)。一個(gè)頁面只會(huì)調(diào)用一次;query為攜帶的參數(shù)
  onReady() {}, // 頁面加載完成后觸發(fā)
  onHide() {},  // 頁面切到后臺(tái)觸發(fā)
  onShow() {},  // 頁面從后臺(tái)切回前臺(tái)觸發(fā)
  onUnload() {}, // 頁面被關(guān)閉時(shí)觸發(fā)
})

?

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

• [onShow 里面可以做授權(quán)嗎]
• [獲取頁面棧某個(gè)頁面的 onload 參數(shù)]

3. 事件處理函數(shù)

除了頁面狀態(tài)之外，我們對(duì)小程序頁面進(jìn)行點(diǎn)擊、拖拽時(shí)也會(huì)觸發(fā)不同的事件，如果需要對(duì)這些狀態(tài)進(jìn)行不同的業(yè)務(wù)處理，可以在下面這些函數(shù)中進(jìn)行：

page({
  onShareAppMessage() {}, // 點(diǎn)擊右上角分享時(shí)觸發(fā)
  onPullDownRefresh() {}, // 頁面被下拉時(shí)觸發(fā)
  onReachBottom() {}, // 頁面被拉到底部時(shí)觸發(fā)
  onTitleClick() {}, // 點(diǎn)擊標(biāo)題時(shí)觸發(fā)。
})

?

除了官方提供的事件處理函數(shù)之外，也可以通過以“on（冒泡事件）/catch（非冒泡事件） + 觸發(fā)類型 ”來設(shè)置事件處理函數(shù)。

觸發(fā)類型如下：

?

例如：

<!--.axml頁面 -->
<view onTap="handleTap1"></view>
<view catchTap="handleTap2"></view>

?

//.js頁面
page({
  handleTap1(){},
  handleTap2(){},
})

?

?

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

• [小程序阻止事件冒泡]
• [如何防止連續(xù)快速點(diǎn)擊事件]
• [設(shè)置了 onPullDownRefresh 下拉刷新后真機(jī)測試沒有效果]

4. API

另外，小程序也提供了豐富的 API 能力，可以使用這些 API 快速進(jìn)行支付、跳轉(zhuǎn)等能力。

API 分為三種類型，分別是事件監(jiān)聽 API、同步功能 API、異步功能 API。

事件監(jiān)聽 API

Page({
  onLoad() {
    my.onError(this.errorHandler);
  },
  errorHandler(error, stack) {
    console.log('onError error', error);
    console.log('onError stack', stack);
  },
   onUnload() {
    my.offError(this.errorHandler)
  }
})

?

同步功能 API

Page({
  onLoad() {
    //將數(shù)據(jù)同步地存儲(chǔ)在本地緩存中指定的 key 中
    let res = my.setStorageSync({
      key: 'currentCity',
      data: {
        cityName: '杭州',
        adCode: '330100',
        spell: ' hangzhou',
      },
    });
    console.log(res);
    if (res.success) {
      console.log("執(zhí)行成功");
    }
  },
  
})

異步功能 API

大部分的 API 都是異步API ，包含 success、fail、complete 三個(gè)回調(diào)函數(shù)。

每個(gè)回調(diào)函數(shù)都會(huì)有 error、errorMessage、其它（API 返回的其它數(shù)據(jù)）參數(shù)。

page({
  handleTap1(){
    my.downloadFile({
      url: 'https://img.alicdn.com/tfs/TB1x669SXXXXXbdaFXXXXXXXXXX-520-280.jpg',
      success(res) {
        console.log('downloadFile success：',res.apFilePath,res.tempFilePath); // apFilePath 與 tempFilePath 等價(jià)
      },
      fail(res) {
        console.log('downloadFile fail：',res);
      },
      complete(res) {
        console.log('downloadFile complete：',res);
      },
    });
  },
})

?

更多相關(guān)內(nèi)容可參考 API 概覽～

三、ACSS

ACSS 是用于描述 AXML 組件樣式的的語言，決定組件的顯示效果，其中：

• ACSS 的樣式規(guī)則與 CSS 完全一致
• 單位默認(rèn)為 rpx，默認(rèn)一個(gè)屏幕寬度為 750 rpx。
• app.acss 是全局的樣式，頁面 .acss 只作用于對(duì)應(yīng)的頁面
• 如果需要導(dǎo)入外聯(lián)樣式表，需要使用@import 語句導(dǎo)入：

@import "./button.acss"; /*相對(duì)路徑*/
@import "/button.acss"; /*項(xiàng)目絕對(duì)路徑*/
@import "third-party/page.acss"; /*第三方 npm 包路徑*/

?

• ACSS 文件里的本地資源引用請(qǐng)使用絕對(duì)路徑的方式，不支持相對(duì)路徑引用，例如：

/* 支持 */
background-image: url('/images/ant.png');
/* 不支持 */
background-image: url('./images/ant.png');

?

?

這里列舉一些小程序開發(fā)的常見問題，供大家參考：

• [如何動(dòng)態(tài)修改 class 樣式]
• [button 按鈕默認(rèn)樣式如何去除]
• [rpx 與 px 單位相互換算]
• [小程序是否支持 CSS3 動(dòng)畫]

?

?

以上就是關(guān)于小程序頁面功能介紹的所有內(nèi)容啦，希望可以幫助到你~??ヽ(°▽°)ノ?

下一期介紹下小程序的全局配置~~文章來源地址http://www.zghlxwxcb.cn/news/detail-746886.html