侧滑菜单,侧滑导航div模式 主界面滚动问题
基于mui整页滚动的下拉刷新和上拉加载
避免双webview,使用整页滚动,更流畅;
demo和文档见github
地址:pullToRefresh.js
避免双webview,使用整页滚动,更流畅;
demo和文档见github
地址:pullToRefresh.js
App升级问题 -- 使用升级包(.wgt)格式升级
安装升级包失败[10]:End Of Central Directory signature not found, 文件的路径是正确的,
path ="_downloads/1481102169419011845(8).wgt";
function installWgt(path) {
plus.nativeUI.showWaiting("正在安装升级包,请稍等....");
plus.runtime.install(path, {}, function() {
plus.nativeUI.alert("应用资源更新完成!", function() {
plus.nativeUI.closeWaiting();
plus.runtime.restart();
});
}, function(e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("安装升级包失败[" e.code "]:" e.message); //图片上面弹出的位置
console.log("安装升级包失败[" e.code "]:" e.message);
});
}
望大神们帮忙!
安装升级包失败[10]:End Of Central Directory signature not found, 文件的路径是正确的,
path ="_downloads/1481102169419011845(8).wgt";
function installWgt(path) {
plus.nativeUI.showWaiting("正在安装升级包,请稍等....");
plus.runtime.install(path, {}, function() {
plus.nativeUI.alert("应用资源更新完成!", function() {
plus.nativeUI.closeWaiting();
plus.runtime.restart();
});
}, function(e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.alert("安装升级包失败[" e.code "]:" e.message); //图片上面弹出的位置
console.log("安装升级包失败[" e.code "]:" e.message);
});
}
望大神们帮忙!
收起阅读 »一天记录一点点....
一直想做一个本地生活的平台。之前有做成功。然后腾讯云的服务器到期了...服务端全部被删除了。然后电脑硬盘坏了,客户端又毁了。
这是个悲伤的故事.现在重新开始。
一、页面布局。
代码就是基本的布局代码,如下
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#" id="main">
<span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-tab-label">圈子</span>
</a>
<a class="mui-tab-item" href="#" id="chat">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">聊天</span>
</a>
<a class="mui-tab-item" href="#" id="discover">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="#" id="settings">
<span class="mui-icon mui-icon-gear"><span class="mui-badge mui-badge-danger"></span></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
然后是创建webview
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'main.html',
id:'main.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'50px'//默认为0px,可不定义;
}
}]
});
//main点击事件
document.getElementById('main').addEventListener('tap', function() {
mui.openWindow({
url: 'main.html',
id:'main',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//chat按钮点击事件
document.getElementById('chat').addEventListener('tap', function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'chat',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//discover按钮点击事件
document.getElementById("discover").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'discover',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//settings按钮点击事件
document.getElementById("settings").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'settings',
styles:{
top:'45px',
bottom:'50px'
}
});
});
</script>
一直想做一个本地生活的平台。之前有做成功。然后腾讯云的服务器到期了...服务端全部被删除了。然后电脑硬盘坏了,客户端又毁了。
这是个悲伤的故事.现在重新开始。
一、页面布局。
代码就是基本的布局代码,如下
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#" id="main">
<span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-tab-label">圈子</span>
</a>
<a class="mui-tab-item" href="#" id="chat">
<span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-tab-label">聊天</span>
</a>
<a class="mui-tab-item" href="#" id="discover">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="#" id="settings">
<span class="mui-icon mui-icon-gear"><span class="mui-badge mui-badge-danger"></span></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
然后是创建webview
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'main.html',
id:'main.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'50px'//默认为0px,可不定义;
}
}]
});
//main点击事件
document.getElementById('main').addEventListener('tap', function() {
mui.openWindow({
url: 'main.html',
id:'main',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//chat按钮点击事件
document.getElementById('chat').addEventListener('tap', function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'chat',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//discover按钮点击事件
document.getElementById("discover").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'discover',
styles:{
top:'45px',
bottom:'50px'
}
});
});
//settings按钮点击事件
document.getElementById("settings").addEventListener('tap',function() {
mui.openWindow({
url: 'pullrefresh_sub.html',
id:'settings',
styles:{
top:'45px',
bottom:'50px'
}
});
});
</script>
收起阅读 »解决安卓下拉刷新异常问题
一、安卓下拉刷新异常解决问题
兼容ios、安卓版本
解决方法:
1、使用mui底部选项卡-webview模式
2、这边使用第二选项卡为例,在第二选项卡使用双监听
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'内容页.html',
id:'内容页.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
3、所有内容都定义在:内容页.html文件中
二、自定义选项卡标题
1、使用mui底部选项卡-webview模式
2、去掉头部标题栏部分在选项卡内容页做定义
注:此部分为自定义标题栏比如添加搜索、按钮、以及下拉效果均可
一、安卓下拉刷新异常解决问题
兼容ios、安卓版本
解决方法:
1、使用mui底部选项卡-webview模式
2、这边使用第二选项卡为例,在第二选项卡使用双监听
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'内容页.html',
id:'内容页.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
3、所有内容都定义在:内容页.html文件中
二、自定义选项卡标题
1、使用mui底部选项卡-webview模式
2、去掉头部标题栏部分在选项卡内容页做定义
注:此部分为自定义标题栏比如添加搜索、按钮、以及下拉效果均可
收起阅读 »
还在为了没有后端发愁?? hoa 为您提供学习后端开放源,学习app不用自己做后端了! 申请加精谢谢
学习app开发的你恰巧又是做前端的你:
是不是没有后端数据总是觉得自己做的就是一层表皮,搭建后端似乎有些复杂?
需要服务器 需要配置服务器 需要设计数据库 制作接口.....
现在 福利来了!!
HOA 基础版正式发布!!
HCoder Open Api 简称 HOA 是由 www.hcoder.net 提供的一套api数据源,提供了日常app开发学习过程中常用的数据源,适用于基于 mui hui h5+的app开发。
官网地址
http://www.hcoder.net/api
我们为您提供学习app开发后端所需的基础数据,并提供项目案例源码(官网上可以下载样例)!快来吧!
测试版数据不断扩展中,目前提供基础的 post get 图片轮播 新闻列表 新闻详情数据源。
后期我们将提供用户体系数据源涵盖 用户 登陆 注册等....
本周6晚上8点 hcoder 项目开发直播课程报名中(收费5元 防止放鸽子),想听课的加QQ 1265928288
学习app开发的你恰巧又是做前端的你:
是不是没有后端数据总是觉得自己做的就是一层表皮,搭建后端似乎有些复杂?
需要服务器 需要配置服务器 需要设计数据库 制作接口.....
现在 福利来了!!
HOA 基础版正式发布!!
HCoder Open Api 简称 HOA 是由 www.hcoder.net 提供的一套api数据源,提供了日常app开发学习过程中常用的数据源,适用于基于 mui hui h5+的app开发。
官网地址
http://www.hcoder.net/api
我们为您提供学习app开发后端所需的基础数据,并提供项目案例源码(官网上可以下载样例)!快来吧!
测试版数据不断扩展中,目前提供基础的 post get 图片轮播 新闻列表 新闻详情数据源。
后期我们将提供用户体系数据源涵盖 用户 登陆 注册等....
本周6晚上8点 hcoder 项目开发直播课程报名中(收费5元 防止放鸽子),想听课的加QQ 1265928288
收起阅读 »纯js 头像裁剪
引用cropper.js 纯js,无需其余第三方插件,完成图片裁剪功能,使用例子在附件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/cropperjs-master/dist/cropper.min.css" />
<link rel="stylesheet" href="css/mui.min.css" />
<style>
#redo{
position: fixed;
bottom: 20px;
left :20px;
font-size: 30px;
}
#undo{
position: fixed;
bottom: 20px;
right :20px;
font-size: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav blueBackground">
<h1 id="patientId" class="mui-title">截取头像</h1>
<a id="save" style="vertical-align: middle;color:#8dc14f;line-height:2.5em;" class="mui-pull-right"><span>保存</span></a>
</header>
<div style="" class="mui-content">
<div style="">
<img style="width: 98%;" id="image" src="">
</div>
<button id="redo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-left"><span class="mui-icon mui-icon-redo"></span></button>
<button id="undo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right"><span class="mui-icon mui-icon-undo"></button>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/cropperjs-master/dist/cropper.min.js" ></script>
<script>
var image = document.getElementById('image');
var cropper = null;
var resImg = null;
//在选择或者拍摄完成后跳出裁剪页面并把图片路径传递到此页面
//image.src = plus.webview.currentWebview().imgSrc;
image.src = "img/head-default.jpg";
initCropper();
document.getElementById("save").addEventListener("tap",getImg);
document.getElementById("redo").addEventListener("tap",function(){
cropper.rotate(90);
});
document.getElementById("undo").addEventListener("tap",function(){
cropper.rotate(-90);
});
function initCropper(){
cropper = new Cropper(image, {
aspectRatio: 1/1,
dragMode:'move',
rotatable:true,
minCropBoxWidth:200,
minCropBoxHeight:200,
minCanvasWidth:200,
minCanvasHeight:200,
minContainerWidth:200,
minContainerHeight:200,
crop: function(data) {
}
});
}
function getImg(){
resImg = cropper.getCroppedCanvas({
width: 200,
height: 200
}).toDataURL();
console.log(resImg)
//裁剪完毕后将新的图片路径传递到需要显示的页面即可显示 结果为base64格式
//mui.fire(plus.webview.getWebviewById("personalInfoPage"),"cropperImg",{resImg:resImg});
//mui.back();
}
</script>
</body>
</html>
引用cropper.js 纯js,无需其余第三方插件,完成图片裁剪功能,使用例子在附件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/cropperjs-master/dist/cropper.min.css" />
<link rel="stylesheet" href="css/mui.min.css" />
<style>
#redo{
position: fixed;
bottom: 20px;
left :20px;
font-size: 30px;
}
#undo{
position: fixed;
bottom: 20px;
right :20px;
font-size: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav blueBackground">
<h1 id="patientId" class="mui-title">截取头像</h1>
<a id="save" style="vertical-align: middle;color:#8dc14f;line-height:2.5em;" class="mui-pull-right"><span>保存</span></a>
</header>
<div style="" class="mui-content">
<div style="">
<img style="width: 98%;" id="image" src="">
</div>
<button id="redo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-left"><span class="mui-icon mui-icon-redo"></span></button>
<button id="undo" type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right"><span class="mui-icon mui-icon-undo"></button>
</div>
<script type="text/javascript" src="js/mui.min.js" ></script>
<script type="text/javascript" src="js/cropperjs-master/dist/cropper.min.js" ></script>
<script>
var image = document.getElementById('image');
var cropper = null;
var resImg = null;
//在选择或者拍摄完成后跳出裁剪页面并把图片路径传递到此页面
//image.src = plus.webview.currentWebview().imgSrc;
image.src = "img/head-default.jpg";
initCropper();
document.getElementById("save").addEventListener("tap",getImg);
document.getElementById("redo").addEventListener("tap",function(){
cropper.rotate(90);
});
document.getElementById("undo").addEventListener("tap",function(){
cropper.rotate(-90);
});
function initCropper(){
cropper = new Cropper(image, {
aspectRatio: 1/1,
dragMode:'move',
rotatable:true,
minCropBoxWidth:200,
minCropBoxHeight:200,
minCanvasWidth:200,
minCanvasHeight:200,
minContainerWidth:200,
minContainerHeight:200,
crop: function(data) {
}
});
}
function getImg(){
resImg = cropper.getCroppedCanvas({
width: 200,
height: 200
}).toDataURL();
console.log(resImg)
//裁剪完毕后将新的图片路径传递到需要显示的页面即可显示 结果为base64格式
//mui.fire(plus.webview.getWebviewById("personalInfoPage"),"cropperImg",{resImg:resImg});
//mui.back();
}
</script>
</body>
</html>
收起阅读 »
测试程序进程
var needCheckVersion = true;
function getVersion(){
if(needCheckVersion!=true){
return false;
}
needCheckVersion = false;
$.ajax({
type:'post',
url:baseUrl+'/api/work.php?act=getVersion&t='+new Date(),
data:'',
dataType:'json',
success:function(data){
//
//needGetVersion = true;
console.log("load done"+needCheckVersion);
var v = localStorage.version;
//console.log(v+'=='+data.v);
if(v!=data.v){
alert('有新版本,请到设置里点击在线更新进行更新 !');
}
//可能重装安装以后,localstorage数据就被清掉了
localStorage.new_version = data.v;
}
});
}
function plusReady(){
//从后台切换到前台时执行
document.addEventListener( "resume", resumeCallback);
function resumeCallback(){
console.log("resume");
getVersion();
}
//从前台切换到后台
document.addEventListener( "pause", pauseCallback );
function pauseCallback(){
console.log("pause");
needCheckVersion = true ;
}
}
var needCheckVersion = true;
function getVersion(){
if(needCheckVersion!=true){
return false;
}
needCheckVersion = false;
$.ajax({
type:'post',
url:baseUrl+'/api/work.php?act=getVersion&t='+new Date(),
data:'',
dataType:'json',
success:function(data){
//
//needGetVersion = true;
console.log("load done"+needCheckVersion);
var v = localStorage.version;
//console.log(v+'=='+data.v);
if(v!=data.v){
alert('有新版本,请到设置里点击在线更新进行更新 !');
}
//可能重装安装以后,localstorage数据就被清掉了
localStorage.new_version = data.v;
}
});
}
function plusReady(){
//从后台切换到前台时执行
document.addEventListener( "resume", resumeCallback);
function resumeCallback(){
console.log("resume");
getVersion();
}
//从前台切换到后台
document.addEventListener( "pause", pauseCallback );
function pauseCallback(){
console.log("pause");
needCheckVersion = true ;
}
}
3年前端开发经验,用mui实战做过APP,现 找工作!求带走!
性别:男
三年前端开发经验
由于现在公司经营不善,一不小心技术部解散,无奈,只好拂袖而去,现在待业在家,哪位老板愿带我回家,定不负所托,完成任务。
本人近况:之前公司是一家电商公司,当初去公司的时候我负责的就是整个前端开发组的小组长,带领2人完成整套APP的开发,现在已经全部开发完成,安卓市场,IOS商店均可下载,(由于自我保护,恕在下不能公布APP名称,想要招人的可以联系我QQ 245132346 )。
目前有公司想用mui 开发APP的公司 你要了我 等于要了一套APP代码,这都是小 关键本人 已熟练掌握 mui H5+核心要素 包括其调用手机底层功能 支付宝支付,微信支付等等。
本人目前所掌握的技能:require react webpack vue swiper less JQ zepto ...
去年我一直做的 手机站的 网页 对于移动端网页开发 有着深刻的理解 再加上一段APP开发的经历 更是深入我心,自认为 去任何一家公司 无需学习 无需培养 老夫衣袖一挥 对着电脑就是干。(语言颇有不妥 懂我者自懂 如果您的公司 是一家只知道工作 无一点自由 幽默 谈笑的空间 那对不起 请勿打扰)
有意向的公司 加QQ要我的简历 期待与您的合作。 245132346
性别:男
三年前端开发经验
由于现在公司经营不善,一不小心技术部解散,无奈,只好拂袖而去,现在待业在家,哪位老板愿带我回家,定不负所托,完成任务。
本人近况:之前公司是一家电商公司,当初去公司的时候我负责的就是整个前端开发组的小组长,带领2人完成整套APP的开发,现在已经全部开发完成,安卓市场,IOS商店均可下载,(由于自我保护,恕在下不能公布APP名称,想要招人的可以联系我QQ 245132346 )。
目前有公司想用mui 开发APP的公司 你要了我 等于要了一套APP代码,这都是小 关键本人 已熟练掌握 mui H5+核心要素 包括其调用手机底层功能 支付宝支付,微信支付等等。
本人目前所掌握的技能:require react webpack vue swiper less JQ zepto ...
去年我一直做的 手机站的 网页 对于移动端网页开发 有着深刻的理解 再加上一段APP开发的经历 更是深入我心,自认为 去任何一家公司 无需学习 无需培养 老夫衣袖一挥 对着电脑就是干。(语言颇有不妥 懂我者自懂 如果您的公司 是一家只知道工作 无一点自由 幽默 谈笑的空间 那对不起 请勿打扰)
有意向的公司 加QQ要我的简历 期待与您的合作。 245132346
收起阅读 »











































