支付宝小程序

一.创建

二.小程序开发

（一）.文件结构

（二）. 全局配置

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.小程序有退出监听吗？

无法监听退出

5.如何获取支付宝小程序 appid

onLaunch(options) {

// 第一次打开

console.log(options);

this.globalData.appId= options.referrerInfo.appId;

console.log(this.globalData)

}