支付寶小程序

一.創建

二.小程序開發

（一）.文件結構

（二）. 全局配置

1.app.json 全局配置

{
	"pages": [
	"pages/index/index",
	"pages/logs/index"
	],
	"window": {
		"defaultTitle": "支付寶接口功能演示",
		"backgroundColor": "#F5F5F9",
		"pullRefresh": false,
		"allowsBounceVertical": "YES",
		"titleBarColor": "#fff"
	},
	"tabBar": {
		"textColor": "#404040",
		"selectedColor": "#108ee9",
		"backgroundColor": "#F5F5F9",
		"items": [
			{
				"pagePath": "page/tabBar/component/index",
				"icon": "image/icon_component.png",
				"activeIcon": "image/icon_component_HL.png",
				"name": "組件"
			},
			{
				"pagePath": "page/tabBar/API/index",
				"icon": "image/icon_API.png",
				"activeIcon": "image/icon_API_HL.png",
				"name": "API"
			}
		]
	}
}

2.app.js 註冊小程序

①.onLaunch

②.onShareAppMessage(object: Object)

全局分享配置。當頁面未設置 page.onShareAppMessage 時，調用分享會執行全局的分享設置

③.globalData 全局數據

App() 中可以設置全局數據 globalData

小程序提供了全局的 getApp() 方法。

var app = getApp();
console.log(app.globalData); // 獲取 globalData
console.log(app.globalData.hasLogin)

④.注意

A.不要在 onShow 中進行 redirectTo 或navigateTo 等操作頁面棧的行爲。

B.不要在 onLaunch 裏調用 getCurrentPages()，因爲此時 page 還未生成。

App({
	onLaunch(options) {
		console.log('App Launch', options);
		console.log('getSystemInfoSync', my.getSystemInfoSync());
		console.log('SDKVersion', my.SDKVersion);
	},
	onShow() {
		console.log('App Show');
	},
	onHide() {
		console.log('App Hide');
	},
	globalData: {//全局數據
		hasLogin: false,
	},
});

⑤getCurrentPages  

getCurrentPages() 方法用於獲取當前頁面棧的實例，返回頁面數組棧。

3.ACSS 語法參考

ACSS 是一套樣式語言，用於描述 AXML 的組件樣式，決定 AXML 的組件的顯示效果。
爲適應廣大前端開發者，ACSS 和 CSS 規則完全一致，100% 可以用。同時爲更適合開發小程序，對 CSS 進行了擴充。
ACSS 支持 px，rpx，vh，vw 等單位。

 注意：

1.ACSS 文件裏的本地資源引用請使用絕對路徑的方式，不支持相對路徑引用。例如：

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

2.給頁面設高度100%爲什麼沒用？
添加一個絕對定位就可以了，不添加的話，會根據您的頁面的內容去自適應的。

三.Axml介紹

AXML 是小程序框架設計的一套標籤語言，用於描述小程序頁面的結構。 AXML 語法可分爲五個部分：數據綁定、條件渲染、列表渲染、模板、引用。

1.數據綁定：
	簡單：<view> {{ message }} </view>
	屬性綁定：<view id="item-{{id}}"> </view>
	關鍵字：需使用雙引號封裝（""）
		<checkbox checked="{{false}}"> </checkbox>
		注意: 不要直接寫 checked="false"，計算結果是一個字符串，轉成布爾值類型後代表真值。
	運算：<view hidden="{{flag ? true : false}}"> Hidden </view>
	
2.條件渲染
	<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
	<view a:elif="{{view == 'APP'}}"> APP </view>
	<view a:else> alipay </view>

3.列表渲染
	array: [{
		  message: 'foo',
		}, {
		  message: 'bar',
		}],
	<view a:for="{{array}}"  key="{{index}}">
	  {{index}}: {{item.message}}
	</view>
	
使用 a:for-item 可以指定數組當前元素的變量名。使用 a:for-index 可以指定數組當前下標的變量名。

	<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
	  {{idx}}: {{itemName.message}}
	</view>
	
4.模板

	A.定義模板
		使用 name 屬性申明模板名，然後在 <template/> 內定義代碼片段。
		<template name="msgItem">
		  <view>
			<text> {{index}}: {{msg}} </text>
			<text> Time: {{time}} </text>
		  </view>
		</template>
	B.使用模板
	使用 is 屬性，聲明需要的模板，然後將需要的 data 傳入，比如：
	<template is="msgItem" data="{{...item}}"/>
	item: {
      index: 0,
      msg: 'this is a template',
      time: '2019-04-19',
    },

5.引用
axml 提供兩種文件引用方式 import 和 include。
	A.import
	在 item.axml 中定義了一個叫 item 的 template。

		<!-- item.axml -->
	<template name="item">
	  <text>{{text}}</text>
	</template>
	在 index.axml 中引用 item.axml，就可以使用 item 模板。

	<import src="./item.axml"/>
	<template is="item" data="{{text: 'forbar'}}"/>
	
	B.include
	include 可以將目標文件除 <template/> 外整個代碼引入，相當於是拷貝到 include 位置。
	
	<!-- index.axml -->
	<include src="./header.axml"/>
	<view> body </view>
	<include src="./footer.axml"/>
	
	<!-- header.axml -->
	<view> header </view>
	
	<!-- footer.axml -->
	<view> footer </view>

注意：
	模板引入路徑支持相對路徑、絕對路徑，也支持從 node_modules 目錄載入第三方模塊。

	<import src="./a.axml"/> <!-- 相對路徑 -->
	<import src="/a.axml"/> <!-- 項目絕對路徑 -->
	<import src="third-party/x.axml"/> <!-- 第三方 npm 包路徑 -->

四.事件

事件對象可以攜帶額外信息，如 id、dataset、touches。

使用：

<view onTap="add"> {{count}} </view>
	Page({
	  add(event) {
		console.log(event);
	  },
	});

A.事件類型

<view id="outter" onTap="handleTap1">
  view1
  <view id="middle" catchTap="handleTap2">
    view2
    <view id="inner" onTap="handleTap3">
      view3
    </view>
  </view>
</view>
上面代碼中，點擊 view3 會先後觸發 handleTap3 和 handleTap2（因爲 tap 事件會冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父節點傳遞），點擊 view2 會觸發 handleTap2，點擊 view1 會觸發 handleTap1。

 

 B.事件對象

①target

dataset 在組件中可以定義數據，這些數據將會通過事件傳遞給邏輯層。 以 data- 開頭，由連字符 - 連接多個單詞，所有字母必須小寫(大寫字母自動轉成小寫字母)，如 data-element-type，最終會在 event.target.dataset中會將連字符轉成駝峯 elementType。

示例代碼：

<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event) {
    event.target.dataset.alphaBeta === 1; // - 會轉爲駝峯寫法
    event.target.dataset.alphabeta === 2; // 大寫字母會轉爲小寫字母
  },
});

五.小程序運行機制

B.緩存

C. 問題：

Q：小程序是否支持 cookie 和 session？ A：小程序不建議使用 cookie，不支持 session。推薦使用小程序緩存。

Q：使用了緩存 API 後，小程序的緩存什麼時候會被清掉？ A：使用了緩存 API 必須使用清除 API，否則緩存不會被清除掉。

D.兼容

my.canIUse(String) 實現兼容性判斷，詳見 接口說明 。

六.UI界面及開發API

組件及api

七.自定義組件

在components文件夾裏

創建自定義組件index :

	// /components/index/index.json
		{
		  "component": true
		}

	// /components/index/index.js
		Component({
			mixins: [], // minxin 方便複用代碼
			data: { x: 1 }, // 組件內部數據
			props: { y: 1 }, // 可給外部傳入的屬性添加默認值
			didMount(){}, // 生命週期函數
			didUpdate(){},
			didUnmount(){},
			methods: {   // 自定義方法
			handleTap() {
				this.setData({ x: this.data.x + 1}); // 可使用 setData 改變內部屬性
			}, 
			},
		})

	<!-- /components/index/index.axml -->
		<view>
		  HI, My Component
		</view>
		
使用：
pages/index/index.json
json:
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}
pages/index/index.axml
<my-component />

八.請求接口

my.request

九.頁面常見問題

1.官網提供

2.跳轉頁面時，怎麼清除 data 數據中的數據？

無法清除，可以在跳轉時覆蓋之前的 data 值

3.my.ix.generateImageFromCode 生成二維碼 這個碼沒有時效性，永久可以用

4.小程序有退出監聽嗎？

無法監聽退出