HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

用 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报名开班,如果不够还按录制课程模式走。

报名电话:13213125511,微信:nanzhaigou,qq:835173372
孟老师
已经录制了所需要的架构知识体系的课程,大约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报名开班,如果不够还按录制课程模式走。

报名电话:13213125511,微信:nanzhaigou,qq:835173372
孟老师
已经录制了所需要的架构知识体系的课程,大约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);  
 });
收起阅读 »

分享一款自己开发的MUI插件

分享插件 插件开发 插件

插件很简单,是拿到textarea里的值(这个值应该是多行的),然后拼接为字符串

/**  
 * Mui Plugin for 接收textarea里的值,按行分割为数组后,通过for循环,加上'连接符'拼接为'字符串'  
 * 参考:http://www.jb51.net/article/74491.htm  
 * @version 0.1  
 * @requires Mui v3.4.1 or later  
 *  
 * Copyright (c) 20151221 ZZYY  
 *                      使用方法如下:  
 *          var cc = mui("#textarea1").barCodes();  
 *              console.info(cc);  
 *   
 */  

(function( $ ) {   

    $.fn.barCodes = function(options) {  
      var defaults = {  
        'regexSTR': '\n',  
        'connector': '\^'  
      };  
      var settings = $.extend({},defaults, options);  
         var patt1 = new RegExp("^[ ]+$");  
         var ids = "";  
         var self = this[0];  
        // console.info(self);  
         //var c = this.val();  
         var c = self.value ;  
         var csz = c.split(settings.regexSTR);  
         for (var i = 0; i < csz.length; i++) {  
            if (csz[i] == null || csz[i] == "" || patt1.test(csz[i]) ) {  
                 //console.info("NULL");  
            } else {  
                 ids = ids + settings.connector + csz[i];  
                 //console.info(csz[i]);  
            }  
         }  
      ids = ids.substring(settings.connector.length, ids.length);  
      return ids;  
    };  

})( mui ); 
继续阅读 »

插件很简单,是拿到textarea里的值(这个值应该是多行的),然后拼接为字符串

/**  
 * Mui Plugin for 接收textarea里的值,按行分割为数组后,通过for循环,加上'连接符'拼接为'字符串'  
 * 参考:http://www.jb51.net/article/74491.htm  
 * @version 0.1  
 * @requires Mui v3.4.1 or later  
 *  
 * Copyright (c) 20151221 ZZYY  
 *                      使用方法如下:  
 *          var cc = mui("#textarea1").barCodes();  
 *              console.info(cc);  
 *   
 */  

(function( $ ) {   

    $.fn.barCodes = function(options) {  
      var defaults = {  
        'regexSTR': '\n',  
        'connector': '\^'  
      };  
      var settings = $.extend({},defaults, options);  
         var patt1 = new RegExp("^[ ]+$");  
         var ids = "";  
         var self = this[0];  
        // console.info(self);  
         //var c = this.val();  
         var c = self.value ;  
         var csz = c.split(settings.regexSTR);  
         for (var i = 0; i < csz.length; i++) {  
            if (csz[i] == null || csz[i] == "" || patt1.test(csz[i]) ) {  
                 //console.info("NULL");  
            } else {  
                 ids = ids + settings.connector + csz[i];  
                 //console.info(csz[i]);  
            }  
         }  
      ids = ids.substring(settings.connector.length, ids.length);  
      return ids;  
    };  

})( mui ); 
收起阅读 »

小知识点

1.将输入的字母变成大写:<input id="" type="text" class="mui-input" style="text-transform: uppercase;">

  1. if(str!=null && str!=undefined && str !='')等价于if(!str){//do something}
    js 判断对象是否为空
    if(!x) x代表Boolean表达式
    Boolean 表达式
    一个值为 true 或者 false 的表达式。如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则:
    所有的对象都被当作 true。
    当且仅当字符串为空时,该字符串被当作 false。
    null 和 undefined 被当作 false。
    当且仅当数字为零时,该数字被当作 false。
继续阅读 »

1.将输入的字母变成大写:<input id="" type="text" class="mui-input" style="text-transform: uppercase;">

  1. if(str!=null && str!=undefined && str !='')等价于if(!str){//do something}
    js 判断对象是否为空
    if(!x) x代表Boolean表达式
    Boolean 表达式
    一个值为 true 或者 false 的表达式。如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则:
    所有的对象都被当作 true。
    当且仅当字符串为空时,该字符串被当作 false。
    null 和 undefined 被当作 false。
    当且仅当数字为零时,该数字被当作 false。
收起阅读 »

谷歌今日宣布iOS版Chrome浏览器开源

chrome iOS

2月1日,谷歌正式宣布,iOS版Chrome浏览器的代码将并归于Chromium项目,并可以通过谷歌开源网站下载。据谷歌工程师表示,最近几年,他们花费了大量的时间去调整iOS版Chrome,所以有大量的代码需要并归于Chromium项目。

谷歌今日宣布iOS版Chrome浏览器开源
由于iOS平台需要Chrome浏览器包含更多复杂的内容,比如iOS平台的浏览器必须基于WebKit渲染引擎打造。所以在此之前,iOS版Chrome浏览器与Chromium项目是相互分离。如今这一问题得以解决,iOS版Chrome浏览器将迎来更多新的元素。目前Chrome浏览器可以在App Store中免费下载。

继续阅读 »

2月1日,谷歌正式宣布,iOS版Chrome浏览器的代码将并归于Chromium项目,并可以通过谷歌开源网站下载。据谷歌工程师表示,最近几年,他们花费了大量的时间去调整iOS版Chrome,所以有大量的代码需要并归于Chromium项目。

谷歌今日宣布iOS版Chrome浏览器开源
由于iOS平台需要Chrome浏览器包含更多复杂的内容,比如iOS平台的浏览器必须基于WebKit渲染引擎打造。所以在此之前,iOS版Chrome浏览器与Chromium项目是相互分离。如今这一问题得以解决,iOS版Chrome浏览器将迎来更多新的元素。目前Chrome浏览器可以在App Store中免费下载。

收起阅读 »

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别

状态栏

手机的顶部状态栏,也就是信号、电量那条,有4种状态,分别是正常、变色、透明(也称沉浸式状态栏)、消失(也就是全屏)。
后3种特殊用法,具体见下:

状态栏变色

常见使用场景:如果title背景为纯色且显眼,一般会把状态栏的背景色也变成title的颜色,看起来大气,比如流应用中的网易新闻。

写法:
使用5+API plus.navigator.setStatusBarBackground)。

首页配置
首页需要在manifest.json文件中,plus->launchwebview下添加statusbar节点,并配置background的值(格式为#RRGGBB)。

若首页为secondwebview,则调整launchwebview为secondwebview即可。

终端支持:

  • Android5及以上系统支持;
  • iOS7.0及以上系统支持。

前景色处理:
当背景色调整后,如果调整不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
同时前景色处理在终端支持方面:

  • Android5只有小米和魅族支持,Android6及以上所有安卓支持;
  • iOS7及以上支持

高度处理:此时webview高度没有全屏,webview高度+状态栏高度=手机屏幕高度。
也就是转场动画时,webview动画是不会通顶的,状态栏不会在转场时变化。

状态栏透明(沉浸式)

常见使用场景:如果页面顶部是图片,一般会把状态栏变成透明,此时同时会处理成滚动后恢复为纯色title,比如流应用中的36kr:


或者看视频https://v.qq.com/x/page/h0386sphgpt.html

写法:
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

终端支持:

  • Android4.4及以上系统支持;
  • iOS7.0及以上系统支持。
    前景色处理:
    与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
    前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
    同时前景色处理在终端支持方面:
  • Android5只有小米和魅族支持,Android6及以上所有安卓支持;
  • iOS7及以上支持

高度处理:
注意,此时webview高度为全屏,状态栏高度为0,也就是webview高度=屏幕高度。
状态栏背景透明后前景图标覆盖在webview顶部。
尤其注意此时dom里涉及fix定位计算的元素,可能需要重新排高度。
在状态栏透明的情况下,转场动画时,webview动画是会通顶的,状态栏那里也会有条线左右移动。

其他注意:
沉浸式状态栏不支持动态调整,属于应用级,真机运行不生效,需要提交到云端打包后有效。
一个app设置了沉浸式,就意味着里面的每个webview都变成沉浸式。
这可能会造成很多页面都需要调整高度,此时有一种方案,就是在webview创建时,允许通过一个参数设置把这个webview的状态条再模拟显示出来,plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:"#D4D4D4"}})。这样设置后,webview的高度重新回到状态栏下方,不再顶到屏幕顶部。
此api从HBuilder8.1 alpha版起生效。

示例:
在hello mui里的nav bar示例中,提供了原生的渐变头和HTML的渐变头2种示例,大家可以参考。

全屏显示 (没有状态栏)

常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:
设置应用全屏显示
终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。

继续阅读 »

手机的顶部状态栏,也就是信号、电量那条,有4种状态,分别是正常、变色、透明(也称沉浸式状态栏)、消失(也就是全屏)。
后3种特殊用法,具体见下:

状态栏变色

常见使用场景:如果title背景为纯色且显眼,一般会把状态栏的背景色也变成title的颜色,看起来大气,比如流应用中的网易新闻。

写法:
使用5+API plus.navigator.setStatusBarBackground)。

首页配置
首页需要在manifest.json文件中,plus->launchwebview下添加statusbar节点,并配置background的值(格式为#RRGGBB)。

若首页为secondwebview,则调整launchwebview为secondwebview即可。

终端支持:

  • Android5及以上系统支持;
  • iOS7.0及以上系统支持。

前景色处理:
当背景色调整后,如果调整不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
同时前景色处理在终端支持方面:

  • Android5只有小米和魅族支持,Android6及以上所有安卓支持;
  • iOS7及以上支持

高度处理:此时webview高度没有全屏,webview高度+状态栏高度=手机屏幕高度。
也就是转场动画时,webview动画是不会通顶的,状态栏不会在转场时变化。

状态栏透明(沉浸式)

常见使用场景:如果页面顶部是图片,一般会把状态栏变成透明,此时同时会处理成滚动后恢复为纯色title,比如流应用中的36kr:


或者看视频https://v.qq.com/x/page/h0386sphgpt.html

写法:
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

终端支持:

  • Android4.4及以上系统支持;
  • iOS7.0及以上系统支持。
    前景色处理:
    与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
    前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
    同时前景色处理在终端支持方面:
  • Android5只有小米和魅族支持,Android6及以上所有安卓支持;
  • iOS7及以上支持

高度处理:
注意,此时webview高度为全屏,状态栏高度为0,也就是webview高度=屏幕高度。
状态栏背景透明后前景图标覆盖在webview顶部。
尤其注意此时dom里涉及fix定位计算的元素,可能需要重新排高度。
在状态栏透明的情况下,转场动画时,webview动画是会通顶的,状态栏那里也会有条线左右移动。

其他注意:
沉浸式状态栏不支持动态调整,属于应用级,真机运行不生效,需要提交到云端打包后有效。
一个app设置了沉浸式,就意味着里面的每个webview都变成沉浸式。
这可能会造成很多页面都需要调整高度,此时有一种方案,就是在webview创建时,允许通过一个参数设置把这个webview的状态条再模拟显示出来,plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:"#D4D4D4"}})。这样设置后,webview的高度重新回到状态栏下方,不再顶到屏幕顶部。
此api从HBuilder8.1 alpha版起生效。

示例:
在hello mui里的nav bar示例中,提供了原生的渐变头和HTML的渐变头2种示例,大家可以参考。

全屏显示 (没有状态栏)

常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:
设置应用全屏显示
终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。

收起阅读 »

关于appid太坑了

能不能限制一下hb的appid,
或换个名字,以为是应用的appid,原来是hb自己ID.
如果写成xxx.app那个坑爹了.
但用户习惯都是写
com.xxx.app

能不能限制一下hb的appid,
或换个名字,以为是应用的appid,原来是hb自己ID.
如果写成xxx.app那个坑爹了.
但用户习惯都是写
com.xxx.app

mui.get mui.post

MUI起步阶段在没有足够了解MUI-AJAX的情况下使用了mui.ajax简化方法;

项目收尾却要详细的处理各种错误,又想保持自己源代码不改变;

怎么办?

打开mui.min.js--->找到mui.ajax部分,如果你是通过HB直接建立的项目,你可以搜索:a.get=function(POST一样)就可以找到这个部分;

修改示例:a.get=function(){
var b=r.apply(null,arguments);
b.timeout=8000;//超时 单位:ms
b.error=function(){ //错误处理
if(!plus.webview.getWebviewById('ajaxError.html')){
plus.webview.create('views/ajaxError.html', 'ajaxError.html',null, null);
setTimeout(Function("plus.webview.show('ajaxError.html','slide-in-right',300,null, null);"),500);
}else{
plus.webview.show('ajaxError.html', 'slide-in-right', 500, null, null);
}plus.nativeUI.closeWaiting();
mui.toast('XMLHttpRequest:'+arguments[0].readyState+','+arguments[1]);
};return a.ajax(b)}

至此你就可以在不修改自己源码的基础上满足此需求!

继续阅读 »

MUI起步阶段在没有足够了解MUI-AJAX的情况下使用了mui.ajax简化方法;

项目收尾却要详细的处理各种错误,又想保持自己源代码不改变;

怎么办?

打开mui.min.js--->找到mui.ajax部分,如果你是通过HB直接建立的项目,你可以搜索:a.get=function(POST一样)就可以找到这个部分;

修改示例:a.get=function(){
var b=r.apply(null,arguments);
b.timeout=8000;//超时 单位:ms
b.error=function(){ //错误处理
if(!plus.webview.getWebviewById('ajaxError.html')){
plus.webview.create('views/ajaxError.html', 'ajaxError.html',null, null);
setTimeout(Function("plus.webview.show('ajaxError.html','slide-in-right',300,null, null);"),500);
}else{
plus.webview.show('ajaxError.html', 'slide-in-right', 500, null, null);
}plus.nativeUI.closeWaiting();
mui.toast('XMLHttpRequest:'+arguments[0].readyState+','+arguments[1]);
};return a.ajax(b)}

至此你就可以在不修改自己源码的基础上满足此需求!

收起阅读 »

感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】

小程序 性能

从2014年正式发布,3岁多的HBuilder正式发布了8.0,巧的是HBuilder的开发者数量也正好达到了80万。
中国HTML5开发者一共有多少我们不知道,但HBuilder确认是中国的主流HTML5开发工具无疑了。
在此之前,中国人制作开发工具从未成功过,有尝试者,都败在海外产品下。
如今我们终于可以自豪的说,HBuilder,可以和任何海外顶尖开发工具平起平坐!

成为主流开发工具,是一种荣誉,更是一种责任。
中国的HTML5发展,DCloud可以、也应当做更多事。

在过去的2016年,HTML5行业发生了重大的变化。不是喊HTML5元年来了,这次不是狼来了,是狼真的来了。
在微信小程序和流应用的影响下,人们终于认识到,HTML5经过强化后,是完全可达到商用标准的。
微信小程序虽然是私有语法,但wxml在手机端运行时也会翻译成html,其对HTML5的各种增强优化措施比如:多webview,采用webview动画来替代低效的DOM动画;采用c/s模式提升弱网表现,虽然有client端但可以即点即用。
这些是不是和流应用很像?
当然更真实的情况是,DCloud在2015年就给微信团队演示了流应用,DCloud的流应用让微信看到了一个新技术拐点的到来,我们如何优化html5的体验,又如何强化html5的优势,包括即扫即得的快码、像发消息一样分享应用,包括扫码、分享的直达二级页面,都成为目前微信小程序的重要应用场景。
不过我们并不埋怨什么,而是非常感谢微信,因为仅靠DCloud一家是难以快速教育市场的,没有微信小程序,不会有这么多人意识到强化过的HTML5可以达到原生体验。
当html5将替代原生成为主流技术平台的大幕拉起时,我们要做出比微信小程序体验更好、功能UI更加丰富、商业模式更加开放的产品,给开发者和用户更自由、更优质的选择。

在过去的2016年,我们也很高兴的看到一大批优秀的大型App入驻流应用平台,我们对html5优势的发掘,在商用环境中被证明,出现了一批体验良好、付费转化率达到原生水准、而获客成本又数倍低于原生App的案例,给开发商和用户带来了真真切切的价值。

可以看看这些操作视频:
36kr流应用
2秒快速启动、快速切换窗体、窗体滑动跟手、脱线可用,完全原生体验。

唯品会流应用
2秒快速启动、左右tab跟手拖动切换、下拉刷新、快速窗体进入,已在商用环境中取到良好证明,付费转化率、获客成本各项数据指标都获得成功。

体验方式,下载流应用管理器

HBuilder8.0,是HBuilder的一个里程碑产品,这次更新大幅强化了HTML5的性能体验,在启动速度、窗体切换速度、拖动等人机交互流畅度上达到了新的高度。
过去的HBuilder版本,已经帮助很多开发商取得成功,完全基于HTML5+打包的App中,美丽修行在Appstore健康健美分类中排名14、弈客围棋在Appstore体育分类中排名52、悟空理财在Appstore财务分类中排名86……
相信HBuilder8.0的发布,能帮助更多HTML5开发者取得成功,收获更多用户!
点击如下链接,了解HBuilder 8.0 更新日志及性能优化解读:http://ask.dcloud.net.cn/question/27999

继续阅读 »

从2014年正式发布,3岁多的HBuilder正式发布了8.0,巧的是HBuilder的开发者数量也正好达到了80万。
中国HTML5开发者一共有多少我们不知道,但HBuilder确认是中国的主流HTML5开发工具无疑了。
在此之前,中国人制作开发工具从未成功过,有尝试者,都败在海外产品下。
如今我们终于可以自豪的说,HBuilder,可以和任何海外顶尖开发工具平起平坐!

成为主流开发工具,是一种荣誉,更是一种责任。
中国的HTML5发展,DCloud可以、也应当做更多事。

在过去的2016年,HTML5行业发生了重大的变化。不是喊HTML5元年来了,这次不是狼来了,是狼真的来了。
在微信小程序和流应用的影响下,人们终于认识到,HTML5经过强化后,是完全可达到商用标准的。
微信小程序虽然是私有语法,但wxml在手机端运行时也会翻译成html,其对HTML5的各种增强优化措施比如:多webview,采用webview动画来替代低效的DOM动画;采用c/s模式提升弱网表现,虽然有client端但可以即点即用。
这些是不是和流应用很像?
当然更真实的情况是,DCloud在2015年就给微信团队演示了流应用,DCloud的流应用让微信看到了一个新技术拐点的到来,我们如何优化html5的体验,又如何强化html5的优势,包括即扫即得的快码、像发消息一样分享应用,包括扫码、分享的直达二级页面,都成为目前微信小程序的重要应用场景。
不过我们并不埋怨什么,而是非常感谢微信,因为仅靠DCloud一家是难以快速教育市场的,没有微信小程序,不会有这么多人意识到强化过的HTML5可以达到原生体验。
当html5将替代原生成为主流技术平台的大幕拉起时,我们要做出比微信小程序体验更好、功能UI更加丰富、商业模式更加开放的产品,给开发者和用户更自由、更优质的选择。

在过去的2016年,我们也很高兴的看到一大批优秀的大型App入驻流应用平台,我们对html5优势的发掘,在商用环境中被证明,出现了一批体验良好、付费转化率达到原生水准、而获客成本又数倍低于原生App的案例,给开发商和用户带来了真真切切的价值。

可以看看这些操作视频:
36kr流应用
2秒快速启动、快速切换窗体、窗体滑动跟手、脱线可用,完全原生体验。

唯品会流应用
2秒快速启动、左右tab跟手拖动切换、下拉刷新、快速窗体进入,已在商用环境中取到良好证明,付费转化率、获客成本各项数据指标都获得成功。

体验方式,下载流应用管理器

HBuilder8.0,是HBuilder的一个里程碑产品,这次更新大幅强化了HTML5的性能体验,在启动速度、窗体切换速度、拖动等人机交互流畅度上达到了新的高度。
过去的HBuilder版本,已经帮助很多开发商取得成功,完全基于HTML5+打包的App中,美丽修行在Appstore健康健美分类中排名14、弈客围棋在Appstore体育分类中排名52、悟空理财在Appstore财务分类中排名86……
相信HBuilder8.0的发布,能帮助更多HTML5开发者取得成功,收获更多用户!
点击如下链接,了解HBuilder 8.0 更新日志及性能优化解读:http://ask.dcloud.net.cn/question/27999

收起阅读 »