HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【示例】原生标题栏titleNView使用说明

性能优化 navigator Webview HTML5+ mui titleNView

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新,新增原生导航栏控件
titleNView在js层也是nativeObj.View对象,可再次自由绘制定义。建议非必要不使用双webview模式的webview title,而改用原生title。
以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。现在有了titleNView后,可以减少webview的数量,进而大幅提高应用的整体性能。

titleNView规范地址:**http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

实际使用

可用属性

目前只有三个属性可以配置

  1. backgroundcolor 导航栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  2. titletext 导航栏标题文字内容,默认值为当前应用的标题; titlecolor:导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”
  3. titlecolor 导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

ps:注意属性的大小写。并且高度是固定的,为44px。

首页配置

首页的titleNView需要在manifest.json文件中配置。
plus->launchwebview->titleNView

"plus": {  
    "launchwebview": {  
        "titleNView": {  
            "backgroundcolor": "#f7f7f7",  
            "titletext": "首页",  
            "titlecolor": "#ff461f"  
        }  
    }  
}  

非首页webview

该属性必须在创建webview时就设置,不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {  
    titleNView: {  
        titleText: 'home页'  
    }  
});  
homeWv.show('slide-in-right');  

mui扩展

mui.openWindow({  
    url: 'home.html',  
    id: 'home',  
    styles: {  
        titleNView: {  
            titleText: 'home页'  
        }  
    }  
})  

补充
titleNView的高度是固定的,为了方便开发者,mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{  
    title:{//标题配置  
        text:'home页',  
    },  
    back:{//左上角返回箭头  
        image:{//图片格式  
            base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头  
        }  
    }  
});  

关于openWindowWithTitle方法,请参考mui相关文档

获取titleNView对象

通过getTitleNView()方法,可以获取webview窗口的原生标题栏对象。

var titleNView= plus.webview.currentWebview().getTitleNView();  

添加button

可以通过直接配置titleNView的buttons实现icon的绘制以及click事件的监听,参考文档http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
以及这篇文章内置浏览器titleNView版

修改titleText

var wv = plus.webview.currentWebview();  
wv.setStyle({  
    titleNView: {  
        titleText: '标题'  
    }  
});

绘制更多内容

更新说明中提到,titleNView在js层是nativeObj.View对象,可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程,首页的icon的绘制就是这样实现的,在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

继续阅读 »

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新,新增原生导航栏控件
titleNView在js层也是nativeObj.View对象,可再次自由绘制定义。建议非必要不使用双webview模式的webview title,而改用原生title。
以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。现在有了titleNView后,可以减少webview的数量,进而大幅提高应用的整体性能。

titleNView规范地址:**http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

实际使用

可用属性

目前只有三个属性可以配置

  1. backgroundcolor 导航栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  2. titletext 导航栏标题文字内容,默认值为当前应用的标题; titlecolor:导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”
  3. titlecolor 导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

ps:注意属性的大小写。并且高度是固定的,为44px。

首页配置

首页的titleNView需要在manifest.json文件中配置。
plus->launchwebview->titleNView

"plus": {  
    "launchwebview": {  
        "titleNView": {  
            "backgroundcolor": "#f7f7f7",  
            "titletext": "首页",  
            "titlecolor": "#ff461f"  
        }  
    }  
}  

非首页webview

该属性必须在创建webview时就设置,不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {  
    titleNView: {  
        titleText: 'home页'  
    }  
});  
homeWv.show('slide-in-right');  

mui扩展

mui.openWindow({  
    url: 'home.html',  
    id: 'home',  
    styles: {  
        titleNView: {  
            titleText: 'home页'  
        }  
    }  
})  

补充
titleNView的高度是固定的,为了方便开发者,mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{  
    title:{//标题配置  
        text:'home页',  
    },  
    back:{//左上角返回箭头  
        image:{//图片格式  
            base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头  
        }  
    }  
});  

关于openWindowWithTitle方法,请参考mui相关文档

获取titleNView对象

通过getTitleNView()方法,可以获取webview窗口的原生标题栏对象。

var titleNView= plus.webview.currentWebview().getTitleNView();  

添加button

可以通过直接配置titleNView的buttons实现icon的绘制以及click事件的监听,参考文档http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
以及这篇文章内置浏览器titleNView版

修改titleText

var wv = plus.webview.currentWebview();  
wv.setStyle({  
    titleNView: {  
        titleText: '标题'  
    }  
});

绘制更多内容

更新说明中提到,titleNView在js层是nativeObj.View对象,可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程,首页的icon的绘制就是这样实现的,在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

收起阅读 »

【工具分享】iOS app上架辅助工具分享给没苹果机的开发者

iOS打包

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader这个工具可以实现在windows,linux或mac上直接使用,提供了极大的便利。而且可以免费使用,分享给有需要的开发者们。

博客:http://www.appuploader.net/blog/

继续阅读 »

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader这个工具可以实现在windows,linux或mac上直接使用,提供了极大的便利。而且可以免费使用,分享给有需要的开发者们。

博客:http://www.appuploader.net/blog/

收起阅读 »

mui h5+ 实战开发课程

HBuilder hellomui

大家好东翌学院周年庆提供订阅视频教学最低优惠,基础课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js)只要299元!
高级课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui-h5+ APP开发实战功能)只要499元! 视频地址 上午十点 下午三点 晚上八点老师直播老师qq2971611409

继续阅读 »

大家好东翌学院周年庆提供订阅视频教学最低优惠,基础课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js)只要299元!
高级课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui-h5+ APP开发实战功能)只要499元! 视频地址 上午十点 下午三点 晚上八点老师直播老师qq2971611409

收起阅读 »

关于第三方登录,IOS端不能注销登录用户信息的解决办法

iOS

首先我在别的帖子上看到了,如何取消掉Android端的第三方登录的信息,同时该题主也提出了IOS 端无法注销登录信息的,
在这里我分享一下自己的解决经验,(官方文档,是通过authorResult来进行判断触发logout方法,IOS端没有这个参数,所以我跳过判断直接调用方法,IOS端全部为注销成功提示,Android端方面,如果有登录信息的则是注销成功,没有登录信息的注销失败)

继续阅读 »

首先我在别的帖子上看到了,如何取消掉Android端的第三方登录的信息,同时该题主也提出了IOS 端无法注销登录信息的,
在这里我分享一下自己的解决经验,(官方文档,是通过authorResult来进行判断触发logout方法,IOS端没有这个参数,所以我跳过判断直接调用方法,IOS端全部为注销成功提示,Android端方面,如果有登录信息的则是注销成功,没有登录信息的注销失败)

收起阅读 »

NUI 富文本编辑器

现在的 MUI 缺少一个富文本编辑器的东西,希望能加上!
功能不需要太多,就像是 发起 --> 发起文章 这样的编辑器就很好,简单好用!

现在的 MUI 缺少一个富文本编辑器的东西,希望能加上!
功能不需要太多,就像是 发起 --> 发起文章 这样的编辑器就很好,简单好用!

视频教程 mui h5+ app实战开发视频

hellomui HelloH5

大家好东翌学院周年庆提供订阅视频教学最低优惠,基础课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js)只要299元!
高级课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui-h5+ APP开发实战功能)只要499元!进入教室 上午十点 下午三点 晚上八点老师直播老师qq2971611409

继续阅读 »

大家好东翌学院周年庆提供订阅视频教学最低优惠,基础课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js)只要299元!
高级课程包含的(HTML CSS H5 JS Castapp.js,MUI,H5+,PHP mysql,React-Native,Ecmascript6,React.js mui-UI实战 mui-h5+ APP开发实战功能)只要499元!进入教室 上午十点 下午三点 晚上八点老师直播老师qq2971611409

收起阅读 »

【文档】mui.slider轮播组件常用API

图片轮播 slide mui

组件介绍

轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。

示例

获取slide组件对象

var slider = mui('#slider').slider();  

常用API

gotoItem(index)
切换到指定轮播

slider.gotoItem(1); //切换至第二个轮播  

prevItem()
上一个轮播

slider.prevItem();  

nextItem()
下一个轮播

slider.nextItem();  

getSlideNumber()
当前所处位置

slider.getSlideNumber();  

stopped
禁用/开启滑动切换

slider.stopped = false; //开启滑动切换  
slider.stopped = true; //关闭滑动切换  

更多

附上一个简单的示例,解压后将html文件放在mui工程的根目录下即可预览效果。
更多关于slide组件的介绍,参考mui官方文档

PS:关于slide组件,使用过程中如有更多的疑问,请在下方留言。

继续阅读 »

组件介绍

轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。

示例

获取slide组件对象

var slider = mui('#slider').slider();  

常用API

gotoItem(index)
切换到指定轮播

slider.gotoItem(1); //切换至第二个轮播  

prevItem()
上一个轮播

slider.prevItem();  

nextItem()
下一个轮播

slider.nextItem();  

getSlideNumber()
当前所处位置

slider.getSlideNumber();  

stopped
禁用/开启滑动切换

slider.stopped = false; //开启滑动切换  
slider.stopped = true; //关闭滑动切换  

更多

附上一个简单的示例,解压后将html文件放在mui工程的根目录下即可预览效果。
更多关于slide组件的介绍,参考mui官方文档

PS:关于slide组件,使用过程中如有更多的疑问,请在下方留言。

收起阅读 »

【源码分享】分享一个基于官方share.html简化的分享js代码(微信,朋友圈,QQ)

分享插件 微信 分享 微博分享

基于官方demo中的share.hml中的分享内容或者链接到微博,微信,QQ,自己简化了一个通用的分享方法,进一步减少分享功能的开发量。

代码附件中,由于不能上传html文件,所以把文件扩展名改成了doc,下载下来后改成share.html就可以了

js代码如下,也可以把文件中的js代码直接放到js文件中。
用法:

//这里的入口方法是   
/**  
 * 分享内容或者链接  
 * @param  {JSON} msgdata 分享数据的对象  
 * msgdata = {‘title’:'','href':'','desc':'','pic':''} 包含4个字段  
 * @param  {Boolean} ishref  是否分享链接  
 */  
function appshare(msgdata, ishref){}  
//例如引入了js文件后,  
appshare({'title':'DCloud HBuilder-做最好的HTML5开发工具','href':'http://www.dcloud.io/','desc':'我正在使用HBuilder+HTML5开发移动应用,赶紧跟我一起来体验!','pic':'_www/img/logo.png'},true)

具体js代码:


var shares = null;  
mui.plusReady(function() {  
    // 更新分享服务  
    plus.share.getServices(function(s) {  
        shares = {};  
        for(var i in s) {  
            var t = s[i];  
            shares[t.id] = t;  
        }  
    }, function(e) {  
        mui.toast("无享服务!");  
        console.log("获取分享服务列表失败:" + e.message);  
    });  
});  

/**  
 * 分享操作  
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)  
 * @param {Boolean} ishref 是否分享链接  
 * @param {JSON} msginfo 分享内容  
 */  

function shareAction(sb, ishref, msginfo) {  
    if(!sb || !sb.s) {  
        mui.toast("无效的分享服务!");  
        return;  
    }  
    var msg = { content: msginfo.content, extra: { scene: sb.x } };  
    if(ishref) {  
        msg.title = msginfo.title;  
        msg.href = msginfo.href;  
        msg.content = msginfo.content;  
        msg.thumbs = [msginfo.pic];  
        msg.pictures = [msginfo.pic];  
    }  
    // 发送分享  
    if(sb.s.authenticated) {  
        console.log("---已授权---");  
        shareMessage(msg, sb.s);  
    } else {  
        console.log("---未授权---");  
        sb.s.authorize(function() {  
            shareMessage(msg, sb.s);  
        }, function(e) {  
            console.log("认证授权失败:" + e.code + " - " + e.message);  
        });  
    }  
}  

/**  
 * 发送分享消息  
 * @param {JSON} msg  
 * @param {plus.share.ShareService} s  
 */  
function shareMessage(msg, s) {  
    s.send(  
        msg,  
        function() {  
            mui.toast("分享到\"" + s.description + "\"成功! ");  
        },  
        function(e) {  
            mui.toast("分享到\"" + s.description + "\"失败! ");  
            // console.log("分享到\"" + s.description + "\"失败: " + JSON.stringify(e));  
        }  
    );  
}  

/**  
 * 分享内容或者链接  
 * @param  {JSON} msgdata 分享数据的对象  
 * @param  {Boolean} ishref  是否分享链接  
 */  
var appshare = function (msgdata, ishref) {  
    // 分享参数  
    if(ishref){  
        var msginfo = { title: msgdata.title, href: msgdata.href, content: msgdata.desc, pic: msgdata.pic };  
    }else{  
        var msginfo = { content: msgdata.desc };  
    }  

    var shareBts = [];  
    // 更新分享列表  
    var ss = shares['weixin'];  
    ss && ss.nativeClient && (shareBts.push({ title: '微信朋友圈', s: ss, x: 'WXSceneTimeline' }), shareBts.push({ title: '微信好友', s: ss, x: 'WXSceneSession' }));  

    ss = shares['qq'];  
    ss && ss.nativeClient && shareBts.push({ title: 'QQ', s: ss });  

    if(!ishref){  
        ss = shares['sinaweibo'];  
        ss && shareBts.push({ title: '新浪微博', s: ss });  
    }  

    // 弹出分享列表  
    shareBts.length > 0 ? plus.nativeUI.actionSheet({  
            title: '分享',  
            cancel: '取消',  
            buttons: shareBts  
        },  
        function(e) {  
            (e.index > 0) && shareAction(shareBts[e.index - 1], ishref, msginfo);  
        }  
    ) : plus.nativeUI.alert('当前环境无法支持分享操作!');  
}  
继续阅读 »

基于官方demo中的share.hml中的分享内容或者链接到微博,微信,QQ,自己简化了一个通用的分享方法,进一步减少分享功能的开发量。

代码附件中,由于不能上传html文件,所以把文件扩展名改成了doc,下载下来后改成share.html就可以了

js代码如下,也可以把文件中的js代码直接放到js文件中。
用法:

//这里的入口方法是   
/**  
 * 分享内容或者链接  
 * @param  {JSON} msgdata 分享数据的对象  
 * msgdata = {‘title’:'','href':'','desc':'','pic':''} 包含4个字段  
 * @param  {Boolean} ishref  是否分享链接  
 */  
function appshare(msgdata, ishref){}  
//例如引入了js文件后,  
appshare({'title':'DCloud HBuilder-做最好的HTML5开发工具','href':'http://www.dcloud.io/','desc':'我正在使用HBuilder+HTML5开发移动应用,赶紧跟我一起来体验!','pic':'_www/img/logo.png'},true)

具体js代码:


var shares = null;  
mui.plusReady(function() {  
    // 更新分享服务  
    plus.share.getServices(function(s) {  
        shares = {};  
        for(var i in s) {  
            var t = s[i];  
            shares[t.id] = t;  
        }  
    }, function(e) {  
        mui.toast("无享服务!");  
        console.log("获取分享服务列表失败:" + e.message);  
    });  
});  

/**  
 * 分享操作  
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)  
 * @param {Boolean} ishref 是否分享链接  
 * @param {JSON} msginfo 分享内容  
 */  

function shareAction(sb, ishref, msginfo) {  
    if(!sb || !sb.s) {  
        mui.toast("无效的分享服务!");  
        return;  
    }  
    var msg = { content: msginfo.content, extra: { scene: sb.x } };  
    if(ishref) {  
        msg.title = msginfo.title;  
        msg.href = msginfo.href;  
        msg.content = msginfo.content;  
        msg.thumbs = [msginfo.pic];  
        msg.pictures = [msginfo.pic];  
    }  
    // 发送分享  
    if(sb.s.authenticated) {  
        console.log("---已授权---");  
        shareMessage(msg, sb.s);  
    } else {  
        console.log("---未授权---");  
        sb.s.authorize(function() {  
            shareMessage(msg, sb.s);  
        }, function(e) {  
            console.log("认证授权失败:" + e.code + " - " + e.message);  
        });  
    }  
}  

/**  
 * 发送分享消息  
 * @param {JSON} msg  
 * @param {plus.share.ShareService} s  
 */  
function shareMessage(msg, s) {  
    s.send(  
        msg,  
        function() {  
            mui.toast("分享到\"" + s.description + "\"成功! ");  
        },  
        function(e) {  
            mui.toast("分享到\"" + s.description + "\"失败! ");  
            // console.log("分享到\"" + s.description + "\"失败: " + JSON.stringify(e));  
        }  
    );  
}  

/**  
 * 分享内容或者链接  
 * @param  {JSON} msgdata 分享数据的对象  
 * @param  {Boolean} ishref  是否分享链接  
 */  
var appshare = function (msgdata, ishref) {  
    // 分享参数  
    if(ishref){  
        var msginfo = { title: msgdata.title, href: msgdata.href, content: msgdata.desc, pic: msgdata.pic };  
    }else{  
        var msginfo = { content: msgdata.desc };  
    }  

    var shareBts = [];  
    // 更新分享列表  
    var ss = shares['weixin'];  
    ss && ss.nativeClient && (shareBts.push({ title: '微信朋友圈', s: ss, x: 'WXSceneTimeline' }), shareBts.push({ title: '微信好友', s: ss, x: 'WXSceneSession' }));  

    ss = shares['qq'];  
    ss && ss.nativeClient && shareBts.push({ title: 'QQ', s: ss });  

    if(!ishref){  
        ss = shares['sinaweibo'];  
        ss && shareBts.push({ title: '新浪微博', s: ss });  
    }  

    // 弹出分享列表  
    shareBts.length > 0 ? plus.nativeUI.actionSheet({  
            title: '分享',  
            cancel: '取消',  
            buttons: shareBts  
        },  
        function(e) {  
            (e.index > 0) && shareAction(shareBts[e.index - 1], ishref, msginfo);  
        }  
    ) : plus.nativeUI.alert('当前环境无法支持分享操作!');  
}  
收起阅读 »

【示例】双首页secondwebview配置的使用

manifest.json配置 Webview HTML5+

概念澄清

HBuilder8.0.1版更新说明App中有一条:
【重要】新增双首页配置(manifest->plus->secondwebview),加速首页为双webview模式时的应用启动速度。

以往流应用或5+App的首页,就是指的入口页面这一个页面,应用启动时native层立即创建这个launchWebview。
双首页配置下,入口页面依旧是launchWebview,但是还有一个secondWebview同时被创建。两个webview的操作由native层完成,大大提高了第二个webview的创建及加载速度。

举例说明

常规方案

以首页父子页面结构为例,子页面的创建在父页面(即首页)中完成。

var launch = plus.webview.getLaunchWebview();  
var home = plus.webview.create('home.html','home', {  
    top: '50px',  
    bottom: 0  
});  
launch.append(home);  

创建子页面这个操作,需要在首页加载完成后才开始。这样就会造成用户先看到首页部分的内容,然后才能看到子页面的内容。

双首页模式

依照更新说明,在manifest.json文件的plus节点下,新增secondwebview节点配置。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home"  
    }  
}  

这里同样支持secondWebview的styles等属性。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home",  
        "top": "50px",  
        "bottom": "0px"  
    }  
}  

然后,在launchWebview中建立父子关系即可。当然,如果非必要情况下,是不用建立父子关系的。

var _self = plus.webview.getLaunchWebview();  
var _second = plus.webview.getSecondWebview();  
_self.append(_second);  

在双首页模式下,父页面和子页面的内容是同时显示的,不会给用户造成加载延迟的感觉,大大增强了流应用及5+App的体验。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

继续阅读 »

概念澄清

HBuilder8.0.1版更新说明App中有一条:
【重要】新增双首页配置(manifest->plus->secondwebview),加速首页为双webview模式时的应用启动速度。

以往流应用或5+App的首页,就是指的入口页面这一个页面,应用启动时native层立即创建这个launchWebview。
双首页配置下,入口页面依旧是launchWebview,但是还有一个secondWebview同时被创建。两个webview的操作由native层完成,大大提高了第二个webview的创建及加载速度。

举例说明

常规方案

以首页父子页面结构为例,子页面的创建在父页面(即首页)中完成。

var launch = plus.webview.getLaunchWebview();  
var home = plus.webview.create('home.html','home', {  
    top: '50px',  
    bottom: 0  
});  
launch.append(home);  

创建子页面这个操作,需要在首页加载完成后才开始。这样就会造成用户先看到首页部分的内容,然后才能看到子页面的内容。

双首页模式

依照更新说明,在manifest.json文件的plus节点下,新增secondwebview节点配置。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home"  
    }  
}  

这里同样支持secondWebview的styles等属性。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home",  
        "top": "50px",  
        "bottom": "0px"  
    }  
}  

然后,在launchWebview中建立父子关系即可。当然,如果非必要情况下,是不用建立父子关系的。

var _self = plus.webview.getLaunchWebview();  
var _second = plus.webview.getSecondWebview();  
_self.append(_second);  

在双首页模式下,父页面和子页面的内容是同时显示的,不会给用户造成加载延迟的感觉,大大增强了流应用及5+App的体验。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

收起阅读 »

HBuilder不能返回撤销

例如 先撤销,再向前撤销就不行了

例如 先撤销,再向前撤销就不行了

mui动态索引列表

indexed list

自己写了个三维数组,瞎弄了一下,不知道这样弄对不对,或者还有没有便捷的方法,大神们看一下

自己写了个三维数组,瞎弄了一下,不知道这样弄对不对,或者还有没有便捷的方法,大神们看一下

个推 成功实现推送功能

推送 个推

马上要用到推送功能了,于是就进行了尝试,并成功实现了推送功能!需要注意的点如下:
在做推送功能之前先查看推送插件开发指南
为了能使安卓和ios都能推送,选择透传消息模板。手机用户有自主关闭推送的权利,如果被关闭自然无法收到push。

Android:
1.在个推官网设置appid appsecret等等参数,一定要和app一致,

  1. 个推中的应用标识就是appid,两者一定要一致。
    3.安卓平台打包需要确认打包填写的app包名和在个推平台创建应用时填写的包名相一致。

IOS:
1.证书对应的APPID和在HBuilder打包填写的APPID要一致。
2.IOS平台打包是需要确人打包填写的APPID和提交给个推平台的APS证书内包含的APPID一致。
3.IOS有两个证书,一个是推送证书,一个是开发证书。

继续阅读 »

马上要用到推送功能了,于是就进行了尝试,并成功实现了推送功能!需要注意的点如下:
在做推送功能之前先查看推送插件开发指南
为了能使安卓和ios都能推送,选择透传消息模板。手机用户有自主关闭推送的权利,如果被关闭自然无法收到push。

Android:
1.在个推官网设置appid appsecret等等参数,一定要和app一致,

  1. 个推中的应用标识就是appid,两者一定要一致。
    3.安卓平台打包需要确认打包填写的app包名和在个推平台创建应用时填写的包名相一致。

IOS:
1.证书对应的APPID和在HBuilder打包填写的APPID要一致。
2.IOS平台打包是需要确人打包填写的APPID和提交给个推平台的APS证书内包含的APPID一致。
3.IOS有两个证书,一个是推送证书,一个是开发证书。

收起阅读 »