HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

HTML5+ IO requestFileSystem和resolveLocalFileSystemURL同时请求一个文件夹时,fs.root.fullPath为null

安卓真机:4.2.2, Hbuiler 7.6.5。
mui.plusReady(function() {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
在点击id为“btn-update”按钮后fs.root.fullPath为null。

调换顺序后fs.root.fullPath的路径正常
mui.plusReady(function() {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};

继续阅读 »

安卓真机:4.2.2, Hbuiler 7.6.5。
mui.plusReady(function() {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
在点击id为“btn-update”按钮后fs.root.fullPath为null。

调换顺序后fs.root.fullPath的路径正常
mui.plusReady(function() {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
console.log(fs.root.fullPath);
console.log("初始化PRIVATE_DOC成功!");
},function (e) {
console.log("初始化PRIVATE_DOC失败!"+JSON.stringify(e));
});
};
document.getElementById("btn-update").addEventListener("tap", function(event) {
plus.io.resolveLocalFileSystemURL("_doc/picker-data/", function(dirEntry) {
console.log("初始化_doc/成功!");
},function (e) {
console.log("初始化_doc/失败!"+JSON.stringify(e));
});
};

收起阅读 »

push websocket 问题

Push WEBSOCKET
function notice_push(getMsg){  
    mui.plusReady(function () {  
        var push_msg = JSON.parse(getMsg.content);  

        createLocalPushMsg(getMsg,push_msg);  
        // 监听点击消息事件  
        plus.push.addEventListener("click",function(msg){  

            // 提示点击的内容  
            msg.msg_chat_id = push_msg.id;  

            console.log(msg.payload);  
            switch( msg.payload ) {  
                case "chat":  
                    console.log( "点击本地创建消息启动:" );  
                    jump("file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/html/msg/html/msg-chat.html",msg);  
                break;  
                default:  
                    console.log( "点击离线推送消息启动:");  
                break;  
            }  
            localStorage.removeItem(getInterimID+"-locationHref");  
        },false);  
        // 监听在线消息事件  
        plus.push.addEventListener("receive",function(msg){  
            console.log("**********************************");  
        },false)  
    })  
}  

function createLocalPushMsg(getMsg,pushMsg){  
    var options = {cover:false};  
    var payload = "";  
    var str = getMsg.title+": "+pushMsg.reply.content;  
    switch (getMsg.title){  
        case "新回复":  
            payload = "chat";  
            break;  
        default:  
            break;  
    }  
    plus.push.createMessage( str, payload, options );  

    if(plus.os.name=="iOS"){  
        console.log('*如果无法创建消息,请到"设置"->"通知"中配置应用在通知中心显示!');  
    }  
}

我的这个是接受websocket的推送消息,当我接收到后,会把消息对象传进notice_push()方法可里,紧接着本地创建通知栏进行通知!然后click后调转到相应的页面里去;页面跳转使用的html5+模版的方法(跳转部分保证没问题);

问题是,当我在页面里的时候第一次发通知,通知栏提示正常显示,但是无法点击,紧接着第二次发送通知,通知栏正常,但是会自己调转过去!不知道为啥什么!求教!

而且最近发现hbuilder 7.6.0.201611071800版本 ios不能同步调试提示在手动安装!
更新软件后,打包名开头字母还不能小写!两边为难!

继续阅读 »
function notice_push(getMsg){  
    mui.plusReady(function () {  
        var push_msg = JSON.parse(getMsg.content);  

        createLocalPushMsg(getMsg,push_msg);  
        // 监听点击消息事件  
        plus.push.addEventListener("click",function(msg){  

            // 提示点击的内容  
            msg.msg_chat_id = push_msg.id;  

            console.log(msg.payload);  
            switch( msg.payload ) {  
                case "chat":  
                    console.log( "点击本地创建消息启动:" );  
                    jump("file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/html/msg/html/msg-chat.html",msg);  
                break;  
                default:  
                    console.log( "点击离线推送消息启动:");  
                break;  
            }  
            localStorage.removeItem(getInterimID+"-locationHref");  
        },false);  
        // 监听在线消息事件  
        plus.push.addEventListener("receive",function(msg){  
            console.log("**********************************");  
        },false)  
    })  
}  

function createLocalPushMsg(getMsg,pushMsg){  
    var options = {cover:false};  
    var payload = "";  
    var str = getMsg.title+": "+pushMsg.reply.content;  
    switch (getMsg.title){  
        case "新回复":  
            payload = "chat";  
            break;  
        default:  
            break;  
    }  
    plus.push.createMessage( str, payload, options );  

    if(plus.os.name=="iOS"){  
        console.log('*如果无法创建消息,请到"设置"->"通知"中配置应用在通知中心显示!');  
    }  
}

我的这个是接受websocket的推送消息,当我接收到后,会把消息对象传进notice_push()方法可里,紧接着本地创建通知栏进行通知!然后click后调转到相应的页面里去;页面跳转使用的html5+模版的方法(跳转部分保证没问题);

问题是,当我在页面里的时候第一次发通知,通知栏提示正常显示,但是无法点击,紧接着第二次发送通知,通知栏正常,但是会自己调转过去!不知道为啥什么!求教!

而且最近发现hbuilder 7.6.0.201611071800版本 ios不能同步调试提示在手动安装!
更新软件后,打包名开头字母还不能小写!两边为难!

收起阅读 »

微信支付返回-1的坑

微信支付

刚刚开始第一次调用微信支付的时候成功付款了,但是后面一直报-1的错误。在此感谢那个默默指导我的哥子“糕なMr.俊 ”。开始是因为签名和开放平台设置的不一致。但是改过之后一直还是报错。就在刚刚这位哥子再次指导我,把基座和App都卸掉然后再装上app就成功了。

刚刚开始第一次调用微信支付的时候成功付款了,但是后面一直报-1的错误。在此感谢那个默默指导我的哥子“糕なMr.俊 ”。开始是因为签名和开放平台设置的不一致。但是改过之后一直还是报错。就在刚刚这位哥子再次指导我,把基座和App都卸掉然后再装上app就成功了。

精品技术社群邀你加入

webapp精品群:495654168

不定期分享干货视频,主要涉及vue.js,decloud项目源码,还有优质的项目外包。
加群表明来源:例如来之 decloud社区。

快速开发APP教程地址:

http://study.163.com/course/courseMain.htm?courseId=1003604089
http://study.163.com/course/courseMain.htm?courseId=1003606075
http://study.163.com/course/courseMain.htm?courseId=1003664040
http://study.163.com/course/courseMain.htm?courseId=1003605092

继续阅读 »

webapp精品群:495654168

不定期分享干货视频,主要涉及vue.js,decloud项目源码,还有优质的项目外包。
加群表明来源:例如来之 decloud社区。

快速开发APP教程地址:

http://study.163.com/course/courseMain.htm?courseId=1003604089
http://study.163.com/course/courseMain.htm?courseId=1003606075
http://study.163.com/course/courseMain.htm?courseId=1003664040
http://study.163.com/course/courseMain.htm?courseId=1003605092

收起阅读 »

prompt 弹出密码框

自定义prompt

自己写了一个弹出密码框的dialog。修改的不是很好。大大们帮忙优化一下啊。。。
效果图


调用方式:

   //创建密码提示框  
     * @param {Object} message  内容  
     * @param {Object} placeholder  提示  
     * @param {Object} title   标题  
     * @param {Object} btnArray  按钮  
     * @param {Object} callback  回调函数  
     * @param {Object} type  渲染类型  
     * @param {Object} maxlength   密码框长度  
     */  
    mui.promptPwd('在线支付<span class=\'xfcred\'>2000.00元</span>', '请输入6-8位支付密码', '请输入支付密码', ['取消', '确定'], function(e){  
                        if (e.index == 0) {  
                            mui.alert('取消线上支付', '提示信息', null);  
                        } else {  
                            mui.alert('线上支付成功', '提示信息', null);  
                                                    alert("支付密码为:"+e.value);  
                        }  
                    }, 'div', 8)

修改的dialog源文件,保存为插件:mui.promptpwd.js

继续阅读 »

自己写了一个弹出密码框的dialog。修改的不是很好。大大们帮忙优化一下啊。。。
效果图


调用方式:

   //创建密码提示框  
     * @param {Object} message  内容  
     * @param {Object} placeholder  提示  
     * @param {Object} title   标题  
     * @param {Object} btnArray  按钮  
     * @param {Object} callback  回调函数  
     * @param {Object} type  渲染类型  
     * @param {Object} maxlength   密码框长度  
     */  
    mui.promptPwd('在线支付<span class=\'xfcred\'>2000.00元</span>', '请输入6-8位支付密码', '请输入支付密码', ['取消', '确定'], function(e){  
                        if (e.index == 0) {  
                            mui.alert('取消线上支付', '提示信息', null);  
                        } else {  
                            mui.alert('线上支付成功', '提示信息', null);  
                                                    alert("支付密码为:"+e.value);  
                        }  
                    }, 'div', 8)

修改的dialog源文件,保存为插件:mui.promptpwd.js

收起阅读 »

一周时间开发的原生APP

移动APP HTML5+ HTML5

不得不说,原生开发省时省力啊~
2017 html5肯定是回继续研究下去的,
但我觉得是时候考虑用一下原生了,
2017你的app还是和2012年时候一样卡吗?

不得不说,原生开发省时省力啊~
2017 html5肯定是回继续研究下去的,
但我觉得是时候考虑用一下原生了,
2017你的app还是和2012年时候一样卡吗?

分享不用update.xml差异配置文件的差量升级思路

差量升级

1.客户端请求升级接口,传递当前版本参数,服务端获取到客户端版本,动态对比线上最新版本,并生成差异配置文件update.xml,将其保存用于后来同版本请求升级的直接用即可。 然后动态生成差量升级包wgtu。
分析
优点:下载文件比较少,真正实现了差量更新。
缺点:动态对比耗费一些时间,依赖服务器以及网络状况。

2.自己做个插件进行差量升级,不用对比差异文件。考虑到css文件以及js文件不大,图片资源较大。可以在升级过程中,不添加图片,只添加css、js等文件。
分析
优点:实现需求的差量更新,无需对比版本差异,省事。
缺点:需要自己实现插件,类似插件可以参考如下地址:http://blog.csdn.net/qq_14859923/article/details/54178027
github地址:https://github.com/runfengai/DiffUpdaterRep

继续阅读 »

1.客户端请求升级接口,传递当前版本参数,服务端获取到客户端版本,动态对比线上最新版本,并生成差异配置文件update.xml,将其保存用于后来同版本请求升级的直接用即可。 然后动态生成差量升级包wgtu。
分析
优点:下载文件比较少,真正实现了差量更新。
缺点:动态对比耗费一些时间,依赖服务器以及网络状况。

2.自己做个插件进行差量升级,不用对比差异文件。考虑到css文件以及js文件不大,图片资源较大。可以在升级过程中,不添加图片,只添加css、js等文件。
分析
优点:实现需求的差量更新,无需对比版本差异,省事。
缺点:需要自己实现插件,类似插件可以参考如下地址:http://blog.csdn.net/qq_14859923/article/details/54178027
github地址:https://github.com/runfengai/DiffUpdaterRep

收起阅读 »

用 native.js实现Html5页面跳转到Activity原生页面

实现方法一:

  1. 重写 java类
    public class Helper {  
    /**  
    * js调用后进行跳转  
    *   
    * @param activity  
    * 传入当前Activity  
    */  
    public static void jump(Activity activity) {  
    Intent mIntent = new Intent(activity, MyActivity.class);  
    activity.startActivity(mIntent);  
    }  
    }

    2..然后编写js方法调用java方法

    
    //获取当前Activity  
    var main = plus.android.runtimeMainActivity();  

// 通过5 sdk 插件的invoke方法起调对象方法
plus.android.invoke('zcom.test.natives.Helper','jump',main );


3.注意事项  
必须manifest注册activity  
js书写正确  
关键导包正确  
继续阅读 »

实现方法一:

  1. 重写 java类
    public class Helper {  
    /**  
    * js调用后进行跳转  
    *   
    * @param activity  
    * 传入当前Activity  
    */  
    public static void jump(Activity activity) {  
    Intent mIntent = new Intent(activity, MyActivity.class);  
    activity.startActivity(mIntent);  
    }  
    }

    2..然后编写js方法调用java方法

    
    //获取当前Activity  
    var main = plus.android.runtimeMainActivity();  

// 通过5 sdk 插件的invoke方法起调对象方法
plus.android.invoke('zcom.test.natives.Helper','jump',main );


3.注意事项  
必须manifest注册activity  
js书写正确  
关键导包正确  
收起阅读 »

app开发直播项目

App入门 移动APP

微之宝商城项目

项目架构:php+mysql+thinkphp5.0
项目定位:传统b2c电商项目,只要app端,没有pc端

项目后端开发群体所需基础技能:
基本php代码编写能力,有thinkphp框架的基本使用经验,有数据库操作的基本技能。

移动端开发群体所需基本技能:
有html,css,js的基本基础,vue的基本使用技术(小白可参考已发布的免费教程或其他渠道的知识来源)。
有使用的基本知识,不会也没有关系,多看文档即可。

课程针对群体:
原生安卓开发和ios开发,传统的pc站开发人员,包括前端和后台开发人员。

课程目的:
为自己带来营收的同时,普及webapp开发,降低开发成本,让传统的前端人员掌握新技术,实现月薪翻倍的梦想。
同时给在线教育带来一股清流,课程的合理的定价,让学员拔高技术,告别码农的底层命运。

4个阶段:

1:纯移动端页面布局。----------孟老师
2:移动端数据交互-------------孟老师
3:接口开发阶段---------------孟老师
4:后台管理系统开发------------孟老师

App端所用到核心技术:

页面布局通用技术点暂不一一列出  

1:vue框架所有技术  
2:vue实现端数据绑定基础知识  
3:ajax数据绑定交互  
4:之-文件上传,仿今日头条导航栏等通用模块使用  
5:vue之--vue-resource组件使用技巧  
6:app交互token协议定制  
7:营销部分包括二维码图片的生成和微信分享  
8:瀑布流布局之-数据渲染  
9:购物车增删改查,全选,单选,反选开发技巧和实现  
10:监听事件的使用技巧  
11:移动端阿里支付和微信支付开发  
12:数据渲染之-轮播组件  
13:数据渲染之-下拉刷新,上拉加载,动态变化list,动态下拉刷新,上拉加载  
14:vue实现项目脚手架开发  
15:gallery图册组件的高级使用  
16:app加载动态页面思想-避免升级困惑  
17:云升级和云打包技巧  
18:$api前端框架的使用  
19:api对象的使用技巧  
20:移动端app推送通知使用  

Api接口开发核心技术点

1:数据库的基本建表知识点  
2:业务推动建表的设计思想  
3:库表操作的增删改查使用技巧  
4:接口token协议的制定和建表  
5:thinkphp5.0框架的使用技巧  
6:用户登录模式规则定义开发  
7:接口返回数据的统一制定  
8:基本的数据分页设计开发  
9:支付宝和微信支付sdk服务端开发  
10:图片文件上传七牛云云服务器技术点  
11:订单之预处理订单逻辑实现  
12:二维码生成技术点  
13:微信营销页面服务端开发  
14:Api跨域问题分析  
15:项目环境部署知识点  

直播计划:
个人报名499,组团报名超过5人,报名费299。超过20报名开班,如果不够还按录制课程模式走。
孟老师
已经录制了所需要的架构知识体系的课程,大约8个小时,报名成功后可先学习。
已经录制的可能大纲群文件下载观看。

继续阅读 »

微之宝商城项目

项目架构:php+mysql+thinkphp5.0
项目定位:传统b2c电商项目,只要app端,没有pc端

项目后端开发群体所需基础技能:
基本php代码编写能力,有thinkphp框架的基本使用经验,有数据库操作的基本技能。

移动端开发群体所需基本技能:
有html,css,js的基本基础,vue的基本使用技术(小白可参考已发布的免费教程或其他渠道的知识来源)。
有使用的基本知识,不会也没有关系,多看文档即可。

课程针对群体:
原生安卓开发和ios开发,传统的pc站开发人员,包括前端和后台开发人员。

课程目的:
为自己带来营收的同时,普及webapp开发,降低开发成本,让传统的前端人员掌握新技术,实现月薪翻倍的梦想。
同时给在线教育带来一股清流,课程的合理的定价,让学员拔高技术,告别码农的底层命运。

4个阶段:

1:纯移动端页面布局。----------孟老师
2:移动端数据交互-------------孟老师
3:接口开发阶段---------------孟老师
4:后台管理系统开发------------孟老师

App端所用到核心技术:

页面布局通用技术点暂不一一列出  

1:vue框架所有技术  
2:vue实现端数据绑定基础知识  
3:ajax数据绑定交互  
4:之-文件上传,仿今日头条导航栏等通用模块使用  
5:vue之--vue-resource组件使用技巧  
6:app交互token协议定制  
7:营销部分包括二维码图片的生成和微信分享  
8:瀑布流布局之-数据渲染  
9:购物车增删改查,全选,单选,反选开发技巧和实现  
10:监听事件的使用技巧  
11:移动端阿里支付和微信支付开发  
12:数据渲染之-轮播组件  
13:数据渲染之-下拉刷新,上拉加载,动态变化list,动态下拉刷新,上拉加载  
14:vue实现项目脚手架开发  
15:gallery图册组件的高级使用  
16:app加载动态页面思想-避免升级困惑  
17:云升级和云打包技巧  
18:$api前端框架的使用  
19:api对象的使用技巧  
20:移动端app推送通知使用  

Api接口开发核心技术点

1:数据库的基本建表知识点  
2:业务推动建表的设计思想  
3:库表操作的增删改查使用技巧  
4:接口token协议的制定和建表  
5:thinkphp5.0框架的使用技巧  
6:用户登录模式规则定义开发  
7:接口返回数据的统一制定  
8:基本的数据分页设计开发  
9:支付宝和微信支付sdk服务端开发  
10:图片文件上传七牛云云服务器技术点  
11:订单之预处理订单逻辑实现  
12:二维码生成技术点  
13:微信营销页面服务端开发  
14:Api跨域问题分析  
15:项目环境部署知识点  

直播计划:
个人报名499,组团报名超过5人,报名费299。超过20报名开班,如果不够还按录制课程模式走。
孟老师
已经录制了所需要的架构知识体系的课程,大约8个小时,报名成功后可先学习。
已经录制的可能大纲群文件下载观看。

收起阅读 »

上拉加载和返回顶部同时使用,安卓手机上可以ios不行

mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var pageNum = 0;//初始页码
/**

  • 上拉加载具体业务实现
    /
    function pullupRefresh() {
    setTimeout(function() {
    if(pageNum > 0){
    var newList = new Array();
    for(var i=0;i<10;i++){
    if((pageNum
    10) + i < mainDataList.length){
    newList.push(mainDataList[(pageNum * 10) + i]);
    }
    }
    pageNum += 1;
    var data = {list: newList};
    var tpl = document.getElementById('div_demo').innerHTML; //读取模版
    laytpl(tpl).render(data.list, function(render){
    $("#OA_task_1").append(render);
    });
    bindDel(data.list);
    $(".shenqing").click(function(e){
    var id = e.currentTarget.childNodes[1].childNodes[1].innerHTML
    localStorage.setItem("WSD_ZX_FAQI_ID",id);
    localStorage.setItem("detailType","purchasse");
    WsdOpen("wsd_pur_applydet.html");
    })
    }
    mainDataList = mainDataList || [];
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(pageNum>(mainDataList.length/10)); //参数为true代表没有更多数据了。
    }, 1500);
    }
    if (mui.os.plus) {
    mui.plusReady(function() {
    setTimeout(function() {
    mui('#pullrefresh').pullRefresh().pullupLoading();
    }, 1000);

        });  
    } else {  
        mui.ready(function() {  
            mui('#pullrefresh').pullRefresh().pullupLoading();  
        });  
    }  

上面是上拉加载的方法

下面是返回顶部的方法

document.getElementById("back_top").addEventListener("tap",function(){  
    $('html,body').animate({  
        'scrollTop': 0},  
    400);  
 });
继续阅读 »

mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var pageNum = 0;//初始页码
/**

  • 上拉加载具体业务实现
    /
    function pullupRefresh() {
    setTimeout(function() {
    if(pageNum > 0){
    var newList = new Array();
    for(var i=0;i<10;i++){
    if((pageNum
    10) + i < mainDataList.length){
    newList.push(mainDataList[(pageNum * 10) + i]);
    }
    }
    pageNum += 1;
    var data = {list: newList};
    var tpl = document.getElementById('div_demo').innerHTML; //读取模版
    laytpl(tpl).render(data.list, function(render){
    $("#OA_task_1").append(render);
    });
    bindDel(data.list);
    $(".shenqing").click(function(e){
    var id = e.currentTarget.childNodes[1].childNodes[1].innerHTML
    localStorage.setItem("WSD_ZX_FAQI_ID",id);
    localStorage.setItem("detailType","purchasse");
    WsdOpen("wsd_pur_applydet.html");
    })
    }
    mainDataList = mainDataList || [];
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(pageNum>(mainDataList.length/10)); //参数为true代表没有更多数据了。
    }, 1500);
    }
    if (mui.os.plus) {
    mui.plusReady(function() {
    setTimeout(function() {
    mui('#pullrefresh').pullRefresh().pullupLoading();
    }, 1000);

        });  
    } else {  
        mui.ready(function() {  
            mui('#pullrefresh').pullRefresh().pullupLoading();  
        });  
    }  

上面是上拉加载的方法

下面是返回顶部的方法

document.getElementById("back_top").addEventListener("tap",function(){  
    $('html,body').animate({  
        'scrollTop': 0},  
    400);  
 });
收起阅读 »