https://ke.qq.com/webcourse/index.html#course_id=203400&term_id=100240884&taid=1186441766050440&vid=m141785umya
编辑器是Sublime 他需要和apicloud连接的进行真机测试时话需一个插件,从apicloud官网下载 :app开发平台---开发工具中下载第二个即Sublime APICLoud PLugins,下载解压后把最后三个即api-sublime- 文件复制到编辑器Sublime的Package 文件夹中即可。
如果想在电脑上看效果的话只用按个模拟器即可(我用的是夜神模拟器)。
apisloud官网登录后在开发平台上创建新的项目外壳包时 第一个Native是做混合开发app的 ;第二个Web是做web手机端网址打包的app(即直接用网址打包的app)
官网案例在开发者社区--原码(里面有很多已好的案例但是没有交互数据即纯静态)
开发混合式app时需要重点看的知识点是:开发者社区--文档:API对象、界面布局、导航菜单
开发时遇到问题解决方案是去找官网论坛即:开发者社区--在线社区(进入后在搜寻里搜索所要解决的问题)
将在官网创建好的项目外壳下载到本地电脑: 在本地电脑随意盘里新建一个文件夹右击---SVN检出 :连接是官网代码里的那个连接 密码是其后面的获取密码 账号是官网上你用户名下的邮箱
icon 即图标尺寸50px~200px包括50和200
启动页 尺寸必须尺寸为1080*1920 更精细的话还需要640*1136 640*960 1536*2048 800*1280 720*1280 400*800
mui.init({
放嵌入页面即创建子页面subpages:[{}],
预加载 preloadPages:[{},{},{}],是个数组【也可放在其对应的点击事件里放在这里的预加载是var prPage = mui.preload({url:'',id:''})】
上拉加载、下拉加载 pullRefresh : { //... },
手势配置 gestureConfig:{ //... },
侧滑关闭 swipeBack:true, //Boolean(默认false)启用右滑关闭功能
监听Android手机的back、menu按键 keyEventBind: { backbutton: false, //Boolean(默认true)关闭back按键监听 menubutton: false //Boolean(默认true)关闭menu按键监听 },处理窗口关闭前的业务 beforeback: function() { //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看 }, //设置状态栏颜色 statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用 preloadLimit:5//预加载窗口数量 限制(一旦超出,先进先出)默认不限制 })
})
嵌入页面 即创建子页面 mui.init -----subpages:[{}]
点击打开新页面(事件监听即打开页面就执行绑定的事件用的是mui.trigger(绑定的id,'tap');)
1、 绑定onclick时间 function dkym(){
mui.openWindow({
url:,
id:,
style:{},
extras:{要传给打开页面的值即传值}
});}
2、mui.plusReady(function(){
document.getElementById('sx').addEventListener('tap',function(){
mui.openWindow({
url:'buycarsx.html',
id:'sx'
});
});
手势事件
点击 (单击tap 双击 doubletap)
长按(longtap 长按屏幕 hold 按住屏幕 release 离开屏幕)
滑动(swipeleft 向左滑动 swiperight 向右滑动 swipeup向上滑动 swipedown 向下滑动)
拖动(dragstart 开始拖动 drag 拖动中 dragend 拖动结束)
页面传值(自定义事件)
mui.plusReady(function(){
//父页面
//预加载
var prPage =mui.preload({url :"cardclcs.html",id :"cardclcs.html"});
//页面传值跳转
mui('body').on('tap','.mui-media-body', function(){
mui.fire(prPage,'news',{'cz':this.innerHTML});//news 和cz都是随意自己定的主要是和传给值的对象那里用的
// mui.fire(prPage,'news',{'id':this.getAttrubute('id')});//news 和id都是随意自己定的主要是和传给值的对象那里用的 第二个id是页面自己的id
mui.openWindow({url :"cardclcs.html",id :"cardclcs.html"})
});
})
//子页面接值
mui.plusReady(function(){
window.addEventListener('news',function(e){//news是cardetails.html页面自己随意定的
var mmq =mui('#mmq');
mmq[0].innerHTML = e.detail.cz;//cz是cardetails.html页面自己随意定的
//mmq[0].innerHTML = e.detail.id;//id是cardetails.html页面自己随意定的
});
})
app与服务器之间的交互共四个方法
mui.ajax({})
mui.post() 里面不用写url type datatyp data 等可直接把其后的值直接写在里面
mui.get()里面不用写url type datatyp data 等可直接把其后的值直接写在里面
mui.getJSON()里面不用写url type datatyp data 等可直接把其后的值直接写在里面
});
3、绑定事件完成页面跳转(取消绑定用off也写在mui.plusReady(function(){}))
mui.plusReady(function(){
mui('body').on('tap', '.offer_box > li', function() {
mui.openWindow({
url:'cardetails.html',
id:'cardetails.html'
});
});
});