App

本文件已定稿，最后修改时间 20240715 20:32

一、定位

api链接：http://www.html5plus.org/doc/zh_cn/geolocation.html

方法：

getCurrentPosition：获取当前设备位置信息 进程不杀死还是会显示原来的地址信息
watchPosition：监听设备位置变化信息 实时监控，进程不杀死也会改变地址

clearWatch：关闭监听设备位置信息

<body>
    <h1>
        当前位置:<span id="maps"></span>
    </h1>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    	mui.init();
        mui.plusReady(function(){
            plus.geolocation.getCurrentPosition(function(data){
            	console.log(JSON.stringify(data));
        	}, function(){
            	mui.toast('获取失败');
            }, {
            	enableHighAccuracy: true, // 是否高精确度获取位置信息
        	});
        })
        
    </script>
</body>

二、通讯录

api链接：http://www.html5plus.org/doc/zh_cn/contacts.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
	<body>
		<ul class="mui-table-view" id='muiList'></ul>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
			    plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function(data){
					data.find( null, function(res){
						mui.each(res,function(index,item){
							muiList.innerHTML += `
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										<p>
											${item.displayName}
										</p>
										<p>
											${item.phoneNumbers[0].value}
										</p>
									</a>
								</li>
							`;
						});
						console.log(JSON.stringify(res))
					} );
				} );
			})
		</script>
	</body>
</html>

三、摄像头

api链接：https://www.html5plus.org/doc/zh_cn/camera.html

获取摄像头对象

plus.camera.getCamera( index );
进行拍照

对象.captureImage(successCB, errorCB, options);
路径转换问题

api链接：https://www.html5plus.org/doc/zh_cn/io.html

本地转换成平台的URL：plus.io.convertLocalFileSystemURL( url );

<body>
	<button id="btn">拍照</button>
	<hr />
	<img src="" id="oImg">
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function(){
			const oImg = document.getElementById('oImg');
			mui('body').on('tap','#btn',function(){
				const cmr = plus.camera.getCamera( 1 );
				cmr.captureImage(function(data){
					oImg.src = plus.io.convertLocalFileSystemURL( data );
				}, function(){
					mui.toast('拍照失败');
				});
			})
		})
	</script>
</body>

四、相册

api链接：https://www.html5plus.org/doc/zh_cn/gallery.html

<body>
	<button id="btn">上传</button>
	<hr />
	<div id="imgList"></div>
	<img src="" id="oImg">
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init();
		mui.plusReady(function(){
			const oImg = document.getElementById('oImg');
			const imgList = document.getElementById('imgList');
			mui('body').on('tap','#btn',function(){
				plus.gallery.pick(function(data){
					// oImg.src = data;
					const arrFiles = data.files;
					mui.each(arrFiles,function(index,item){
						const oImg = document.createElement('img');
						oImg.src = item;
						imgList.appendChild(oImg);
					})
				}, function(){
					mui.toast('上传失败')
				}, {
					multiple: true // 可以上传多张
				});
			})
		})
	</script>
</body>

五、分享

api链接：https://www.html5plus.org/doc/zh_cn/share.html

获取分享服务

plus.share.getServices(successCB, errorCB);
发送分享

obj.send(msg, successCB, errorCB);

obj 就是分享服务的对象，并且是区分微信好友还是微信朋友圈的对象

“WXSceneSession”分享到微信的“我的好友”

“WXSceneTimeline”分享到微信的“朋友圈”

<body>
<button id='share'> 分享 </button>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
	
	//合并后服务对象
	let shares = {};
	
	plus.share.getServices(function(data){
		//获取到分享服务
		if( data ){
			for(let i=0;i<data.length;i++){
				let t = data[i];
				shares[t.id] = t;
			}
		}
	}, function(){
		mui.toast('获取分享服务失败~~~~');
	});
	
	
	mui('body').on('tap','#share',function(){
		const ids = [
			{
				id:'weixin',
				ex:'WXSceneSession'
			},
			{
				id:'weixin',
				ex:'WXSceneTimeline'
			},
			{
				id:'qq'
			},
			{
				id:'sinaweibo'
			}
		]
		const aBtns = [
			{title:'分享到微信好友'},
			{title:'分享到微信朋友圈'},
			{title:'分享到QQ'},
			{title:'分享到新浪微博'},
		];
		plus.nativeUI.actionSheet({
			cancel:'取消分享',
			buttons:aBtns
		}, function(e){
			const i = e.index;
			//点击了某某分享
			if( i > 0 ){
				const s_id = ids[ i - 1 ].id;
				const share = shares[s_id];
				const msg = {
					title:'这是一个分享的标题',
					content:'这是分享的内容',
					thumbs:['icons1.png'],
					href:'http://m.xuexiluxian.cn/',
					extra:{
						scene:ids[ i - 1 ].ex
					}
				};
				share.send(msg, function(){
					mui.toast('分享成功!!');
				}, function(){
					mui.toast('分享失败~~');
				});
			}
		});
	})
})
</script>	
</body>

六、支付

支付所需要的东西
1. 支付方式【微信】【支付宝】
2. 支付的金额
3. 订单的标题
4. 订单号
5. 订单的有效期
6. 支付完成跳转的链接

支付的完整流程

立即购买

ajax({
	url:'xxxxx',
	data:{   			  ====>前端给后端传递的数据
		用户
		订单的金额
		订单的商品系列
	},
	success:function(data){ ===》后端给前端返回的数据
		if( data.xxx ){
			data是一个对象，订单号
			跳转到确认订单页面
		}
	}
})

确认订单——-点击提交订单——-选择支付方式（支付之前）

ajax({
	data:{   -----前端给后端传递数据
		appid:'已经之前准备好的'
		订单号
		选择了哪种支付方式
	},
	success:function(data){

		1. 后端会返回一个true，代表可以支付了
		2. 还会返回一个标示（哪种支付方式）
					
		if( 后端给前端传递的哪种支付方式 === 用户点击的哪种支付方式  ){
						
			请求支付操作（发起支付） 【详细见下面】
						
		}
	}
})

对接官方支付

把一些得到的数据，传递给支付宝|微信支付官方

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>


<button id='goPayment'> 去支付 </button>

<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
	
	mui('body').on('tap','#goPayment',function(){
		
		mui.openWindow({
			url:'payment.html',
			id:'payment'
		})
		
	})
	
})
</script>
</body>
</html>

payment.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
</head>
<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">选择支付方式</h1>
</header>

<div class="mui-content">
	<h2>支付金额</h2>
	<input type="tel" value="0.01" id='price'>元
	<div id='payList'>
		<input type="button" value="微信支付" class='pay' id='wxpay' >
		<input type="button" value="支付宝支付" class='pay' id='alipay'>
	</div>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right">
				支付方式：<span id='channel'></span>
			</a>
		</li>
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right">
				支付金额：<span id='total_fee'></span>
			</a>
		</li>
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right">
				订单号：<span id='bill_no'></span>
			</a>
		</li>
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right">
				支付状态：<span id='status'></span>
			</a>
		</li>
	</ul>
</div>



<script src="js/mui.js"></script>
<script src='./js/payment.js'></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
	
	const price = document.getElementById('price'),
	const total_fee = document.getElementById('total_fee'),
	const channel = document.getElementById('channel'),
	const bill_no = document.getElementById('bill_no'),
	const status = document.getElementById('status');
		
	mui('#payList').on('tap','.pay',function(){
		
		const channel_id = null;
		switch(this.id){
			case 'alipay':
				channel_id = 'ALI_APP';
				break;
			case 'wxpay':
				channel_id = 'WX_APP';
				break;
			default:
				break;
		}
		
		//构建给后端数据的数据结构
		fBeecloundPay( channel_id );
		
		//支付金额
		total_fee.innerHTML = price.value;
		//支付方式
		channel.innerHTML = channel_id;
		//订单号
		bill_no.innerHTML = payment.orderNumber();
		
	})
	
	function fBeecloundPay(channelId){
		/*
			构建支付参数
			app_id    		: APPID
			channel   		: 支付方式
			title     		: 某个商品的标题
			total_fee 		: 支付金额
			bill_no   		: 订单号
			bill_timeout 	: 过期时间
		*/
		const payData = {
			app_id:'44f01a13-965f-4b27-ba9f-da678b47f3f5',
			channel : channelId,
			title:'买了个鸡',
			total_fee:price.value * 100,
			bill_no:payment.orderNumber(),
			bill_timeout:300
		}
		
		//支付过程
		payment.payReq(payData,function(){
			//支付成功：状态
			status.innerHTML = '支付成功';
		},function(){
			//支付失败：状态
			status.innerHTML = '支付失败';
		})
	}
});
</script>
</body>
</html>

payment.js

let payment = {};
//所有支付通道信息[支付宝和微信]
let channels = null;
//获取支付通道
plus.payment.getChannels(function(data){
	channels = data;
}, function(){
	mui.toast('获取支付通道失败~~');
});

//生成订单号 ：函数
payment.orderNumber = function(){
	
	const random =  Math.floor( Math.random() * 10000000000 + 10000000000 );
	return random + '1';
}

//支付过程的回调
payment.payReq = function(payData,successCb,errorCb){
	doPay(payData,successCb,errorCb);
}

//发送===》支付请求
function doPay(payData,successCb,errorCb){
	mui.ajax('https://apisz.beecloud.cn/2/rest/app/bill',{
		data:JSON.stringify(payData),
		type:'post',
		dataType:'json',
		contentType:'application/json',
		success:function(data){//后端给我们返回的数据
			let paySrc = '';
			//请求接口没问题，可以发送支付操作了
			if( data.result_code == 0 ){
				const payChannel = fGetPayChannel(payData.channel);
				//如果拿到了当前的支付通道，那么就可以发起支付请求了
				if(payChannel){
					if( payChannel.id === 'alipay' ){
						//支付宝支付
						paySrc = data.order_string;
					}else{
						//其他支付
						const staement = {
							appid : data.app_id,
							noncestr : data.nonce_str,
							package : data.package,
							partnerid : data.partner_id,
							prepayid : data.prepay_id,
							timestamp : data.timestamp,
							sign:data.pay_sign
						};
						paySrc = JSON.stringify(staement);
					}
					//请求支付操作
					plus.payment.request(payChannel, paySrc, successCb,errorCb);
				}
			}
		}
	})
}

//获取到用户点击的哪种支付方式的通道
function fGetPayChannel(cb_channel){
	
	let cb_channel_id = '';
	switch(cb_channel){
		case 'ALI_APP':
			cb_channel_id = 'alipay';
			break;
		case 'WX_APP':
			cb_channel_id = 'wxpay';
			break;
	}
	
	for(let i in channels){
		//和用户点击支付方式 与 获取的所有支付通道，进行对比，如果相当就可以返回
		if(  channels[i].id == cb_channel_id){
			//当前匹配用户点击的支付方式的通道
			return  channels[i];
		}
	}
	return null;
	
}

七、第三方登录

触摸某一个登录方式（加入事件）
唤醒第三方登录（ html5plus的api ）
登录的第三方账号的信息（用户信息）

token
名称
头像
…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
	

<button class='oauth' id='weixin'> 微信登录 </button>
<button class='oauth' id='qq'> QQ登录 </button>
<button class='oauth' id='sinaweibo'> 微博登录 </button>



<h3 id='userName'></h3>
<img src="" alt="" id='userImg'>


<button id='out'> 退出登录 </button>


<script src="js/mui.min.js"></script>
<script src='js/oauth.js'></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
	let id = '';
	//登录操作
	mui('body').on('tap','.oauth',function(){
		//获取id
		id = this.id;
		//获得到对应的对象
		const obj = oauth.fFilterOauth(id);
		//请求登录操作
		obj.login(function(){
			//用户信息
			obj.getUserInfo(function(data){
				const userInfo = data.target.userInfo;
				document.getElementById('userName').innerHTML = userInfo.nickname;
				document.getElementById('userImg').src = userInfo.headimgurl || userInfo.profile_image_url;
			},function(){
				mui.toast('获取用户信息失败');
			});
			//消息提醒
			mui.toast('登录成功');
		},function(){
			mui.toast('登录失败');
		});
	})
	//退出登录
	mui('body').on('tap','#out',function(){
		const obj = oauth.fFilterOauth(id);
		obj.logout(function(){
			document.getElementById('userName').innerHTML = 'xxxxx';
			mui.toast('退出成功');
		},function(){
			mui.toast('退出登录失败,重新再试');
		});
	})
})
</script>
</body>
</html>

let oauth = {};
let oauthList = null;

plus.oauth.getServices( function(data){
	oauthList = data;
}, function(){
	mui.toast('获取列表失败');
});

//获取的列表和当前点击的做对比
oauth.fFilterOauth = function( id ){
	for( let i in oauthList){
		if( oauthList[i].id == id ){
			return oauthList[i]
		}
	}
	return null;
}

一、定位

二、通讯录

三、摄像头

四、相册

五、分享

六、支付

支付所需要的东西

支付的完整流程

七、第三方登录