mui h5+文档最详版
mui h5+文档最详版
- 界面初始化
- H5plus初始化
- 创建子页面
- 打开界面
- 参数传递
- 控制页面load显示
- 关闭界面
- 底部导航切换界面
- 自定义事件
- 页面预加载
- 消息框
- 原生模式ActionSheet
- 下拉刷新
- 上拉加载
- 上拉下拉整合
- 手势
- 遮罩
- 滑动导航选择
- 图片轮播
- 自定义导航
- Ajax-get请求
- Ajax-post请求
- 照相机
- 访问相册
- 蜂鸣提示音
- 手机震动
- 弹出菜单
- 设备信息
- 手机信息
- 发送短信
- 拨打电话
- 发送邮件
- 本地存储
- 图片上传
- 地理位置
- 设置IOS状态栏
- 手机通讯录
- 启动页设置
- PHP后台搭建
- JSON转换
- 隐藏本页面中滚动条
- 首次启动欢迎页
- 数据库增删改查和接口
- 推送
- 浏览器打开新页面
- PDF浏览
- 自定义下拉刷新
- 即时聊天
- 双击安卓返回键退出
- QQ登录
界面初始化
初始化就是把一切程序设为默认状态，把没准备的准备好。
mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。
H5plus初始化
在我们APP的开发中，如果我们用到了H5+的一些API或者接口，我们需要初始化另外一个函数，类属于 JS 中的window.onload 或者 window.ready
Mui.plusReady(); 所有涉及到H5+的东西，建议写到这个里面
mui.plusReady(function(){
var w = plus.webview.currentWebview();
console.log(w);
});
创建子页面
为防止APP运行过程中内容滚动出现卡顿的现象，所以部分页面我们采用头部和内容分离的形式进行实现，比如头部导航和底部导航
mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度，默认为100%
height:subpage-height,//子页面高度，默认为100%
......
},
extras:{
name:'zxd学院'//子页面通过plus.webview.currentWebview().name能拿到这个值
}//额外扩展参数
}]
});
打开界面
//打开新窗口
mui.openWindow({
url:'target.html', //需要打开页面的url地址
id:'target', //需要打开页面的url页面id
styles:{
top:'0px',//新页面顶部位置
bottom:'0px',//新页面底部位置
// width:newpage-width,//新页面宽度，默认为100%
// height:newpage-height,//新页面高度，默认为100% ......
},
extras:{
name:'aries',
age:'18',
// .....//自定义扩展参数，可以用来处理页面间传值
},show:{ //控制打开页面的类型
autoShow:true,
// //页面loaded事件发生后自动显示，默认为true
aniShow:'zoom-fade-out',//页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下
duration:'1000'//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}, waiting:{ // 控制 弹出转圈框的信息
autoShow:true,//自动显示等待框，默认为true
title:'东翌学院...',//等待对话框上显示的提示内容
options:{
width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度
height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ......
}
}
});
参数传递
mui.plusReady(function(){
var self = plus.webview.currentWebview(); //获得当前页面的对象
var name = self.name; //name 和 age 为传递的参数的键
var age = self.age;
console.log(name);
console.log(age);
// 获得首页 专用的
var index = plus.webview.getLaunchWebview();
// 获得指定页面的对象 注意，要确保你的这个页面是存在的， 就是打开过的
var target = plus.webview.getWebviewById('目标页面的id');
});
控制页面load显示
show:{ // openwindow 函数内设置
autoShow:false
}
// 目标页面
//从服务器获取数据 ....
这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
关闭界面
1，点击包含.mui-action-back类的控件
2，在页面上，向右快速滑动
3， Android手机按下back按键
mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听:
mui.init({
keyEventBind: {
backbutton: false //关闭back按键监听
}
});
底部导航切换界面
HTML部分:
JavaScript部分:
//mui初始化
mui.init();
var subpages = ['a.html', 'b.html', 'c.html'];
var subpage_style = {
top:'0px',
bottom: '51px'
};
var aniShow = {};
//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}else{
temp[subpages[i]] = "true";
mui.extend(aniShow,temp);
}
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//显示目标选项卡
//若为iOS平台或非首次显示，则直接显示
if(mui.os.ios||aniShow[targetTab]){
plus.webview.show(targetTab);
}else{
//否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(aniShow,temp);
plus.webview.show(targetTab,"fade-in",300);
}
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
自定义事件
监听自定义事件 - 目标页
window.addEventListener('shijian',function(event){
//通过event.detail可获得传递过来的参数内容
....
var name = event.detail.namel
console.log(name);
shijian();
})
触发自定义事件 - 本页
//首先获得目标页面的对象
var targetPage = plus.webview.getWebviewById('目标页面id');
mui.fire(targetPage,'shijian',{
//自定义事件参数
name:'dongyixueyuan'
});
页面预加载
所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。
方式一：通过mui.init方法中的preloadPages参数进行配置
mui.init({ // 可同时加载一个或者多个界面
preloadPages:[ //加载一个界面
{
url:'a.html',
id:'a',
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
},{ // 可加载另外一个界面，不需要可直接删除
url:'b.html',
id:'b',
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
]
});
方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法；
mui.plusReady(function(){
var productView = mui.preload({
url: 'list.html',
id: 'list',
});
console.log(productView); //获得预加载界面的对象
});
消息框
警告消息框
mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){
alert('你刚关闭了警告框');
});
消息提示框
var btnArray = ['是','否'];
mui.confirm('东翌学院是专业跨平台APP培训学院，赞？','Hello 东翌学院',btnArray,function(e){
if(e.index==0){
alert('点击了- 是');
//自己的逻辑
}else{
alert('点击了- 否');
}
});
输入对话框
var btnArray = ['确定','取消'];
mui.prompt('请输入你对东翌学院的评语：','内容好','东翌学院',btnArray,function(e){
if(e.index==0){
alert('点击了 - 确认');
var value = e.value; // value 为输入的内容
}else{
alert('点击了 - 取消');
}
});
自动消息对话框
mui.toast('显示内容');
日期选择框
//js里的月份 是从0月开始的，也就是说，js中的0月是我们1月
var dDate=new Date(); //默认显示的时间
dDate.setFullYear(2015,5,30);
var minDate=new Date(); //可选择的最小时间
minDate.setFullYear(2010,0,1);
var maxDate=new Date(); //课选择的最大的时间
maxDate.setFullYear(2016,11,31);
plus.nativeUI.pickDate( function(e) {
var d=e.date;
alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());
},function(e){
alert('您没有选择日期');
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
时间选择框
var dTime=new Date();
dTime.setHours(20,0); //设置默认时间
plus.nativeUI.pickTime(function(e){
var d=e.date;
alert("您选择的时间是："+d.getHours()+":"+d.getMinutes());
},function (e){
alert('您没有选择时间');
},{title:"请选择时间",is24Hour:true,time:dTime});
原生模式ActionSheet
var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮 1 2 3
plus.nativeUI.actionSheet( {
title:"分享到",
cancel:"取消", // 0
buttons:btnArray
},
function(e){
var index = e.index; //
alert(index);
switch (index){
case 1:
//写自己的逻辑
break;
case 2:
break;
}
} );
下拉刷新
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； 通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但经过封装，可使用一套代码实现下拉刷新。
第一步: 创建子页面，因为拖动的其实是个子页面的整体
mui.init({
subpages:[{
url:pullrefresh-subpage-url,//下拉刷新内容页面地址
id:pullrefresh-subpage-id,//内容页面标志
styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px； .....//其它参数定义
}
}]
});
第二步:内容页面需按照如下DOM结构构建
- 1
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
} }
});
第四步:设置执行函数
function fn() {
//业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //这行代码会隐藏掉 正在加载... 容器
}
上拉加载
第一步，第二步 和下拉刷新的一样
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
mui.init({
pullRefresh : {
container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
第四步:设置执行函数
function fn() {
//业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，true表示没有更多数据了，
两个注意事项： //1、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 //
2、注意this的作用域，若存在匿名函数，需将this复制后使用
var _this = this;
_this.endPullupToRefresh(true|false);
}
上拉下拉整合
第一步，第二步和下拉刷新一样
第三步:在mui.init()内同时设置上拉加载和下拉刷新
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: downFn // 下拉执行函数
},
up: {
contentrefresh: '正在加载...',
callback: upFn // 上拉执行函数
}
}
});
注意: 给获取元素加onclick点击事件不行，需要加addEventListener自定义事件
手势
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：
分类 参数描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
}
});
注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关
你要监听的对象.addEventListener("swipeleft",function(){
console.log("你正在向左滑动");
});
遮罩
在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。
遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：
var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩
mask.close();//关闭遮罩
遮罩css样式: .mui-backdrop
滑动导航选择
mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件，这些组件都用到了mui框架的slide插件，有较多共同点。首先，Dom内容构造基本相同，都必须有一个.mui-slider的父容器；其次，当拖动切换显示内容时，均会触发slide事件（可拖动式选项卡在点击选项卡标题时，也会触发slide事件），通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
HTML部分:
JavaScript部分:
var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1&&!item2Show) {
//切换到第二个选项卡
//根据具体业务，动态获得第二个选项卡内容；
var content = 'er';
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位，下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 2&&!item3Show) {
//切换到第三个选项卡
//根据具体业务，动态获得第三个选项卡内容；
var content = 'san';
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位，下次直接显示
item3Show = true;
}
});
图片轮播
1, 支持循环
HTML部分:
2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容
HTML部分:
JavaScript部分相同:
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
alert("你正在看第"+(event.detail.slideNumber+1)+"张图片");
});
注意:如果ajax获得图片后，需要在写入图片以后，需要从新调用一下
gallery.slider();
自定义导航
第一步: 将一下代码写在header(mHeader) 和 content(mBody) 之间
首页
科技
娱乐
财经
北京
军事
社会
汽车
视频
美女
第二步: 引入dongyi_nav.css 和dongyi_nav.js
第三步: 执行函数
dongyi_nav(function(index,data){ // index 为点击索引 data为点击导航的文本内容
console.log(index);
console.log(data);
});
Ajax-get请求
// get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0
mui.get('接口地址',{ //请求接口地址
state:'index' // 参数 键 ：值
num:'0'
},function(data){ // data为服务器端返回数据
//获得服务器响应 ...
console.log(data);
},'json'
);
Ajax-post请求
// post测试请求地址 http://test.dongyixueyuan.com/link_app/post
mui.post('接口地址',{ //请求接口地址
state:'index', // 参数 键 ：值
num:'0'
},
function(data){ //data为服务器端返回数据
//自己的逻辑
},'json'
);
照相机
var cmr = plus.camera.getCamera();
cmr.captureImage( function ( p ) {
//成功
plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
var img_name = entry.name;//获得图片名称
var img_path = entry.toLocalURL();//获得图片路径
}, function ( e ) {
console.log( "读取拍照文件错误："+e.message );
} );
}, function ( e ) {
console.log( "失败："+e.message );
}, {filename:'_doc/camera/',index:1} ); // “_doc/camera/“ 为保存文件名
访问相册
plus.gallery.pick( function(path){
img.src = path;//获得图片路径
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
蜂鸣提示音
switch ( plus.os.name ) { //判断设备类型
case "iOS":
if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone
plus.device.beep();
console.log = "设备蜂鸣中...";
} else {
console.log = "此设备不支持蜂鸣";
}
break;
default:
plus.device.beep();
console.log = "设备蜂鸣中...";
break;
}
手机震动
switch ( plus.os.name ) { //判断设备类型
case "iOS":
if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone
plus.device.vibrate();
console.log("设备振动中...");
} else {
console.log("此设备不支持振动");
}
break;
default:
plus.device.vibrate();
console.log("设备振动中...");
break;
}
弹出菜单
弹出菜单的原理主要是通过锚点进行的，如果需要多个弹出菜单，可以在a标签内设置锚点，对应相应的div的id即可
打开弹出菜单 // href 定义锚点
设备信息
plus.device.model //设备型号
plus.device.vendor //设备的生产厂商
plus.device.imei // IMEI 设备的国际移动设备身份码
plus.device.uuid // UUID 设备的唯一标识
// IMSI 设备的国际移动用户识别码
var str = '';
for ( i=0; i手机信息
plus.os.name //名称
plus.os.version //版本
plus.os.language //语言
plus.os.vendor //厂商
//网络类型
var types = {};
types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
var network = types[plus.networkinfo.getCurrentType()];
发送短信
发送短信
var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
msg.to = ['13800138000', '13800138001'];
msg.body = '东翌学院http://www.dongyixueyuan.com';
plus.messaging.sendMessage( msg );
拨打电话
拨打电话
发送邮件
发送邮件到东翌学院
本地存储
//设置
plus.storage.setItem('键','值'); -> plus.storage.setItem('name','dongyixueyuan');
//查询
plus.storage.getItem('键'); -> var name = plus.storage.getItem('name');
//删除
plus.storage.removeItem('键'); -> plus.storage.removeItem('name');
//全部清除
plus.storage.clear();
//HTML5自带 - 设置
localStorage.setItem('键','值'); -> localStorage.setItem('name','dongyixueyuan');
//HTML5自带 - 查询
localStorage.getItem('键'); -> var name = localStorage.setItem('name');
//HTML5自带 - 删除
localStorage.removeItem('键'); -> localStorage.removeItem('name');
图片上传
//初始上传地址
var server="http://tongle.dongyixueyuan.com/upload_file.php"; // 学员测试使用
var files=[]; //图片存放的数组 可以上传一个，或者多个图片
//上传图片
function upload_img(p){
//又初始化了一下文件数组 为了支持我的单个上传,如果你要一次上传多个，就不要在写这一行了
//注意
files=[];
var n=p.substr(p.lastIndexOf('/')+1);
files.push({name:"uploadkey",path:p});
//开始上传
start_upload();
}
//开始上传
function start_upload(){
if(files.length<=0){
plus.nativeUI.alert("没有添加上传文件！");
return;
}
//原生的转圈等待框
var wt=plus.nativeUI.showWaiting();
var task=plus.uploader.createUpload(server,
{method:"POST"},
function(t,status){ //上传完成
alert(status);
if(status==200){
//资源
var responseText = t.responseText;
//转换成json
var json = eval('(' + responseText + ')');
//上传文件的信息
var files = json.files;
//上传成功以后的保存路径
var img_url = files.uploadkey.url;
//ajax 写入数据库
//关闭转圈等待框
wt.close();
}else{
console.log("上传失败："+status);
//关闭原生的转圈等待框
wt.close();
}
});
task.addData("client","");
task.addData("uid",getUid());
for(var i=0;i地理位置
//直接获取地理位置
plus.geolocation.getCurrentPosition( geoInfo, function ( e ) {
alert( "获取位置信息失败："+e.message );
} );
//监听地理位置
var watchId; //开关 函数外层定义
if ( watchId ) {
return;
}
watchId = plus.geolocation.watchPosition( function ( p ) {
alert( "监听位置变化信息:" );
geoInfo( p );
}, function ( e ) {
alert( "监听位置变化信息失败："+e.message );
});
//停止监听地理位置
if ( watchId ) {
alert( "停止监听位置变化信息" );
plus.geolocation.clearWatch( watchId );
watchId = null;
}
//获得具体地理位置
//获取设备位置信息
function geoInfo(position){
var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
var codns = position.coords;//获取地理坐标信息；
var lat = codns.latitude;//获取到当前位置的纬度；
var longt = codns.longitude;//获取到当前位置的经度
var alt = codns.altitude;//获取到当前位置的海拔信息；
var accu = codns.accuracy;//地理坐标信息精确度信息；
var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度；
var head = codns.heading;//获取设备的移动方向；
var sped = codns.speed;//获取设备的移动速度；
//百度地图申请地址
// http://lbsyun.baidu.com/apiconsole/key
// http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&location=纬度（Latitude）,经度（Longitude）
// http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location=40.065639,116.419413
//详细地址
//http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=40.065639,116.419413
var baidu_map = "http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location="+lat+','+longt;
mui.get(baidu_map,{ //请求的地址
},
function(data){ //服务器返回响应，根据响应结果，分析是否登录成功； ...
var result = data['result'].addressComponent;
// 国家
var country = result['country'];
//城市
var city = result['city'];;
//地址
var address = result['province'] + result['district'] + result['street'];
//data 有很多信息，大家如果需要可以for in出来看下
},'json'
);
}
设置IOS状态栏
mui.plusReady(function(){
if(mui.os.ios){
//UIStatusBarStyleDefault //字体深色
//UIStatusBarStyleBlackOpaque //字体浅色
plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque');
plus.navigator.setStatusBarBackground("#007aff"); //背景颜色
}
})
手机通讯录
mui.plusReady(function(){
//访问手机通讯录 plus.contacts.ADDRESSBOOK_PHONE
//访问SIM卡通讯录 plus.contacts.ADDRESSBOOK_SIM
plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE,function(addressbook){
addressbook.find(null,function (contacts){
for(var a in contacts){
//这里是安卓手机端的获取方式 ios的不太一样，如果需要这块代码可以联系老师获得
var user = contacts[a].displayName; //联系人
var phone = contacts[a].phoneNumbers[0].value; //手机号码
}
},function ( e ) {alert( "Find contact error: " +e.message );},{multi:true});
});
});
启动页设置
设置手动关闭启动页:
manifest.json -> plus -> autoclose 改为 false
关闭启动页:
plus.navigator.closeSplashscreen();
PHP后台搭建
在开发工具内下载 AppServ 和 ThinkPHP,
AppServ是本地服务器，ThinkPHP是后台框架
ThinkPHP采用单入口模式 index -> 控制器 -> 方法
index.php 内书写如下:
define("APP_NAME",'WEB'); //站点名称
define("APP_PATH",'./WEB/'); //站点路径
define("APP_DEBUG",true);//开启调试模式
require("./ThinkPHP/ThinkPHP.php");// 引入框架文件
JSON转换
JSON.parse()和JSON.stringify()
1.parse 用于从一个字符串中解析出json 对象。例如
var str='{"name":"zxd学院","age":"23"}'
经 JSON.parse(str) 得到：
Object: age:"23"
name:"zxd学院"
ps:单引号写在{}外，每个属性都必须双引号，否则会抛出异常
2.stringify用于从一个对象解析出字符串，例如
var a={a:1,b:2}
经 JSON.stringify(a)得到：
'{"a":1,"b":2}'
隐藏本页面中滚动条
var self = plus.webview.currentWebview();
self.setStyle({
bounce: 'none', //禁止弹动
scrollIndicator: 'none' //隐藏滚动条
});
首次启动欢迎页
首先引入dongyi_welcome.css 和 dongyi_welcome.js 文件
,
dongyi_welcome({
preLoadUrl:'main.html',//预加载页面url
preLoadId:'main',//预加载页面id
});
数据库增删改查和接口
Class UserAction extends Action {
/**
* 添加数据
*/
public function add(){
$data['phone'] = '1380013800';
$data['name'] = 'yidong';
// M = model M('你要操作的数据表')->方法
$re = M('user')->add($data);
//输出
echo $re;
// 添加数据返回值 是数据的id
}
/**
* 修改数据
*/
public function mod(){
$data['phone'] = '130013000';
$id = 1;
$re = M('user')->where("`id`='$id'")->save($data);
echo $re;
//修改数据 返回值为1是成功 0为失败
}
/**
* 删除数据
*/
public function del(){
$id = '2';
$re = M('user')->where("`id`='$id'")->delete();
echo $re;
// 删除 返回值为1也是成功 0 为失败
}
/**
* 查询数据
*/
public function select(){
//单条带条件查询
$id = '1';
$arr1 = M('user')->where("`id`='$id'")->find();
// dump($arr1);
// 多条不带条件查询 查询数据库内所有的数据 不建议使用
$arr2 = M('user')->select();
// dump($arr2);
// 多条带条件查询
$phone = '1380013800';
$arr3 = M('user')->where("`phone`='$phone'")->select();
// dump($arr3);
// 排序
// asc 正序
// desc 倒序
$arr4 = M('user')->where("`phone`='$phone'")->order("id desc")->select();
// dump($arr4);
// 分页 limit
// limit(参数1); 一个参数的情况下 拿多少条数据
// limit(参数1,参数2); 二个参数的情况下 第一个参数是从多少条开始拿，第二个参数还是拿多少条
// $arr5 = M('user')->order("id desc")->limit(2)->select();
// dump($arr5);
$arr6 = M('user')->order("id desc")->limit(2,2)->select();
// dump($arr6);
//返回json数据 给我们APP
echo json_encode($arr6);
// 接口地址
// http://127.0.0.1/www/xianshang14/index.php/User/select
}
}
推送
-
注册个推，获得APPKEY,APPID,MASTERSECRET*
-
推送信息必须打包安装手机后才能使用，主要是通过client_id来进行对每个用户进行推送，首先我们需要在数据库的用户表内添加一个client_id 的字段(在用户注册的时候或者在每次登录的时候存入用户的新client_id,保证推送的有效性)，为存放我们用户的client_id，比如这里是个商城，你购买完商品，系统会推送一条信息给你，你只需要告诉程序，你要推送人的手机号码，标题，内容即可(如需要点击信息到达订单页面，需要用透传来实现)，服务器获得手机号码以后会在数据库内查找，并获得该用户的client_id，然后实现推送。这里要根据自己的情况来写逻辑，比如东翌课堂的分类，前端，后端，数据库等分类，如果我有一个课程上线，我可以推送给这些对某一类感兴趣的学员。当然更多的逻辑需要你自己来写，群发我们可以理解成，循环发送多个单条的(*单条发送已经测试没问题，群发没测试，大家可以自己测试一下，有问题随时反馈过来)。
-
由于推送信息的多样性，本次封装仅对本APP注册用户进行推送，如需要全员推送，可直接使用个推官网创建信息的方式直接推送。
推送步骤：
1, 右上角下载 推送包
2，single.php (推送单个普通推送/可透传，点击信息可打开APP,*透传可写逻辑,透传需要) (透传格式:{“path”:“course”,id:“2”}
openPath.php (推送打开页面信息，点击信息可在浏览器打开你传入的URL)
download.php (推送下载信息，点击信息可下载你传入URL的文件)
3，简单粗暴的设置一下这3个文件内的14行APPKEY,15行APPID,16行MASTERSECRET为你在个推得到的APPKEY,APPID,MASTERSECRET
如下我只写了一个实例，单条普通信息推送
PHP端代码:
在PHP Action文件夹内建立了一个 PushAction.class.php 的文件
Class PushAction extends Action {
//单个信息推送 透传
public function single(){
$title = $_GET['title_data'];
$content = $_GET['content_data'];
$phone = $_GET['phone_data'];
$pass = $_GET['pass_data'];
if($title == '' || $content == '' || $phone == ''){
exit;
}
$user = M('user')->where("`phone`='$phone'")->find();
$cid = $user['client_id'];
$url = 'http://' .$_SERVER['HTTP_HOST'] . . '/Push/single?title='.$title.'&content='.$content.'&cid='.$cid.'&pass='.$pass;
$html = file_get_contents($url);
echo $html;
}
}
//APP端代码 我在index文件中
// 监听在线消息事件
plus.push.addEventListener( "receive", function( msg ) {
if ( msg.aps ) { // Apple APNS message
// alert( "接收到在线APNS消息：" );
} else {
// alert( "接收到在线透传消息：" );
}
var login_phone = localStorage.getItem('你存入的登录信息');
var content = msg.content;
var json = eval('('+content+')');
var path = json.path;
var id = json.id;
//订单
if(path == 'order'){
if(login_phone){
dui.jump('./Home/order.html','order');
}
}else if(path == 'course'){
localStorage.setItem('dongyikecheng_cid',id);
dui.jump('./Course/course_detail.html','course_detail');
}else if(path == 'message'){
if(login_phone){
if(id == 'system'){
dui.jump('./Message/system_message.html','system_message');
}else{
dui.jump('./Message/chat_message.html','chat_message');
}
}
}
}, false );
以上PHP代码可以配合后台，给特定人群推送，逻辑需要大家实现了，因为每个APP的逻辑都不一样
浏览器打开新页面
plus.runtime.openURL( url );
PDF浏览
IOS端内可以直接打开
安卓端方式：
1，调用本地第三方浏览器打开
mui.plusReady(function(){
plus.runtime.openFile( "./file/node_js.pdf" );
});
2，引入第三方js类打开
自定义下拉刷新
// 双webview 写到父页面里面
.mui-pull-top-pocket{
top:100px !important;
position: absolute;
}
.mui-pull-caption {
background: red;;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 144px;
height: 31px;
font-size: 0px;
}
/*下拉刷新圆形进度条的大小和样式*/
.mui-spinner {
width: 32px;
height: 32px;
}
.mui-spinner:after {
background: red;
}
/*下拉刷新的箭头颜色*/
.mui-icon-pulldown {
color: #FF058B;
}
即时聊天
//即时聊天采用野狗无后端模式，野狗: https://www.wilddog.com/
//引入文件
//写入数据
// new Wilddog message 为自己定义的一个表或者空间，用于放我们的聊天记录
var wd = new Wilddog('https://dongyixueyuan.wilddogio.com/message');
btn.addEventListener('tap',function(){
var content = text.value;
//记录发布时间戳
var date = new Date();
var time = date.getTime();
//插入数据
//第一个参数单独的一个空间，比如两个人聊天，他们就是在单独的一个空间聊天， message 里面可以有很多个独立的空间，比如 张三和李四 是一个空间 王五和赵六又是一个空间
//第二个参数是你发布信息的时间，我们以时间作为信息的依据，通过时间的排序我们的聊天记录
//第三个参数是一个json,为我们的聊天信息，比如 昵称，头像，内容，表情，时间
wd.child('1').child(time).set({
'name':'dongyixueyuan',
'content':content,
'time':time
// ...更多
});
})
//获得数据
// 监听聊天内容变化
var listen = "https://dongyixueyuan.wilddogio.com/message/1";
var listen_wd = new Wilddog(listen);
listen_wd.on('child_added',function(data){
list.innerHTML += ''
+' '+data.val().name+' '+data.val().time+''
+' '+data.val().content+''
+'';
console.log(data.val().name);
})
//删除
//1为空间名,1442293959023为某一条信息
var ref = new Wilddog("https://dongyixueyuan.wilddogio.com/message/1/1442293959023");
ref.remove()
//时间转换函数
function getLocalTime(nS) {
var mydate = new Date(nS);
var today = '';
// today += mydate.getFullYear() + '年'; //返回年份
// today += mydate.getMonth()+1 + '月'; //返回月份，因为返回值是0开始，表示1月，所以做+1处理
// today += mydate.getDate() + '日'; //返回日期
today += mydate.getHours() + ':';
if(mydate.getMinutes() < 10){
var min = '0'+mydate.getMinutes();
}else{
var min = mydate.getMinutes();
}
today += min + ':';
today += mydate.getSeconds();
return today;
}
//设置滚动条高度
document.body.scrollTop = document.body.offsetHeight;
双击安卓返回键退出
//监听安卓返回键
var first = null;
mui.back = function() {
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
QQ登录
//申请各个开发平台的开发者
微信: https://open.weixin.qq.com/
QQ: http://open.qq.com/
微博: http://open.weibo.com/
//设置 manifest.json -> SDK配置
//初始化QQ登录,微信登录,微博登录
var auths={};
mui.plusReady(function(){
// 获取登录认证通道
plus.oauth.getServices(function(services){
for(var i in services){
var service=services[i];
auths[service.id]=service;
}
},function(e){
outLine("获取登录认证失败："+e.message);
});
});
//调用认证事件
// id 为 qq,weixin,weibo
function login(id){
console.log("----- 登录认证 -----");
var auth=auths[id];
if(auth){
var w=plus.nativeUI.showWaiting();
document.addEventListener("pause",function(){
setTimeout(function(){
w&&w.close();w=null;
},2000);
}, false );
auth.login(function(){
w&&w.close();w=null;
console.log("登录认证成功：");
console.log(JSON.stringify(auth.authResult));
userinfo(auth);
},function(e){
w&&w.close();w=null;
console.log("登录认证失败：");
console.log("["+e.code+"]："+e.message);
plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档：http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]："+e.message);
});
}else{
console.log("无效的登录认证通道！");
plus.nativeUI.alert("无效的登录认证通道！",null,"登录");
}
}
// 获取用户信息
function userinfo(a){
console.log("----- 获取用户信息 -----");
a.getUserInfo(function(){
console.log("获取用户信息成功：");
console.log(JSON.stringify(a.userInfo));
var nickname=a.userInfo.nickname||a.userInfo.name;
plus.nativeUI.alert("欢迎“"+nickname+"”登录！");
},function(e){
console.log("获取用户信息失败：");
console.log("["+e.code+"]："+e.message);
plus.nativeUI.alert("获取用户信息失败！",null,"登录");
});
}
// 注销登录
function logoutAll(){
console.log("----- 注销登录认证 -----");
for(var i in auths){
logout(auths[i]);
}
}
function logout(auth){
auth.logout(function(){
outLine("注销\""+auth.description+"\"成功");
},function(e){
outLine("注销\""+auth.description+"\"失败："+e.message);
});
}