HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

怎样选择微信外包机构

外包

在互联网的浪潮下,不少传统公司都纷纷开通了自己的微信公众平台,因此微信公众平台的二次开发也如火如荼,那么请务必记住以下这几条,以后有做微信外包的机构找你时,就拿这几条去观察,虽然无法保证你会赚钱,但至少能保证你不会被坑蒙拐骗了还帮流氓数钱。
首先查看他们做过哪些案例,这是最容易想到的,但要从几个步骤入手。
1、案例究竟是不是他们做的,这个可以要求把牛逼吹上天的微信外包机构给个甲方的联系方式,要座机哦,去调查,问问,那个外包机构是不是他们的年度服务商,所讲的案例的数字是不是真的,例如一周涨了50万微信粉丝,微信上一个月流水过百万,是不是这个外包机构干出来的。要是说对方负责人休假电话不方便给啊,对方联系人已经离职啊啥的,这些借口别听,可以送客了。
顺道给大家普及个常识,大品牌公司在选择年度服务商的时候会通过比稿的方式来选择外包机构,比稿通过的,成为年度服务商,比稿不通过的,会拿到比稿费,他们比稿里所陈述的方案会被选上的外包机构拿来用。
因此,不少外包服务机构会到处吹嘘某公司是他们服务的,并在网站上挂着一大堆牛逼品牌的LOGO,其中90%以上都只是跟他们的工作人员见过一面,或者是外包产业链里最低端的分包商而已,例如很多没见过世面的公司,经常会因此而激动地向别人吹嘘那谁谁谁是他们服务过的客户,事实上嘛,前面告诉过你啦。
2、他们所说的案例做得怎样,既然是案例,肯定有微信公众号,上去看看他们公众号的内容做得如何,微博上给微信拉粉的素材创作水平,天天都有促销信息、配图难看、行文如嚼蜡、样式死板、最近还顶风作案诱导用户把内容分享到朋友圈的,你想被封号就找他们吧。
3、看名声和网络形象
诚信的重要性就不用多说了,用人德为先,寻找靠谱的微信外包机构同样如此。除了向同行打听这家公司的专业度和诚信度,或者到百度上搜索这家公司的名字,看看这个公司是不是在自己的百度百科词条下面紧跟着就是一堆离职员工的讨薪控诉,或者一些企划经理的帖子骂他们狗屎傻逼饭桶。
最主要的,是要上新浪微博和腾讯微博去看这家公司的官方微博做得怎样,是不是三十多万粉丝,但平均每条微博的内容转发数为0,或者转发者都是自己公司的员工,在下面留言是不是及时有回复。一个真正重视口碑和名声的微信外包机构会很珍惜自己的羽毛,重视自己在社会化媒体上的用户关系经营的。那些页面大气,内容精致原创,和用户互动热烈,观点对口,这个代运营公司值得谈一谈。  
4、观察团队素养
微信外包机构的最大资产和财富就是人才,有实力的外包机构聘请的人员素质都不会差,对于外包团队成员的观察是必不可少的一环。看团队成员是否具备一定的职业成熟度。至少谈吐要过得去吧,形象可以不要求帅漂亮,但至少要顺眼,着装得体,上得了台面。跟他们闲聊时可以再问问他们微博和微信的差别,看他们能掰出多少不同来,说得系统全面的,可以合作。

继续阅读 »

在互联网的浪潮下,不少传统公司都纷纷开通了自己的微信公众平台,因此微信公众平台的二次开发也如火如荼,那么请务必记住以下这几条,以后有做微信外包的机构找你时,就拿这几条去观察,虽然无法保证你会赚钱,但至少能保证你不会被坑蒙拐骗了还帮流氓数钱。
首先查看他们做过哪些案例,这是最容易想到的,但要从几个步骤入手。
1、案例究竟是不是他们做的,这个可以要求把牛逼吹上天的微信外包机构给个甲方的联系方式,要座机哦,去调查,问问,那个外包机构是不是他们的年度服务商,所讲的案例的数字是不是真的,例如一周涨了50万微信粉丝,微信上一个月流水过百万,是不是这个外包机构干出来的。要是说对方负责人休假电话不方便给啊,对方联系人已经离职啊啥的,这些借口别听,可以送客了。
顺道给大家普及个常识,大品牌公司在选择年度服务商的时候会通过比稿的方式来选择外包机构,比稿通过的,成为年度服务商,比稿不通过的,会拿到比稿费,他们比稿里所陈述的方案会被选上的外包机构拿来用。
因此,不少外包服务机构会到处吹嘘某公司是他们服务的,并在网站上挂着一大堆牛逼品牌的LOGO,其中90%以上都只是跟他们的工作人员见过一面,或者是外包产业链里最低端的分包商而已,例如很多没见过世面的公司,经常会因此而激动地向别人吹嘘那谁谁谁是他们服务过的客户,事实上嘛,前面告诉过你啦。
2、他们所说的案例做得怎样,既然是案例,肯定有微信公众号,上去看看他们公众号的内容做得如何,微博上给微信拉粉的素材创作水平,天天都有促销信息、配图难看、行文如嚼蜡、样式死板、最近还顶风作案诱导用户把内容分享到朋友圈的,你想被封号就找他们吧。
3、看名声和网络形象
诚信的重要性就不用多说了,用人德为先,寻找靠谱的微信外包机构同样如此。除了向同行打听这家公司的专业度和诚信度,或者到百度上搜索这家公司的名字,看看这个公司是不是在自己的百度百科词条下面紧跟着就是一堆离职员工的讨薪控诉,或者一些企划经理的帖子骂他们狗屎傻逼饭桶。
最主要的,是要上新浪微博和腾讯微博去看这家公司的官方微博做得怎样,是不是三十多万粉丝,但平均每条微博的内容转发数为0,或者转发者都是自己公司的员工,在下面留言是不是及时有回复。一个真正重视口碑和名声的微信外包机构会很珍惜自己的羽毛,重视自己在社会化媒体上的用户关系经营的。那些页面大气,内容精致原创,和用户互动热烈,观点对口,这个代运营公司值得谈一谈。  
4、观察团队素养
微信外包机构的最大资产和财富就是人才,有实力的外包机构聘请的人员素质都不会差,对于外包团队成员的观察是必不可少的一环。看团队成员是否具备一定的职业成熟度。至少谈吐要过得去吧,形象可以不要求帅漂亮,但至少要顺眼,着装得体,上得了台面。跟他们闲聊时可以再问问他们微博和微信的差别,看他们能掰出多少不同来,说得系统全面的,可以合作。

收起阅读 »

多页签使用webview下拉刷新的实现思路

下拉刷新

原先使用demo中" 选项卡切换+下拉刷新"(pullrefresh_with_tab.html) 发现卡顿非常严重,在数据量多或者多滑动几次后出现卡顿情况。

最近有个新思路,使用demo中“默认实现”来实现 选项卡切换的功能,缺点是不能实现选项卡的滑动切换,但是卡顿现象消失。

大体思路:父页面放置选项卡,子页面 设置多个mui-scroll ,通过选项卡的tap事件,来控制 子页面的mui-scroll的显示和隐藏。

继续阅读 »

原先使用demo中" 选项卡切换+下拉刷新"(pullrefresh_with_tab.html) 发现卡顿非常严重,在数据量多或者多滑动几次后出现卡顿情况。

最近有个新思路,使用demo中“默认实现”来实现 选项卡切换的功能,缺点是不能实现选项卡的滑动切换,但是卡顿现象消失。

大体思路:父页面放置选项卡,子页面 设置多个mui-scroll ,通过选项卡的tap事件,来控制 子页面的mui-scroll的显示和隐藏。

收起阅读 »

论软件外包中后期维护的重要性

软件外包过程中,发包方应该在外包协议中要求承包方在系统计划的生命周期中始终提供支持和维护,而不是仅仅负责最初的开发项目。

这就要求在软件外包的时候,不仅要考虑眼前的使用,还要考虑到软件的长期使用,所以外包协议中一定要明确软件的维护期,要求承包方在包括维护期内始终提供支持。

另外,即使需要为承包方提供足够的经济激励,也要让承包方留住最初的开发人员,并让这些人维护、补充你的应用程序。

同时在软件外包协议中还应明确,承包方应确保即使进入维护期,也会有开发人员来做维护。我们应该与最初开发者保持联系,以确保应用程序能够尽快得到修补和维护。因为如果让新手来维护,他们通常速度很慢,而且常犯错误。

软件外包的承包方虽然允许有新人加入维护团队,但承包方必须确保新手是逐渐加入的,这样他们才能得到足够的督导和锻炼。而且对于维护团队,也应该给他们足够的经济激励,使他们有动力快速完成维护任务。

如果承包方对于承担长期的软件维护有困难的话,可以用一种比较安全的方法来替代,让本公司的员工在项目中扮演学徒的角色,熟悉和并了解软件架构。随着时间推移,随着内部员工逐渐学习提高,就可以考虑将软件维护的责任从软件外包团队手中转交给公司内部的人员。

继续阅读 »

软件外包过程中,发包方应该在外包协议中要求承包方在系统计划的生命周期中始终提供支持和维护,而不是仅仅负责最初的开发项目。

这就要求在软件外包的时候,不仅要考虑眼前的使用,还要考虑到软件的长期使用,所以外包协议中一定要明确软件的维护期,要求承包方在包括维护期内始终提供支持。

另外,即使需要为承包方提供足够的经济激励,也要让承包方留住最初的开发人员,并让这些人维护、补充你的应用程序。

同时在软件外包协议中还应明确,承包方应确保即使进入维护期,也会有开发人员来做维护。我们应该与最初开发者保持联系,以确保应用程序能够尽快得到修补和维护。因为如果让新手来维护,他们通常速度很慢,而且常犯错误。

软件外包的承包方虽然允许有新人加入维护团队,但承包方必须确保新手是逐渐加入的,这样他们才能得到足够的督导和锻炼。而且对于维护团队,也应该给他们足够的经济激励,使他们有动力快速完成维护任务。

如果承包方对于承担长期的软件维护有困难的话,可以用一种比较安全的方法来替代,让本公司的员工在项目中扮演学徒的角色,熟悉和并了解软件架构。随着时间推移,随着内部员工逐渐学习提高,就可以考虑将软件维护的责任从软件外包团队手中转交给公司内部的人员。

收起阅读 »

MUI 项目模板之 “酒店预订”

酒店预订 Gulp MVVM 项目模板 技术分享 开源

模板简介

使用 MUI 的开发者越来越多,基于 MUI 的开发的 App 也越来越多,一些开发者也提到了如何使用 MV* 模式进行编码相关的问题。

与此同时,mui team 也希望进一步方便开发者,为大家提供更多类型的 APP 模板,所以,我们在 GitHub 上放出了一个 “酒店预定” 的 APP 模板。

开源地址: https://github.com/dcloudio/casecode/tree/master/hotel
image

mui 作为一个 UI 框架,并未对 “开发模式、构建方式、模块化方案” 等做出任何限制,当然,每一个开发者或 team 都可以采用熟悉且合适项目的 “库、框架、工具” 去开展开发工作。

在这个 App 模板中:

  1. 使用 Gulp 作为构建工具
  2. 使用 AMD 模块组织代码
  3. 使用 MVVM 进行双向绑定

在这里,不会对以上提到的 “知识点或工具” 进行深入讲解,不懂的同学可以问下 “google”。

使用 AMD 组织代码

因为基于 5+ 的多 WebView 模式,这个项目模板并不是单页的,所以针对每一个页面都有且只有一个入口模块,而对于 “mui 相关文件以及 mui 的扩展组件”,还是用传统的 script 标签方式引入页面中。
示例如下:

<script src="../mui/js/mui.min.js"></script>  
<script src="../mui/js/mui.picker.min.js"></script>  
<script src="../libs/ems.js" data-main='./index.js'></script>

注意:上边代码中 “data-original” 为真实的 “src”,因为 ask 会对 src 做了防 xss 处理。

可以看到前两个 “script” 分别引用了 “mui” 和 “mui.picker”,而最后一个是通过模块加载器进行加载的,指定了入口模块 “./index.js”

模块代码:

define(function(require, exports, module) {  

    //设置状态栏颜色(for ios)  
    mui.init({  
        "statusBarBackground": "#099FDE"  
    });  

    mui.plusReady(function() {  
        plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");  
    });  

    var utils = require('../libs/utils.js');  
    var pageHepler = require('../common/page-helper');  
    var hotelPriceFilter = require('../controls/hotel-price-filter/main');  

    var self = exports;  

    self.dayNum = 1;  
    self.beginDate = utils.formatDate(new Date(), 'yyyy-MM-dd');  

    ...  

    ...  

    //设置价格过滤条件  
    self.setPriceFilter = function() {  
        hotelPriceFilter.show(function(rs) {  
            self.priceRange = rs.priceRange;  
            self.star = rs.star;  
        });  
    };  

    //初始化页面辅助模块  
    pageHepler.init({  
        handler: self,  
        mvvm: true  
    });  

    ...  
        ...  

});

如上述代码,在每个页面的 "入口模块" (一文件一模块、一模块一文件),在模块中通过 require 去引用需要的公共模块,模块有可能是一个 "实用函数模块、完整的获立组件,或者其他形式"。

基于 VUE 的双向绑定 (MVVM)

目前流行的 mv* 框架有很多,其中 mvvm 框架也有不少,在这个 “酒店 app 模板” 中,我们期望利用 mvvm 的 “双向绑定” 简化我们的数据绑定以及 dom 操作,经过比较,我们选用了比较轻量的 vue.js

在此 app 模板中,将 vue 封在了 /common/page-helper.js 中,主要代码如下:

...  
...  
//mvvm 绑定  
if (options.mvvm) {  
    if (options.mvvm === true) {  
        options.mvvm = {};  
    }  
    options.mvvm.el = options.mvvm.el || options.holder;  
    options.mvvm.data = options.mvvm.data || options.handler;  
    options.mvvm.methods = options.mvvm.methods || options.handler;  
    options.mvvm.computed = options.mvvm.computed || options.handler.computed;  
    exports.vue = new Vue(options.mvvm);  
}  
...  
...

完整的代码见 GitHub 开源 Repository。

使用 Gulp 构建

在这个模板中,并没有进行文件合并,而只进行了代码 "混淆和压缩",构建脚本如下:

var gulp = require("gulp");  
var pkg = require("./package.json");  
var uglify = require("gulp-uglify");  
var minifycss = require('gulp-minify-css');  
var del = require('del');  
var concat = require('gulp-concat');  
var rename = require('gulp-rename');  
var header = require('gulp-header');  

var banner = ['/**',  
    ' * <%= name %> - <%= description %>',  
    ' * @version v<%= version %>',  
    ' * @link <%= homepage %>',  
    ' * @author <%= author %>',  
    ' * @license <%= license %>',  
    ' */',  
    ''  
].join('\r\n');  

gulp.task('clear', function(cb) {  
    del(['build'], cb);  
});  

gulp.task('build', ["clear"], function() {  
    //css  
    gulp.src(["./src/**/*.css"])  
        .pipe(minifycss())  
        .pipe(header(banner, pkg))  
        .pipe(gulp.dest("./build/"));  
    //js  
    gulp.src(["./src/**/*.js"])  
        .pipe(uglify({  
            mangle: {  
                except: ['require']  
            }  
        }))  
        .pipe(header(banner, pkg))  
        .pipe(gulp.dest("./build/"));  
    //html  
    gulp.src(["./src/**/*.html"])  
        .pipe(gulp.dest("./build/"));  
    //ttf  
    gulp.src(["./src/**/*.ttf"])  
        .pipe(gulp.dest("./build/"));  
        ...  
        ...   
    //ico  
    gulp.src(["./src/**/*.ico"])  
        .pipe(gulp.dest("./build/"));  
    //png  
    gulp.src(["./src/**/*.png"])  
        .pipe(gulp.dest("./build/"));  
    //json  
    gulp.src(["./src/**/*.json"])  
        .pipe(gulp.dest("./build/"));  
});  

gulp.task('default', ["clear", "build"]);

执行构建脚本前,需要分别 “全局和本地” 都安装 Gulp ,同时需要安装相关 Gulp 插件

全局安装 Gulp

[sudo] npm install gulp -g

本地安装 Gulp 以及构建依赖的 Gulp 插件

npm install

从前边的构建脚中可以看到共有三个 “task”,分别为:

  1. clear : 用于清理已生成的文件
  2. build : 生成新的 release 版本
  3. default : 会依次执行 clear 、build

执行 Gulp 任务

gulp [clear|build|default]

-- EOF --

继续阅读 »

模板简介

使用 MUI 的开发者越来越多,基于 MUI 的开发的 App 也越来越多,一些开发者也提到了如何使用 MV* 模式进行编码相关的问题。

与此同时,mui team 也希望进一步方便开发者,为大家提供更多类型的 APP 模板,所以,我们在 GitHub 上放出了一个 “酒店预定” 的 APP 模板。

开源地址: https://github.com/dcloudio/casecode/tree/master/hotel
image

mui 作为一个 UI 框架,并未对 “开发模式、构建方式、模块化方案” 等做出任何限制,当然,每一个开发者或 team 都可以采用熟悉且合适项目的 “库、框架、工具” 去开展开发工作。

在这个 App 模板中:

  1. 使用 Gulp 作为构建工具
  2. 使用 AMD 模块组织代码
  3. 使用 MVVM 进行双向绑定

在这里,不会对以上提到的 “知识点或工具” 进行深入讲解,不懂的同学可以问下 “google”。

使用 AMD 组织代码

因为基于 5+ 的多 WebView 模式,这个项目模板并不是单页的,所以针对每一个页面都有且只有一个入口模块,而对于 “mui 相关文件以及 mui 的扩展组件”,还是用传统的 script 标签方式引入页面中。
示例如下:

<script src="../mui/js/mui.min.js"></script>  
<script src="../mui/js/mui.picker.min.js"></script>  
<script src="../libs/ems.js" data-main='./index.js'></script>

注意:上边代码中 “data-original” 为真实的 “src”,因为 ask 会对 src 做了防 xss 处理。

可以看到前两个 “script” 分别引用了 “mui” 和 “mui.picker”,而最后一个是通过模块加载器进行加载的,指定了入口模块 “./index.js”

模块代码:

define(function(require, exports, module) {  

    //设置状态栏颜色(for ios)  
    mui.init({  
        "statusBarBackground": "#099FDE"  
    });  

    mui.plusReady(function() {  
        plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");  
    });  

    var utils = require('../libs/utils.js');  
    var pageHepler = require('../common/page-helper');  
    var hotelPriceFilter = require('../controls/hotel-price-filter/main');  

    var self = exports;  

    self.dayNum = 1;  
    self.beginDate = utils.formatDate(new Date(), 'yyyy-MM-dd');  

    ...  

    ...  

    //设置价格过滤条件  
    self.setPriceFilter = function() {  
        hotelPriceFilter.show(function(rs) {  
            self.priceRange = rs.priceRange;  
            self.star = rs.star;  
        });  
    };  

    //初始化页面辅助模块  
    pageHepler.init({  
        handler: self,  
        mvvm: true  
    });  

    ...  
        ...  

});

如上述代码,在每个页面的 "入口模块" (一文件一模块、一模块一文件),在模块中通过 require 去引用需要的公共模块,模块有可能是一个 "实用函数模块、完整的获立组件,或者其他形式"。

基于 VUE 的双向绑定 (MVVM)

目前流行的 mv* 框架有很多,其中 mvvm 框架也有不少,在这个 “酒店 app 模板” 中,我们期望利用 mvvm 的 “双向绑定” 简化我们的数据绑定以及 dom 操作,经过比较,我们选用了比较轻量的 vue.js

在此 app 模板中,将 vue 封在了 /common/page-helper.js 中,主要代码如下:

...  
...  
//mvvm 绑定  
if (options.mvvm) {  
    if (options.mvvm === true) {  
        options.mvvm = {};  
    }  
    options.mvvm.el = options.mvvm.el || options.holder;  
    options.mvvm.data = options.mvvm.data || options.handler;  
    options.mvvm.methods = options.mvvm.methods || options.handler;  
    options.mvvm.computed = options.mvvm.computed || options.handler.computed;  
    exports.vue = new Vue(options.mvvm);  
}  
...  
...

完整的代码见 GitHub 开源 Repository。

使用 Gulp 构建

在这个模板中,并没有进行文件合并,而只进行了代码 "混淆和压缩",构建脚本如下:

var gulp = require("gulp");  
var pkg = require("./package.json");  
var uglify = require("gulp-uglify");  
var minifycss = require('gulp-minify-css');  
var del = require('del');  
var concat = require('gulp-concat');  
var rename = require('gulp-rename');  
var header = require('gulp-header');  

var banner = ['/**',  
    ' * <%= name %> - <%= description %>',  
    ' * @version v<%= version %>',  
    ' * @link <%= homepage %>',  
    ' * @author <%= author %>',  
    ' * @license <%= license %>',  
    ' */',  
    ''  
].join('\r\n');  

gulp.task('clear', function(cb) {  
    del(['build'], cb);  
});  

gulp.task('build', ["clear"], function() {  
    //css  
    gulp.src(["./src/**/*.css"])  
        .pipe(minifycss())  
        .pipe(header(banner, pkg))  
        .pipe(gulp.dest("./build/"));  
    //js  
    gulp.src(["./src/**/*.js"])  
        .pipe(uglify({  
            mangle: {  
                except: ['require']  
            }  
        }))  
        .pipe(header(banner, pkg))  
        .pipe(gulp.dest("./build/"));  
    //html  
    gulp.src(["./src/**/*.html"])  
        .pipe(gulp.dest("./build/"));  
    //ttf  
    gulp.src(["./src/**/*.ttf"])  
        .pipe(gulp.dest("./build/"));  
        ...  
        ...   
    //ico  
    gulp.src(["./src/**/*.ico"])  
        .pipe(gulp.dest("./build/"));  
    //png  
    gulp.src(["./src/**/*.png"])  
        .pipe(gulp.dest("./build/"));  
    //json  
    gulp.src(["./src/**/*.json"])  
        .pipe(gulp.dest("./build/"));  
});  

gulp.task('default', ["clear", "build"]);

执行构建脚本前,需要分别 “全局和本地” 都安装 Gulp ,同时需要安装相关 Gulp 插件

全局安装 Gulp

[sudo] npm install gulp -g

本地安装 Gulp 以及构建依赖的 Gulp 插件

npm install

从前边的构建脚中可以看到共有三个 “task”,分别为:

  1. clear : 用于清理已生成的文件
  2. build : 生成新的 release 版本
  3. default : 会依次执行 clear 、build

执行 Gulp 任务

gulp [clear|build|default]

-- EOF --

收起阅读 »

js实现对图片的二进制流md5计算

js实现对图片的二进制流md5计算,没找到好的办法,所以自己写了一个,分享出来大家参考。

//计算图片md5  
        function img_MD5(img_path,callback) {  
            plus.io.resolveLocalFileSystemURL(img_path, function(entry) {  
                var fileReader = new plus.io.FileReader();  
                fileReader.readAsDataURL(entry);  
                fileReader.onloadend = function(evt) {  
                    var format="image/jpeg";  
                    //抽取DataURL中的数据部分,从Base64格式转换为二进制格式  
                    var bin = atob(evt.target.result.split(',')[1]);  
                    //创建空的Uint8Array  
                    var buffer = new Uint8Array(bin.length);  
                    //将图像数据逐字节放入Uint8Array中  
                    for (var i = 0; i < bin.length; i++) {  
                        buffer[i] = bin.charCodeAt(i);  
                    };  
                    //利用Uint8Array创建Blob对象  
                    blob = new Blob([buffer.buffer], {type : format});  
                    var fileReader1 = new FileReader();  
                    fileReader1.readAsBinaryString(blob);  
                    fileReader1.onload = function(evt) {  
                        if (evt.target.readyState == FileReader.DONE) {  
                            var imgblob = evt.target.result;  
                            var sparkMD5 = new SparkMD5();  
                            sparkMD5.appendBinary(imgblob);  
                            var MD5 = sparkMD5.end();  
                            console.log("MD5:" + MD5);  
callback(MD5)  
                        }  
                    };  
                }  
            }, function(e) {  
                console.log("Resolve file URL failed: " + e.message);  
            });  
        }  
//使用方法  
var url=document.getElementById("ID").src;  
img_MD5(url,function (md5){  
                    console.log(md5)  
                })

对二进制流进行md5加密需要用spark-md5.js

最新发现本地图片nativeObj 里的bitmap.toBase64Data();拿到Base64是经过压缩的,拿到的是jepg;所以要用本地io把图片Base64读出来。

继续阅读 »

js实现对图片的二进制流md5计算,没找到好的办法,所以自己写了一个,分享出来大家参考。

//计算图片md5  
        function img_MD5(img_path,callback) {  
            plus.io.resolveLocalFileSystemURL(img_path, function(entry) {  
                var fileReader = new plus.io.FileReader();  
                fileReader.readAsDataURL(entry);  
                fileReader.onloadend = function(evt) {  
                    var format="image/jpeg";  
                    //抽取DataURL中的数据部分,从Base64格式转换为二进制格式  
                    var bin = atob(evt.target.result.split(',')[1]);  
                    //创建空的Uint8Array  
                    var buffer = new Uint8Array(bin.length);  
                    //将图像数据逐字节放入Uint8Array中  
                    for (var i = 0; i < bin.length; i++) {  
                        buffer[i] = bin.charCodeAt(i);  
                    };  
                    //利用Uint8Array创建Blob对象  
                    blob = new Blob([buffer.buffer], {type : format});  
                    var fileReader1 = new FileReader();  
                    fileReader1.readAsBinaryString(blob);  
                    fileReader1.onload = function(evt) {  
                        if (evt.target.readyState == FileReader.DONE) {  
                            var imgblob = evt.target.result;  
                            var sparkMD5 = new SparkMD5();  
                            sparkMD5.appendBinary(imgblob);  
                            var MD5 = sparkMD5.end();  
                            console.log("MD5:" + MD5);  
callback(MD5)  
                        }  
                    };  
                }  
            }, function(e) {  
                console.log("Resolve file URL failed: " + e.message);  
            });  
        }  
//使用方法  
var url=document.getElementById("ID").src;  
img_MD5(url,function (md5){  
                    console.log(md5)  
                })

对二进制流进行md5加密需要用spark-md5.js

最新发现本地图片nativeObj 里的bitmap.toBase64Data();拿到Base64是经过压缩的,拿到的是jepg;所以要用本地io把图片Base64读出来。

收起阅读 »

关于微信支付返回-1错误以及无法打开微信支付界面的问题

支付 微信 微信支付 Payment

翻了下论坛里面,到处都是问-1错误的,这里我把我自己踩过的坑分享一下,希望对大家开发微信支付有些帮助。
我已经测试过的原因如下:
1,微信支付只支持打包之后安装到手机上进行测试,不支持真机调试,所以骚年们,打包之后再试吧
2,请在打包测试之前,一定要确认和官方的回调字符串是不是一模一样,参数键值不能多也不能少,为了确保成功还是相信官方不会忽悠你的!
这段代码是dcloud官方微信支付返回的字符串,大家可以把自己的字符串拿出来比对一下,确认一致,那就打包测试吧

{"retcode":0,  
"retmsg":"ok",  
"appid":"wx041********d61297",  
"noncestr":"29dfdc1**d9c7ef283cad8ecb1448c8",  
"package":"Sign=WXPay",  
"partnerid":"123*****01",  
"prepayid":"52010***0151019c3820473613388ca",  
"timestamp":1445239300,  
"sign":"16a5efa393b50*****4d6d76e1b2ff703d27"}

3,如果以上两点都已经确认没问题了但是还是无法吊起支付,那么就去微信开放平台https://open.weixin.qq.com/确认下你的应用签名和包名与你在平台上配置的签名和应用包名是不是相同吧,如何获取应用签名这个论坛里面有教材,实在不知道的去腾讯应用宝市场发布下应用,那里也有教程如何获取app的签名,微信开放平台签名修改之后需要等一段时间才会生效,所有如果确认是签名或者包名问题,下班之前再改吧,不然一天白瞎了
特别说一下,这里的签名是长度为32位的MD5字符串
4,ios和安卓在获取支付通道的时候有个现象,他们在支付通道数组对象里面的先后顺序不一样,如果你们在测试微信支付的时候报什么620XX错误,那就检查下支付通道对象获取的对不对
5,补充上面第三点,大家的证书在发布之前一定要换成自己的私有证书,用dcloud的公有虽然也没什么问题,但是一旦dcloud切换证书,之前发布的应用都会失效的,特别麻烦,这个只是个建议

继续阅读 »

翻了下论坛里面,到处都是问-1错误的,这里我把我自己踩过的坑分享一下,希望对大家开发微信支付有些帮助。
我已经测试过的原因如下:
1,微信支付只支持打包之后安装到手机上进行测试,不支持真机调试,所以骚年们,打包之后再试吧
2,请在打包测试之前,一定要确认和官方的回调字符串是不是一模一样,参数键值不能多也不能少,为了确保成功还是相信官方不会忽悠你的!
这段代码是dcloud官方微信支付返回的字符串,大家可以把自己的字符串拿出来比对一下,确认一致,那就打包测试吧

{"retcode":0,  
"retmsg":"ok",  
"appid":"wx041********d61297",  
"noncestr":"29dfdc1**d9c7ef283cad8ecb1448c8",  
"package":"Sign=WXPay",  
"partnerid":"123*****01",  
"prepayid":"52010***0151019c3820473613388ca",  
"timestamp":1445239300,  
"sign":"16a5efa393b50*****4d6d76e1b2ff703d27"}

3,如果以上两点都已经确认没问题了但是还是无法吊起支付,那么就去微信开放平台https://open.weixin.qq.com/确认下你的应用签名和包名与你在平台上配置的签名和应用包名是不是相同吧,如何获取应用签名这个论坛里面有教材,实在不知道的去腾讯应用宝市场发布下应用,那里也有教程如何获取app的签名,微信开放平台签名修改之后需要等一段时间才会生效,所有如果确认是签名或者包名问题,下班之前再改吧,不然一天白瞎了
特别说一下,这里的签名是长度为32位的MD5字符串
4,ios和安卓在获取支付通道的时候有个现象,他们在支付通道数组对象里面的先后顺序不一样,如果你们在测试微信支付的时候报什么620XX错误,那就检查下支付通道对象获取的对不对
5,补充上面第三点,大家的证书在发布之前一定要换成自己的私有证书,用dcloud的公有虽然也没什么问题,但是一旦dcloud切换证书,之前发布的应用都会失效的,特别麻烦,这个只是个建议

收起阅读 »

创业项目寻靠谱开发者

招聘

‘’找到家‘’定位下一代智能租房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+原生实现