HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

创业项目寻靠谱开发者

招聘

‘’找到家‘’定位下一代智能租房app,主要通过智能门锁实现租客自助看房,在线签约,支付房租,房东自动出租,方便管理的功能。通过智能门锁解决房源真实性,唯一性和有效性问题。目前蓝牙+键盘密码硬件门锁已经开发完成。项目创始人冯渊博,拥有多年公寓出租行业经验,从15年初就规划开发‘’找到家‘’项目,中间找过技术合伙人,兼职开发人员,外包公司,终究因为不懂技术,经验不足以失败告终。目前已经在合肥已经筛选了合适的后台,ui人员,现缺一名合肥当地h5开发者参与项目。如果你正想创业,正在找项目那更好!具体合作形式可以电话联系18956019698,也可直接加我.qq7181487,期待有志青年加入‘’找到家‘’!

继续阅读 »

‘’找到家‘’定位下一代智能租房app,主要通过智能门锁实现租客自助看房,在线签约,支付房租,房东自动出租,方便管理的功能。通过智能门锁解决房源真实性,唯一性和有效性问题。目前蓝牙+键盘密码硬件门锁已经开发完成。项目创始人冯渊博,拥有多年公寓出租行业经验,从15年初就规划开发‘’找到家‘’项目,中间找过技术合伙人,兼职开发人员,外包公司,终究因为不懂技术,经验不足以失败告终。目前已经在合肥已经筛选了合适的后台,ui人员,现缺一名合肥当地h5开发者参与项目。如果你正想创业,正在找项目那更好!具体合作形式可以电话联系18956019698,也可直接加我.qq7181487,期待有志青年加入‘’找到家‘’!

收起阅读 »

Android平台设置UrlSchemes,实现被第三方应用调用

scheme UrlSchemes schema

此文档不再维护,请参考新文档地址:https://uniapp.dcloud.io/tutorial/app-android-schemes

如果你的App想要在手机系统中注册一个scheme协议,方便其他App调用你的App,那么可以根据本文设置。

设置UrlSchemes

打开项目的manifest.json文件,切换到“代码视图”

  • 5+App项目
    在manifest.json文件的"plus"->"distribute"->"google"下添加schemes节点数据如下:
    "plus": {  
    "distribute": {  
        "google": {  
            "schemes": [  
                "test"  
            ],  
            //...  
        },  
        //...  
    },  
    //...  
    },  
    //...
  • uni-app项目
    把上面的schemes节点数据放到manifest.json的"app-plus"->"distribute"->"android"节点下

值域说明:为字符串数组,每个字符串为一个urlscheme,使用小写字母(不要使用特殊字符、中文),可设置多个。比如设置为test,那么其他App呼起你的app的scheme协议就是test://。

保存后提交App云端打包生效

浏览器中通过href启动应用

安装应用后,我们可以在html页面中,通过href直接调用应用:

<a href="test://abc">test:<a><br/>

5+ APP中处理urlscheme启动传递的参数

在其它应用中通过href调用Url Scheme传递过来的值,可以通过plus.runtime.arguments获取
其值为完整的urlscheme字符串,如上面href的值启动应用后获取的plus.runtime.arguments值为“test://abc”
代码示例如下:

document.addEventListener('plusready',function(){  
    checkArguments();  
},false);  
// 判断启动方式  
function checkArguments(){  
    console.log("plus.runtime.launcher: "+plus.runtime.launcher);  
    var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数,如直达到某新页面等  
    }  
}  
// 处理从后台恢复  
document.addEventListener('newintent',function(){  
    console.log("addEventListener: newintent");  
    checkArguments();  
},false);

uni-app中处理urlscheme启动传递的参数

在App.vue的onShow里可以直接获取

onShow: function() {  
    var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数,如直达到某新页面等  
    }  
}

HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://",方便开发者调测。

如果是本地(离线)打包,请自行在原生工程中配置

iOS平台请参考:
iOS平台通过UrlSchemes与第三方应用相互调用

继续阅读 »

此文档不再维护,请参考新文档地址:https://uniapp.dcloud.io/tutorial/app-android-schemes

如果你的App想要在手机系统中注册一个scheme协议,方便其他App调用你的App,那么可以根据本文设置。

设置UrlSchemes

打开项目的manifest.json文件,切换到“代码视图”

  • 5+App项目
    在manifest.json文件的"plus"->"distribute"->"google"下添加schemes节点数据如下:
    "plus": {  
    "distribute": {  
        "google": {  
            "schemes": [  
                "test"  
            ],  
            //...  
        },  
        //...  
    },  
    //...  
    },  
    //...
  • uni-app项目
    把上面的schemes节点数据放到manifest.json的"app-plus"->"distribute"->"android"节点下

值域说明:为字符串数组,每个字符串为一个urlscheme,使用小写字母(不要使用特殊字符、中文),可设置多个。比如设置为test,那么其他App呼起你的app的scheme协议就是test://。

保存后提交App云端打包生效

浏览器中通过href启动应用

安装应用后,我们可以在html页面中,通过href直接调用应用:

<a href="test://abc">test:<a><br/>

5+ APP中处理urlscheme启动传递的参数

在其它应用中通过href调用Url Scheme传递过来的值,可以通过plus.runtime.arguments获取
其值为完整的urlscheme字符串,如上面href的值启动应用后获取的plus.runtime.arguments值为“test://abc”
代码示例如下:

document.addEventListener('plusready',function(){  
    checkArguments();  
},false);  
// 判断启动方式  
function checkArguments(){  
    console.log("plus.runtime.launcher: "+plus.runtime.launcher);  
    var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数,如直达到某新页面等  
    }  
}  
// 处理从后台恢复  
document.addEventListener('newintent',function(){  
    console.log("addEventListener: newintent");  
    checkArguments();  
},false);

uni-app中处理urlscheme启动传递的参数

在App.vue的onShow里可以直接获取

onShow: function() {  
    var args= plus.runtime.arguments;  
    if(args){  
        // 处理args参数,如直达到某新页面等  
    }  
}

HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://",方便开发者调测。

如果是本地(离线)打包,请自行在原生工程中配置

iOS平台请参考:
iOS平台通过UrlSchemes与第三方应用相互调用

收起阅读 »

我的开发心得(收藏)

由于没有收藏功能,只能发文章收藏,方便查找,以下是三叔的开发心得
转载:http://ask.dcloud.net.cn/article/399(三叔的开发心得)
由于我经常问问题,每次找这篇文章都好麻烦,所以吧这个弄成文章。
其实我也是菜鸟,这里开一贴,记录我的学习开发中遇到的问题和解决方案,希望能帮助到后来的兄弟们。
openWindow方法

mui.openWindow({"url":"reg_wx.html","extras":{
"openId":openid
}

这样传值到reg_wx.html

在reg_wx.html里

function plusReady(){
var currentView = plus.webview.currentWebview();
document.getElementById("wx_appid").value = currentView.openId;
}
document.addEventListener('plusready',plusReady,false);

这么获取值

=============关于跨域==============================
通过mui的ajax请求是可以实现跨域的。
跨域是浏览器安全里的一个名词。记住了 是浏览器。
而我们的是app,请求并不是走浏览器脚本,而是用的H5+底层请求的。所以不存在什么跨域。直接调用。

===========获取应用入口页面的方法======================

var h=plus.webview.getWebviewById( plus.runtime.appid );
console.log( "应用首页Webview窗口:"+h.getURL() );

==========判断plus对象是否生效=======================

if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}

============获取上一页(获取父页面)的方法==============================

var preUrl = plus.webview.currentWebview().opener().getURL();
console.log(preUrl);

===========双击回退按钮后关闭app的方法==========================

//首页返回键处理
//处理逻辑:1秒内,连续两次按返回键,则退出应用;
var first = null;
mui.back = function() {
//首次按键,提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}

};

============手机网络状态========================================

document.addEventListener( "netchange", function() {
var network = plus.networkinfo.getCurrentType();
if(network < 2) {
if(this.network > 1) {
plus.nativeUI.toast('您的网络已断开', undefined, '期待乐');
}
}

if(this.network == 3 && network > 3) {  
    plus.nativeUI.toast('您网络已从wifi切换到蜂窝网络,浏览会产生流量', undefined, '期待乐', '我知道了');  
}  

this.network = network;  

});

==========手机回退键的触发======================================

function plusReady(){
ws=plus.webview.currentWebview();
// Android处理返回键
plus.key.addEventListener('backbutton',function(){
back();
},false);
compatibleAdjust();
}

=============有选择项的提示框==========

//退出登录
doLogout:function(){
var btnArray = ['再逛逛','是的'];
mui.confirm('你确定退出登录吗?', '提示', btnArray, function(e) {
if (e.index == 1) {
$.get(const_server_url+"/1/login/logout.json",function(data){
if(data.code == "200"){
m_login.clear();
mui.openWindow({
id:"registerPhone"
});
}else{
mui.alert(data.message);
}
});
}
});
}

===========微信支付中提示"支付权限检查失败"=========
微信支付有两个,一个是微信公众号的微信支付,
还有一个就是上面这个地址里面的微信支付,这两个微信支付不一样。
所以存在两个APPID、mch_id。
你用对了么

=========app升级代码=======================
参照: http://ask.dcloud.net.cn/question/5022,http://ask.dcloud.net.cn/article/182

继续阅读 »

由于没有收藏功能,只能发文章收藏,方便查找,以下是三叔的开发心得
转载:http://ask.dcloud.net.cn/article/399(三叔的开发心得)
由于我经常问问题,每次找这篇文章都好麻烦,所以吧这个弄成文章。
其实我也是菜鸟,这里开一贴,记录我的学习开发中遇到的问题和解决方案,希望能帮助到后来的兄弟们。
openWindow方法

mui.openWindow({"url":"reg_wx.html","extras":{
"openId":openid
}

这样传值到reg_wx.html

在reg_wx.html里

function plusReady(){
var currentView = plus.webview.currentWebview();
document.getElementById("wx_appid").value = currentView.openId;
}
document.addEventListener('plusready',plusReady,false);

这么获取值

=============关于跨域==============================
通过mui的ajax请求是可以实现跨域的。
跨域是浏览器安全里的一个名词。记住了 是浏览器。
而我们的是app,请求并不是走浏览器脚本,而是用的H5+底层请求的。所以不存在什么跨域。直接调用。

===========获取应用入口页面的方法======================

var h=plus.webview.getWebviewById( plus.runtime.appid );
console.log( "应用首页Webview窗口:"+h.getURL() );

==========判断plus对象是否生效=======================

if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}

============获取上一页(获取父页面)的方法==============================

var preUrl = plus.webview.currentWebview().opener().getURL();
console.log(preUrl);

===========双击回退按钮后关闭app的方法==========================

//首页返回键处理
//处理逻辑:1秒内,连续两次按返回键,则退出应用;
var first = null;
mui.back = function() {
//首次按键,提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}

};

============手机网络状态========================================

document.addEventListener( "netchange", function() {
var network = plus.networkinfo.getCurrentType();
if(network < 2) {
if(this.network > 1) {
plus.nativeUI.toast('您的网络已断开', undefined, '期待乐');
}
}

if(this.network == 3 && network > 3) {  
    plus.nativeUI.toast('您网络已从wifi切换到蜂窝网络,浏览会产生流量', undefined, '期待乐', '我知道了');  
}  

this.network = network;  

});

==========手机回退键的触发======================================

function plusReady(){
ws=plus.webview.currentWebview();
// Android处理返回键
plus.key.addEventListener('backbutton',function(){
back();
},false);
compatibleAdjust();
}

=============有选择项的提示框==========

//退出登录
doLogout:function(){
var btnArray = ['再逛逛','是的'];
mui.confirm('你确定退出登录吗?', '提示', btnArray, function(e) {
if (e.index == 1) {
$.get(const_server_url+"/1/login/logout.json",function(data){
if(data.code == "200"){
m_login.clear();
mui.openWindow({
id:"registerPhone"
});
}else{
mui.alert(data.message);
}
});
}
});
}

===========微信支付中提示"支付权限检查失败"=========
微信支付有两个,一个是微信公众号的微信支付,
还有一个就是上面这个地址里面的微信支付,这两个微信支付不一样。
所以存在两个APPID、mch_id。
你用对了么

=========app升级代码=======================
参照: http://ask.dcloud.net.cn/question/5022,http://ask.dcloud.net.cn/article/182

收起阅读 »

流应用开发指南

流应用

概述

通过HTML5做跨平台App,以往都是创业公司或外包公司在做。
一线的互联网公司不太在意研发成本,很少使用HTML5做App,即便5+已经可以达到原生的功能和体验。
流应用不是一个开发产品,是一个发行产品,它从另一个角度给一线互联网公司进入HTML5阵营一个重要动力。

流应用,结合了原生App和Web App的优势,又消除了各自的缺点。
基于HTML5+的HTML、js等程序可以达到原生的效果,同时DCloud的流式发行技术实现让应用边用边下,类似流媒体,免除过往从下载到安装多步
操作,实现5秒内完成App的安装和启动。

以往安卓应用市场下载原生App,从点击开始,经历下载-启动安装包-确认权限-解压安装-启动应用等多个流程,根据主流应用市场的数据,从下载到App真正激活启动,折损60%的用户。100次下载中只有40个真正启动了App。
而流应用,把激活率从40%提升至98%。

目前各大App开发商的推广人员都非常关注流应用,这意味着他们的业绩能大幅提升。

开发者使用5+开发的App,之前是把5+引擎和开发者的前端代码打包为apk和ipa发行到原生应用市场。
但流应用出现后,引擎预置到应用市场或rom中,开发者只需提交前端文件到应用市场,5+引擎的流应用模块会从服务器端流式加载HTML文件并安装到手机上。
这样还带来一个好处就是流应用大幅减少了安装包的体积。

关于流应用的更多介绍,可以看官网介绍http://www.dcloud.io/streamapp.html
强烈推荐了解流应用的各种入口演示视频

流应用如何开发

开发者可以根据自己的现状,选择不同的流应用开发模式,概括起来主要有如下几种模式:

  • 没有App、没有H5站、没有小程序:请基于mui框架开发一个新的App,可以同时兼容普通H5版
  • 已有H5站点:通过wap2app框架,强化H5站点的功能和体验达到原生效果,几天内就可以完成一个流应用。参考http://ask.dcloud.net.cn/article/1244
  • 已有微信小程序:通过微信小程序转换

当然如果开发者已经有基于HTML5+的 App,直接在HBuilder里点发行,提交到流应用平台即可,或者参考下文申请自动转换服务。

基于HTML5+mui实现跨平台开发

作为创业公司,如果还没有开发App,则建议使用mui框架,实现一次开发,同时发布到Android应用市场、Apple App Store、H5网站、流应用、,大幅降低开发成本;mui是一套UI框架,同时封装了HTML5+中的窗口管理部分,方便开发者快速开发;基于HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载;

开发者只需按照标准5+ App的开发步骤进行开发,开发完毕后,直接发布到流应用平台即可;如下为关联参考教程:

已有5+ App:从5+ App转换发布

如果你已经开发了5+App,你可以申请使用DCloud的自动转换服务,把5+App直接转换发布到流应用平台。使用你的HBuilder注册邮箱,发邮件给stream@dcloud.io,邮件格式要求如下:

  • 邮件标题:申请转换流应用-%appname%
  • 邮件内容:app获取地址,需要360手机助手(zhushou.360.cn)或应用宝(myapp.com)上的地址,未在这2个平台上线的app暂时无法自动转换为流应用

注意:1.提交的App需用户体验良好、质量过关、有一定用户基础;2.如果app里使用了原生插件,则无法自动转换。

如果你不希望自动转换,想手动发布流应用,那么在HBuilder里的发行菜单里,有“发行为流应用"菜单,按照该菜单的指引可以发布流应用。

  1. 升级的处理
    流应用的升级是DCloud独立提供的、更强大的、差量升级技术。
    请不要在流应用里检查更新,判断在流应用下,不走检查更新代码,避免任何apk、wgt、wgtu等升级方式的代码执行。
    也不要在app的设置或关于中放置检查更新的按钮。
    如果你的流应用要升级,请在HBuilder里直接提交新版,流应用的升级平台会自动计算差量、自动省流量更新。
    建议在你的升级检测代码前,加入如下包围判断:
    var ua = navigator.userAgent  
    //升级逻辑:判断5+环境下,且不是流应用  
    if(ua.indexOf("Html5Plus">0&&ua.indexOf("StreamApp")==-1)){  
    //继续执行升级逻辑  
    }

    若使用mui框架的话,可以简化代码:

    //升级逻辑:判断5+环境下,且不是流应用  
    if(mui.os.plus&&!mui.os.stream){  
    //继续执行升级逻辑  
    }

使用wap2app开发

如果企业已有上线的wap站,且wap站体验较好,可以通过wap2app产品实现wap站快速发布成流应用,wap2app立足wap站,通过适配,完成用户体验及能力的增强,主要功能点包括:
http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244

流应用如何测试

点击菜单“发行-提交流应用到测试服务器”,如下图
image
点击后界面如下图
image

1.配置页面引用关系

如果是wap2app项目页面关系在sitemap.json里配置。
如果是5+App项目,参考如下:
页面引用关系在manifest里配置,这里描述了App项目页面间及页面与资源间的关系,正确的页面引用关系可用于指导流应用引擎下载文件。
工程中所有文件的页面引用关系都必须配置正确;
点击上图中的"页面引用关系"链接,可跳转至页面引用关系可视化配置处,如下图
image
页面引用关系配置教程

2.提交流应用到测试平台

点击"立即提交"按钮,可提交此App到流应用测试平台,提交完毕后如下图
image
此时界面显示最后一次提交测试服务器的流应用的版本号及流应用二维码
注:
1.每次提交请确保manifest.json里的版本号比测试服务器上版本号大
2.请确保提交项目的Appid是使用本人的HBuilder账户申请的,暂不支持提交其他人的项目到测试平台
如果创建项目的人已经离职,且不能收回且HBuilder账户,则需要重新在HBuilder里建一个项目,使用新的appid操作。

3.扫码测试流应用

手机上安装DCloud流应用管理器,扫码测试。每个流应用在HBuilder的发行-发行为流应用界面里都有一个唯一的二维码,扫码即可安装。

通过扫描体验和测试,看App是否可正常且快速的被安装到手机上。
遇到问题再进一步调整页面引用关系的配置。
推荐把首页的资源控制在100k左右,以保证App可快速启动和安装。

但注意版本之间有差异,建议多在不同平台测试,iOS流应用、Android流应用、360手助都支持扫码测试。
此外注意,未正式发行的测试版流应用不会自动在桌面创建快捷方式,开发者为调试方便,可以在测试应用告警时点信任此应用,然后就可以创建快捷方式。

4.优化流应用体积和秒开效果

流应用的特点是占用流量小,可以秒开和边用边下。
但有的开发者不太注意工程代码优化,导致无法秒开和占用太多流量。

4.1 优化包体积的方式包括:

a). 去掉不必要的文件。
在manifest里有一个页面引用关系,其中有一个其他资源区,带问号的表示HBuilder认为它属于空闲资源,就是工程实际并没有使用的文件。
请检查下是否确认用不到这些文件,然后把不用的文件删掉或配置为打包不包括后再重新提交。
配置文件打包时不包含有2个方法,1把不打包的文件放入unpackage目录里;2在manifest里指定哪些目录和文件不打包。参考http://ask.dcloud.net.cn/article/480
b). 压缩大文件,如大的js。
如果是框架,直接使用min格式文件,比如把mui.js换为mui.min.js。
自己写的js,也尽量压缩下。
c). 优化本地图片的体积。
图片太大即影响包体积,又影响app运行时的内存占用,尽可能压缩小。

4.2 优化秒开速度的技巧:

基于wap2app的流应用,一般都可以正常秒开。
但基于5+App开发模式的纯c/s应用,很多开发者不注意优化启动速度。参考如下:
基于秒开的关键在于app的首页资源体积小,推荐在100K内。
所以控制首页资源体积比较重要。
在manifest的页面引用关系界面查看首页所包含的资源。
引用关系要保证正确和精准,关系少了,会导致app第一次进入时报错;关系多了,会导致首页下载时间变长。
在引用关系正确的之后,再看看首页及资源的体积是否还有缩小的空间,比如去掉多余的代码和压缩图片。
首页及资源文件压缩zip后体积控制在100k左右则秒开体验会很好。

流应用的关键在于省流量、可秒开,请开发者注意优化,发挥好流应用的特色价值。

正式发布流应用

在测试平台验证流应用功能正常后,点击“发布为正式”按钮,向正式平台提交。

鉴于监管要求,流应用首次发布正式时,需在线提交一些应用信息,如下图:

信息提交完成后,还需经过平台方的人工审核,审核通过后,会自动发布到正式;开发者再次打开发行流应用菜单,会显示正式平台的二维码(快码),如下图:

若审核失败,会通过邮件通知审核失败的原因(比如用户体验不佳、涉及敏感信息等)。

注意:流应用发布正式平台前,需完成开发者的实名认证,相关流程参考DCloud开发者实名认证流程

流应用更新

流应用是实时提交实时生效更新的。
更新虽然方便,但注意未测试好不要直接更新到正式平台,以免给用户发布调试版本。
流应用有专用的测试平台,在测试平台先提交更新,测试,没问题再发布到正式平台。具体在HBuilder点击发布流应用时可见到相关界面。
流应用有多种更新方式可供选择,具体见:http://ask.dcloud.net.cn/article/550

扩展阅读

继续阅读 »

概述

通过HTML5做跨平台App,以往都是创业公司或外包公司在做。
一线的互联网公司不太在意研发成本,很少使用HTML5做App,即便5+已经可以达到原生的功能和体验。
流应用不是一个开发产品,是一个发行产品,它从另一个角度给一线互联网公司进入HTML5阵营一个重要动力。

流应用,结合了原生App和Web App的优势,又消除了各自的缺点。
基于HTML5+的HTML、js等程序可以达到原生的效果,同时DCloud的流式发行技术实现让应用边用边下,类似流媒体,免除过往从下载到安装多步
操作,实现5秒内完成App的安装和启动。

以往安卓应用市场下载原生App,从点击开始,经历下载-启动安装包-确认权限-解压安装-启动应用等多个流程,根据主流应用市场的数据,从下载到App真正激活启动,折损60%的用户。100次下载中只有40个真正启动了App。
而流应用,把激活率从40%提升至98%。

目前各大App开发商的推广人员都非常关注流应用,这意味着他们的业绩能大幅提升。

开发者使用5+开发的App,之前是把5+引擎和开发者的前端代码打包为apk和ipa发行到原生应用市场。
但流应用出现后,引擎预置到应用市场或rom中,开发者只需提交前端文件到应用市场,5+引擎的流应用模块会从服务器端流式加载HTML文件并安装到手机上。
这样还带来一个好处就是流应用大幅减少了安装包的体积。

关于流应用的更多介绍,可以看官网介绍http://www.dcloud.io/streamapp.html
强烈推荐了解流应用的各种入口演示视频

流应用如何开发

开发者可以根据自己的现状,选择不同的流应用开发模式,概括起来主要有如下几种模式:

  • 没有App、没有H5站、没有小程序:请基于mui框架开发一个新的App,可以同时兼容普通H5版
  • 已有H5站点:通过wap2app框架,强化H5站点的功能和体验达到原生效果,几天内就可以完成一个流应用。参考http://ask.dcloud.net.cn/article/1244
  • 已有微信小程序:通过微信小程序转换

当然如果开发者已经有基于HTML5+的 App,直接在HBuilder里点发行,提交到流应用平台即可,或者参考下文申请自动转换服务。

基于HTML5+mui实现跨平台开发

作为创业公司,如果还没有开发App,则建议使用mui框架,实现一次开发,同时发布到Android应用市场、Apple App Store、H5网站、流应用、,大幅降低开发成本;mui是一套UI框架,同时封装了HTML5+中的窗口管理部分,方便开发者快速开发;基于HTML5+规范的应用可以直接打包为apk和ipa正常发布到应用市场下载;

开发者只需按照标准5+ App的开发步骤进行开发,开发完毕后,直接发布到流应用平台即可;如下为关联参考教程:

已有5+ App:从5+ App转换发布

如果你已经开发了5+App,你可以申请使用DCloud的自动转换服务,把5+App直接转换发布到流应用平台。使用你的HBuilder注册邮箱,发邮件给stream@dcloud.io,邮件格式要求如下:

  • 邮件标题:申请转换流应用-%appname%
  • 邮件内容:app获取地址,需要360手机助手(zhushou.360.cn)或应用宝(myapp.com)上的地址,未在这2个平台上线的app暂时无法自动转换为流应用

注意:1.提交的App需用户体验良好、质量过关、有一定用户基础;2.如果app里使用了原生插件,则无法自动转换。

如果你不希望自动转换,想手动发布流应用,那么在HBuilder里的发行菜单里,有“发行为流应用"菜单,按照该菜单的指引可以发布流应用。

  1. 升级的处理
    流应用的升级是DCloud独立提供的、更强大的、差量升级技术。
    请不要在流应用里检查更新,判断在流应用下,不走检查更新代码,避免任何apk、wgt、wgtu等升级方式的代码执行。
    也不要在app的设置或关于中放置检查更新的按钮。
    如果你的流应用要升级,请在HBuilder里直接提交新版,流应用的升级平台会自动计算差量、自动省流量更新。
    建议在你的升级检测代码前,加入如下包围判断:
    var ua = navigator.userAgent  
    //升级逻辑:判断5+环境下,且不是流应用  
    if(ua.indexOf("Html5Plus">0&&ua.indexOf("StreamApp")==-1)){  
    //继续执行升级逻辑  
    }

    若使用mui框架的话,可以简化代码:

    //升级逻辑:判断5+环境下,且不是流应用  
    if(mui.os.plus&&!mui.os.stream){  
    //继续执行升级逻辑  
    }

使用wap2app开发

如果企业已有上线的wap站,且wap站体验较好,可以通过wap2app产品实现wap站快速发布成流应用,wap2app立足wap站,通过适配,完成用户体验及能力的增强,主要功能点包括:
http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244

流应用如何测试

点击菜单“发行-提交流应用到测试服务器”,如下图
image
点击后界面如下图
image

1.配置页面引用关系

如果是wap2app项目页面关系在sitemap.json里配置。
如果是5+App项目,参考如下:
页面引用关系在manifest里配置,这里描述了App项目页面间及页面与资源间的关系,正确的页面引用关系可用于指导流应用引擎下载文件。
工程中所有文件的页面引用关系都必须配置正确;
点击上图中的"页面引用关系"链接,可跳转至页面引用关系可视化配置处,如下图
image
页面引用关系配置教程

2.提交流应用到测试平台

点击"立即提交"按钮,可提交此App到流应用测试平台,提交完毕后如下图
image
此时界面显示最后一次提交测试服务器的流应用的版本号及流应用二维码
注:
1.每次提交请确保manifest.json里的版本号比测试服务器上版本号大
2.请确保提交项目的Appid是使用本人的HBuilder账户申请的,暂不支持提交其他人的项目到测试平台
如果创建项目的人已经离职,且不能收回且HBuilder账户,则需要重新在HBuilder里建一个项目,使用新的appid操作。

3.扫码测试流应用

手机上安装DCloud流应用管理器,扫码测试。每个流应用在HBuilder的发行-发行为流应用界面里都有一个唯一的二维码,扫码即可安装。

通过扫描体验和测试,看App是否可正常且快速的被安装到手机上。
遇到问题再进一步调整页面引用关系的配置。
推荐把首页的资源控制在100k左右,以保证App可快速启动和安装。

但注意版本之间有差异,建议多在不同平台测试,iOS流应用、Android流应用、360手助都支持扫码测试。
此外注意,未正式发行的测试版流应用不会自动在桌面创建快捷方式,开发者为调试方便,可以在测试应用告警时点信任此应用,然后就可以创建快捷方式。

4.优化流应用体积和秒开效果

流应用的特点是占用流量小,可以秒开和边用边下。
但有的开发者不太注意工程代码优化,导致无法秒开和占用太多流量。

4.1 优化包体积的方式包括:

a). 去掉不必要的文件。
在manifest里有一个页面引用关系,其中有一个其他资源区,带问号的表示HBuilder认为它属于空闲资源,就是工程实际并没有使用的文件。
请检查下是否确认用不到这些文件,然后把不用的文件删掉或配置为打包不包括后再重新提交。
配置文件打包时不包含有2个方法,1把不打包的文件放入unpackage目录里;2在manifest里指定哪些目录和文件不打包。参考http://ask.dcloud.net.cn/article/480
b). 压缩大文件,如大的js。
如果是框架,直接使用min格式文件,比如把mui.js换为mui.min.js。
自己写的js,也尽量压缩下。
c). 优化本地图片的体积。
图片太大即影响包体积,又影响app运行时的内存占用,尽可能压缩小。

4.2 优化秒开速度的技巧:

基于wap2app的流应用,一般都可以正常秒开。
但基于5+App开发模式的纯c/s应用,很多开发者不注意优化启动速度。参考如下:
基于秒开的关键在于app的首页资源体积小,推荐在100K内。
所以控制首页资源体积比较重要。
在manifest的页面引用关系界面查看首页所包含的资源。
引用关系要保证正确和精准,关系少了,会导致app第一次进入时报错;关系多了,会导致首页下载时间变长。
在引用关系正确的之后,再看看首页及资源的体积是否还有缩小的空间,比如去掉多余的代码和压缩图片。
首页及资源文件压缩zip后体积控制在100k左右则秒开体验会很好。

流应用的关键在于省流量、可秒开,请开发者注意优化,发挥好流应用的特色价值。

正式发布流应用

在测试平台验证流应用功能正常后,点击“发布为正式”按钮,向正式平台提交。

鉴于监管要求,流应用首次发布正式时,需在线提交一些应用信息,如下图:

信息提交完成后,还需经过平台方的人工审核,审核通过后,会自动发布到正式;开发者再次打开发行流应用菜单,会显示正式平台的二维码(快码),如下图:

若审核失败,会通过邮件通知审核失败的原因(比如用户体验不佳、涉及敏感信息等)。

注意:流应用发布正式平台前,需完成开发者的实名认证,相关流程参考DCloud开发者实名认证流程

流应用更新

流应用是实时提交实时生效更新的。
更新虽然方便,但注意未测试好不要直接更新到正式平台,以免给用户发布调试版本。
流应用有专用的测试平台,在测试平台先提交更新,测试,没问题再发布到正式平台。具体在HBuilder点击发布流应用时可见到相关界面。
流应用有多种更新方式可供选择,具体见:http://ask.dcloud.net.cn/article/550

扩展阅读

收起阅读 »

庆贺360手机助手集成5+引擎 、庆贺大众点评开发5+ App、庆贺流应用上线!三重红包送不停!。

活动 流应用

庆贺360手机助手集成5+引擎 ;
庆贺大众点评开发5+ App;
庆贺流应用上线!
三重红包送不停活动详情。

1.活动背景:这次之所以发红包,主要是有三个大事儿发布。
第一个就是360手机助手集成了我们的5+引擎,这样的好处是只要你开发的项目不要打包5+基座,直接把HTML等资源传到我们的发行服务器即可。包体积大幅减少。
手机上安装了360手机助手,无论在什么地方看到快码,只要打开360手机助手一扫,就可以快速下载启动你想要的app,只要5秒。
第二个大事是大众点评公司基于HTML5+的App点评外卖上线360手助了,大众点评作为国内一线互联网大厂,能认可DCloud的技术平台和工具是对DCloud的极大肯定。也让广大开发者有更强的信心,大众点评都在用的技术,我用起来还担心什么?
第三个最重要的大事就是,我们的流应用产品上线了,基于5+开发的App,可以以边用边下的方式在手机上发行,达到秒开的效果。
在HBuilder6.6里点菜单发行-发行为流应用即可看到向导和教程。
流应用是一种突破式创新,它对开发商和用户都有更多好处,详见http://dcloud.io/streamapp.html

2.活动时间: 10月21日-10月31日
3.活动对象:HBuilder开发者、安卓手机用户(iOS用户暂时未发布,可以换安卓手机或模拟器参加活动)。注意非HBuilder用户虽然也可以使用大众点评外卖流应用,但我们不会给其发红包,红包的领取是在HBuilder软件里进行的,这是对DCloud开发者的回馈。
4.活动规则:在活动时间内,用户下载360手机助手及流应用版大众点评外卖,并使用大众点评外卖订餐,当订单状态为已完结时可获得5元红包;下单后分享朋友圈或微博,分享的内容被点击过后即可再获得5元红包;活动临结束前,用户下单数量排行榜前三名可获得100元红包。

5.具体玩法:

第一步:

下载最新版的360手机助手
如果你已经安装过360手机助手,点360手机助手的右下角的管理-左上角的设置图标,选版本升级,保证自己是最新版。

第二步:

安装了最新版的360手机助手之后,在其中搜索大众点评外卖,或者
启动HBuilder后,在弹出的活动页面内扫描大众点评外卖的二维码,安装大众点评的流应用,这个不浪费什么流量,只有几百K,速度很快。

二维码类似下图,届时以活动开始后弹窗中的二维码为准。

第三步:下完App后,登录大众点评外卖,大家记得一定要登录,登录之后,一定要下单消费,点个外卖啥的,中午总要吃饭吧,不用跑腿。消费完成后,就可以来活动页面领取第一个红包,恭喜你,5元红包就到手了,输入支付宝,我们会把钱打给你。

第四步:

刚才我们已经消费完成了,那么接下来这步,拿5元红包很容易,把你消费的订单分享给你的朋友,微信微博短信QQ都可以,并让他们点击一下分享的链接,就可以拿到第二个红包了。一定要你的朋友们点击,不然拿不到红包啊,小编也只能帮到你这里了。5块就在这里,拿不拿就看你了。

第五步:

最后一步是100元的红包,怎么拿到?下单最多的前三名可以拿到,活动期间,大家点HBuilder里的帮助-活动,可以看到排行榜。
梦想总是要有的,万一排了个第一,100元不要白不要啊。

最后小编给大家做下示范:

1.使用360手机助手的二维码扫描功能扫描大众点评的二维码,安装大众点评外卖。

2.很快大众点评安装完毕,大家点击登录,下单。

完成后,就可以到HBuilder里的活动页面领红包了。就这么简单!另外,文案中加粗的文字大家一定看仔细看下,可以帮助大家快速的拿到红包。熊哥就帮你到这里了。

如果你也想开发一个流应用,参考流应用开发指南

继续阅读 »

庆贺360手机助手集成5+引擎 ;
庆贺大众点评开发5+ App;
庆贺流应用上线!
三重红包送不停活动详情。

1.活动背景:这次之所以发红包,主要是有三个大事儿发布。
第一个就是360手机助手集成了我们的5+引擎,这样的好处是只要你开发的项目不要打包5+基座,直接把HTML等资源传到我们的发行服务器即可。包体积大幅减少。
手机上安装了360手机助手,无论在什么地方看到快码,只要打开360手机助手一扫,就可以快速下载启动你想要的app,只要5秒。
第二个大事是大众点评公司基于HTML5+的App点评外卖上线360手助了,大众点评作为国内一线互联网大厂,能认可DCloud的技术平台和工具是对DCloud的极大肯定。也让广大开发者有更强的信心,大众点评都在用的技术,我用起来还担心什么?
第三个最重要的大事就是,我们的流应用产品上线了,基于5+开发的App,可以以边用边下的方式在手机上发行,达到秒开的效果。
在HBuilder6.6里点菜单发行-发行为流应用即可看到向导和教程。
流应用是一种突破式创新,它对开发商和用户都有更多好处,详见http://dcloud.io/streamapp.html

2.活动时间: 10月21日-10月31日
3.活动对象:HBuilder开发者、安卓手机用户(iOS用户暂时未发布,可以换安卓手机或模拟器参加活动)。注意非HBuilder用户虽然也可以使用大众点评外卖流应用,但我们不会给其发红包,红包的领取是在HBuilder软件里进行的,这是对DCloud开发者的回馈。
4.活动规则:在活动时间内,用户下载360手机助手及流应用版大众点评外卖,并使用大众点评外卖订餐,当订单状态为已完结时可获得5元红包;下单后分享朋友圈或微博,分享的内容被点击过后即可再获得5元红包;活动临结束前,用户下单数量排行榜前三名可获得100元红包。

5.具体玩法:

第一步:

下载最新版的360手机助手
如果你已经安装过360手机助手,点360手机助手的右下角的管理-左上角的设置图标,选版本升级,保证自己是最新版。

第二步:

安装了最新版的360手机助手之后,在其中搜索大众点评外卖,或者
启动HBuilder后,在弹出的活动页面内扫描大众点评外卖的二维码,安装大众点评的流应用,这个不浪费什么流量,只有几百K,速度很快。

二维码类似下图,届时以活动开始后弹窗中的二维码为准。

第三步:下完App后,登录大众点评外卖,大家记得一定要登录,登录之后,一定要下单消费,点个外卖啥的,中午总要吃饭吧,不用跑腿。消费完成后,就可以来活动页面领取第一个红包,恭喜你,5元红包就到手了,输入支付宝,我们会把钱打给你。

第四步:

刚才我们已经消费完成了,那么接下来这步,拿5元红包很容易,把你消费的订单分享给你的朋友,微信微博短信QQ都可以,并让他们点击一下分享的链接,就可以拿到第二个红包了。一定要你的朋友们点击,不然拿不到红包啊,小编也只能帮到你这里了。5块就在这里,拿不拿就看你了。

第五步:

最后一步是100元的红包,怎么拿到?下单最多的前三名可以拿到,活动期间,大家点HBuilder里的帮助-活动,可以看到排行榜。
梦想总是要有的,万一排了个第一,100元不要白不要啊。

最后小编给大家做下示范:

1.使用360手机助手的二维码扫描功能扫描大众点评的二维码,安装大众点评外卖。

2.很快大众点评安装完毕,大家点击登录,下单。

完成后,就可以到HBuilder里的活动页面领红包了。就这么简单!另外,文案中加粗的文字大家一定看仔细看下,可以帮助大家快速的拿到红包。熊哥就帮你到这里了。

如果你也想开发一个流应用,参考流应用开发指南

收起阅读 »

希望mui加入多图预览的组件

之前用网页写了个,发现实现效果和原生的差太多,最好能通过H5+原生实现

之前用网页写了个,发现实现效果和原生的差太多,最好能通过H5+原生实现

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率
目前的HBuilder文件太大,占用CPU及资源也比较大,有些功能不需要的也一并安装了,造成资源浪费!

强烈建议将IDE代码编写与APP生成打包功能分离,可以装APP生成打包做为一个插件使用,可开关!
这样对CPU减负及卡顿问题得到很大改善!

继续阅读 »

【建议】HBuilder的纯IDE代码编写和APP生成打包分离,可以轻量化IDE及提高效率
目前的HBuilder文件太大,占用CPU及资源也比较大,有些功能不需要的也一并安装了,造成资源浪费!

强烈建议将IDE代码编写与APP生成打包功能分离,可以装APP生成打包做为一个插件使用,可开关!
这样对CPU减负及卡顿问题得到很大改善!

收起阅读 »

打开系统设置

NJS
mui.confirm('网络出错,请检查网络配置', '温馨提示', ['退出', '设置'], function(e){  
                        if(e.index == 0){  
                            if(mui.os.ios){  
                                mui.alert('请双击Home键退出程序');  
                            } else {  
                                plus.runtime.quit();  
                            }  
                        } else {  
                            if(mui.os.ios){  
                                plus.runtime.launchApplication({action: 'prefs:root=MOBILE_DATA_SETTINGS_ID'}, function(e){}); //WIFI  
                            } else {  
                                var main = plus.android.runtimeMainActivity();  
                                var Intent = plus.android.importClass("android.content.Intent");  
                                var mIntent = new Intent('android.settings.WIFI_SETTINGS');  
                                main.startActivity(mIntent);  
                            }  
                        }  
                    });

plus.runtime.launchApplication可以用 plus.runtime.openURL()代替,MOBILE_DATA_SETTINGS_ID可以换成WIFI就是打开WIFI设置

继续阅读 »
mui.confirm('网络出错,请检查网络配置', '温馨提示', ['退出', '设置'], function(e){  
                        if(e.index == 0){  
                            if(mui.os.ios){  
                                mui.alert('请双击Home键退出程序');  
                            } else {  
                                plus.runtime.quit();  
                            }  
                        } else {  
                            if(mui.os.ios){  
                                plus.runtime.launchApplication({action: 'prefs:root=MOBILE_DATA_SETTINGS_ID'}, function(e){}); //WIFI  
                            } else {  
                                var main = plus.android.runtimeMainActivity();  
                                var Intent = plus.android.importClass("android.content.Intent");  
                                var mIntent = new Intent('android.settings.WIFI_SETTINGS');  
                                main.startActivity(mIntent);  
                            }  
                        }  
                    });

plus.runtime.launchApplication可以用 plus.runtime.openURL()代替,MOBILE_DATA_SETTINGS_ID可以换成WIFI就是打开WIFI设置

收起阅读 »

网页中截图保存到本地 获取某个div或者某一块区域(纯js实现)

bitmap js 截图

项目中需要使用到截屏的功能,但是官方的的给出的截图好像只能截取某个webview官方截图api文档 但是在某些需求中要求只截取某一部分而不是整个屏幕 或者说只截取某个div里面的内容 解决思路来了:首选通过js截取到某个div 或者任何一个标签包含的内容:html2canvas 然后把截取到的转换为Data格式,再利用官方的Bitmap对象保存在本地或者做其它的操作

   //生成base64图片数据  
                               var dataUrl = canvas.toDataURL();  
                              // console.log(dataUrl);  这里千万不要像这样打印出来否则HBuilder会报错的  可能输出的内容太多了吧  
                               var b=new plus.nativeObj.Bitmap();  

                                b.loadBase64Data(dataUrl,function(){  
                                    console.log("创建成功");  
                                },function(){  
                                    console.log("创建失败");  
                                });  
                                b.save('_www/img1.jpg',{overwrite:true},function(){  
                                    console.log("保存成功");  
                                },function(){  
                                    console.log("保存失败");  
                                });  

                                plus.gallery.save( '_www/img1.jpg', function () {  
                                        console.log( "保存图片到相册成功" );  
                                    },function(){  
                                        console.log( "保存图片到相册失败" );

完整项目demo:

继续阅读 »

项目中需要使用到截屏的功能,但是官方的的给出的截图好像只能截取某个webview官方截图api文档 但是在某些需求中要求只截取某一部分而不是整个屏幕 或者说只截取某个div里面的内容 解决思路来了:首选通过js截取到某个div 或者任何一个标签包含的内容:html2canvas 然后把截取到的转换为Data格式,再利用官方的Bitmap对象保存在本地或者做其它的操作

   //生成base64图片数据  
                               var dataUrl = canvas.toDataURL();  
                              // console.log(dataUrl);  这里千万不要像这样打印出来否则HBuilder会报错的  可能输出的内容太多了吧  
                               var b=new plus.nativeObj.Bitmap();  

                                b.loadBase64Data(dataUrl,function(){  
                                    console.log("创建成功");  
                                },function(){  
                                    console.log("创建失败");  
                                });  
                                b.save('_www/img1.jpg',{overwrite:true},function(){  
                                    console.log("保存成功");  
                                },function(){  
                                    console.log("保存失败");  
                                });  

                                plus.gallery.save( '_www/img1.jpg', function () {  
                                        console.log( "保存图片到相册成功" );  
                                    },function(){  
                                        console.log( "保存图片到相册失败" );

完整项目demo:

收起阅读 »

【交流分享】图片本地缓存案例,控制downloader数量,避免手机发烫

downloader 技术分享

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:
1.图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地
2.使用背景控制图片样式;比src灵活;
3.不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)
4.单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题
5.避免任务队列中,图片已存在,downloader下载卡顿的问题

  1. 加入下载完成的渐变动画,
  2. 其他,,自己发现..

使用方法很简单:两步!!!
1.导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
2.联网获取数据后,拼接的img格式为:<img sr c='默认图片' data-sr c='网络地址' onload='load(this)'/>

好了,具体看附件的案例

继续阅读 »

之前有写过<<h5+的Downloader下载网络图片缓存到本地的案例>> http://ask.dcloud.net.cn/article/256
但后来才发现图片比较多时,downloader创建过多,手机立马发烫;
后来解决了也没有更新;
今天项目刚发出去,稳定下来;现在重新整理了一个案例分享给大家;

主要优化和解决的问题:
1.图片显示,先检查本地是否存在,如果存在则使用本地;如果不存在则联网下载,保存在本地
2.使用背景控制图片样式;比src灵活;
3.不同的场景,使用不同的图片下载默认图;(我项目中头像和产品的下载默认图是不一样的)
4.单个downloader下载,避免网速快或图片多创建过多downloader,导致手机发烫的问题
5.避免任务队列中,图片已存在,downloader下载卡顿的问题

  1. 加入下载完成的渐变动画,
  2. 其他,,自己发现..

使用方法很简单:两步!!!
1.导入imgload.css imgload.js md5.min.js 还有一张透明图translate.png
2.联网获取数据后,拼接的img格式为:<img sr c='默认图片' data-sr c='网络地址' onload='load(this)'/>

好了,具体看附件的案例

收起阅读 »