百度智能小程序_百度小程序頁面開發

 百度智能小程序_百度小程序頁面開發

百度智能小程序的啓動

1、用戶點擊入口後，百度 App 會加載智能小程序的代碼包;
2、解壓並獲取其中的 app.json ;
3、根據框架機制，智能小程序框架在加載完成代碼包之後，會啓動 pages 中的第一項，並渲染爲首次看到的頁面;
4、智能小程序啓動後，開始調用 app.js 中預設的生命週期方法。

App({
	onLaunch: function () {
		// APP LOGIC
	}
});

在一個百度智能小程序中，只有一個 App 的實例（開發者可以用這個實例定義多個 Page 共享的變量）。

 百度智能小程序_SWAN（視圖）

這部分是每個智能小程序頁面的展現模板，類似於 Web 開發中的 HTML ，SWAN 模板中使用的標籤均爲 SWAN 組件規定的標籤。

<view s-for="item in items" class="single-item" bind:tap="oneItemClick" bind:touchstart="oneItemTouchStart" bind:touchmove="oneItemTouchmove" bind:touchcancel="oneItemTouchcancel" bind:touchend="oneItemTouchEnd">
	<image src="{{item.imgsrc}}" class="single-img"></image>
	<view class="single-text-area">
		<text class="single-title">
			{{item.title}}
		</text>
		<view s-if="{{item.tags}}" class="tag-area">
		<text s-for="tag in item.tags" class="{{tag.className}}">
			{{tag.content}}
		</text>
		</view>
	</view>
</view>
<view class="view-more" bind:tap="loadMore">
	<text>點擊加載更多</text>
</view>

百度智能小程序_基礎數據綁定

<!-- xxx.swan -->
<view>
	Hello My {{ name }}
</view>

// xxx.js
Page({
	data: {
		name: 'SWAN'
	}
});

循環

開發者可以通過在元素上添加s-for指令，來渲染一個列表：

語法

<view>
	<view s-for="p in persons">
		{{p.name}}
	</view>
</view>

Page({
	data: {
		persons: [
			{name: 'superman'},
			{name: 'spiderman'}
		]
	}
});

條件

開發者可以通過在元素上添加s-if指令，來在視圖層進行邏輯判斷：

<view s-if="is4G">4G</view>
<view s-elif="isWifi">Wifi</view>
<view s-else>Other</view>

Page({
	data: {
		is4G: true,
		isWifi: false
	}
});

百度智能小程序_事件

事件處理

開發者可以使用bind: + 事件名來進行事件綁定

<view class="view-more" bind:tap="loadMore">
	點擊加載更多
</view>

Page({
	loadMore: function () {
		console.log('加載更多被點擊');
	}
});

目前支持的事件類型有：

類型	觸發條件
touchstart	手指觸摸開始
touchmove	手指觸摸後進行移動
touchend	手指觸摸結束
touchcancel	手指觸摸動作被打斷，如來電提醒等
tap	手指觸摸後馬上離開動作

事件對象

當開發者綁定方法到事件，事件觸發時，SWAN 會給觸發的方法傳遞事件對象，事件對象因事件不同而不同，目前基礎的事件對象結構爲：

屬性	類型	說明
type	String	事件類型
currentTarget	Object	事件觸發的屬性集合

dataset

開發者可以在組件中自定義數據，並在事件發生時，由 SWAN 所在事件對象中，傳遞給綁定函數。

示例代碼：

<view data-swan="1" bind:tap="viewtap">dataset-test</view>

Page({
	viewtap: function (event) {
		console.log('value is:', event.currentTarget.dataset.swan);// 輸出1
	}
});

touches

開發者在接收到觸摸類事件後，在事件對象上，可以接收到當前停留在屏幕上的觸摸點。

Touch 對象

屬性	類型	描述
pageX , pageY	Number	距離文檔左上角的距離，橫向爲 X，縱向爲 Y
clientX , clientY	Number	距離屏幕視口左上角距離，橫向爲 X，縱向爲 Y

 百度智能小程序_CSS（樣式）

CSS 結尾的樣式文件，類似於常規 CSS，用以渲染界面時進行樣式描述。

 百度智能小程序_JS（邏輯）

SWAN 智能小程序中，JS 文件是控制交互邏輯的動態語言。
如，在 SWAN 模板中書寫了以下代碼：

<view>{{ me }}</view>
<button bind:tap="setName">點擊變值</button>

在 JS 中可以對於視圖中的行爲進行監聽，並觸發界面的變化。

Page({
	setName: function() {
		this.setData({ me: "aaa" });
	}
})

Tips：

1、書寫 SWAN App 的邏輯層請使用 JavaScript 。

2、邏輯層將數據進行更新後，會觸發視圖更新。

3、在 app.js 中使用 App 方法、在頁面 JS 中使用 Page 方法，來進行頁面的邏輯管理。

4、可以在 SWAN 命名空間下，使用各種 API 端能力。

5、框架中不可使用 window, document 等 Web 能力。

 百度智能小程序_頁面路由

頁面棧

框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：

路由方式	頁面棧表現
初始化	新頁面入棧
打開新頁面	新頁面入棧
頁面重定向	當前頁面出棧，新頁面入棧
頁面返回	頁面不斷出棧，直到目標返回頁，新頁面入棧
Tab 切換	頁面全部出棧，只留下新的 Tab 頁面

getCurrentPages()

getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。

Tip：

 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。

路由方式

對於路由的觸發方式以及頁面生命週期函數如下：

路由方式	觸發時機	路由前頁面	路由後頁面
初始化	智能小程序打開的第一個頁面		onLoad, onShow
打開新頁面	調用 API swan.navigateTo 或使用組件	onHide	onLoad, onShow
頁面重定向	調用 API swan.redirectTo 或使用組件	onUnload	onLoad, onShow
頁面返回	調用 API swan.navigateBack 或使用組件 或用戶按左上角返回按鈕	onUnload	onShow
Tab 切換	調用 API swan.switchTab 或使用組件 或用戶切換 Tab		各種情況請參考下表
重啓動	調用 API swan.reLaunch 或使用組件	onUnload	onLoad, onShow

Tab 切換對應的生命週期（以 A、B 頁面爲 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面爲例）：

當前頁面	路由後頁面	觸發的生命週期（按順序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打開）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（從轉發進入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（從轉發進入）	B	D.onUnload(), B.onLoad(), B.onShow()

 

Tips：

1、navigateTo, redirectTo 只能打開非 tabBar 頁面。
2、switchTab 只能打開 tabBar 頁面。
3、reLaunch 可以打開任意頁面。
4、頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
5、調用頁面路由帶的參數可以在目標頁面的 onLoad 中獲取。

 

百度智能小程序_Page

Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。

object 參數說明：

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	監聽頁面加載的生命週期函數
onReady	Function	監聽頁面初次渲染完成的生命週期函數
onShow	Function	監聽頁面顯示的生命週期函數
onHide	Function	監聽頁面隱藏的生命週期函數
onUnload	Function	監聽頁面卸載的生命週期函數
onPullDownRefresh	Function	監聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數
onShareAppMessage	Function	用戶點擊右上角轉發
onError	Function	錯誤監聽函數
其他	不限	開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問

示例：

Page({
	data: {
		name: 'swan'
	},
	onLoad: function () {

	},
	onReady: function() {
    	// Do something when page ready.
	},
	onShow: function() {
		// Do something when page show.
	},
	onHide: function() {
		// Do something when page hide.
	},
	onUnload: function() {
		// Do something when page close.
	},
	onPullDownRefresh: function() {
		// Do something when pull down.
	},
	onReachBottom: function() {
		// Do something when page reach bottom.
	},
	onShareAppMessage: function () {
		// return custom share data when user share.
	}
});

 

智能小程序框架，會將同頁面的 .swan 文件與 .js 中定義的 Page 對象中的 data ，進行組合渲染。

百度智能小程序_組件

智能小程序中提供了豐富多樣的組件，開發者可以在 .swan 文件中，使用預設好的組件，拼裝完成自己的智能小程序的頁面。

如：使用 slider 組件

<slider min="200" max="1500" value="{{switchDuration}}"></slider>

即可在頁面上展示一個 slider 組件。

也可以在 slider 組件上綁定事件，在相應的組件事件發生時，得到回調與組件信息：

<slider min="200" max="1500" value="{{switchDuration}}" bind:change="changeSlider"></slider>

Page({
	changeSwitchDuration: function () {
	    console.log('changeSwitchDuration');
	}
});

 

百度智能小程序_API

智能小程序爲開發者提供了百度 App 提供的豐富的端能力。使用方式比較簡單，直接調用 SWAN 對象上的端能力方法，或者 Page 對象中 this 上掛載的方法。

如showToast：

swan.showToast({
	title: '我是標題'
});

也有很多掛載在 Page 對象與 SWAN 上的方法，如 createCanvasContext ，在 SWAN 對象與 Page 對象上均有。所以，你可以這樣用：

Page({
	data: {},
	onLoad: function () {
		this.createCanvasContext();
	}
});

也可以這樣用：

Page({
	data: {},
	onLoad: function () {
		swan.createCanvasContext();
	}
});

但是推薦使用第一種方法，可以在當前 Page 上精準查找，避免一些問題。具體方法的掛載，在 API 章節 會有詳細介紹。