HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

最近没事了,可以接单,小项目来...

mui 外包 微信小程序 HTML5

最近没事了,可以接单,小项目来,前端与UI都可做。Q11544467

最近没事了,可以接单,小项目来,前端与UI都可做。Q11544467

支付开发,高德地图,下拉刷新,申请打包证书

沉浸式状态栏

从菜鸟到新手,遇见问题解决问题是家常便饭,今天记录一下遇到的一些问题,希望能对同样被困扰过的同学的一些帮助。
一、修改状态栏背景色,在入口页面加这句代码
plus.navigator.setStatusBarBackground('#000'); //修改状态栏背景色
二、申请私有安卓打包证书
1.下载dcloud公有证书http://download.dcloud.net.cn/HBuilder.keystore
参考这篇文章http://ask.dcloud.net.cn/article/12718
2.使用第三方软件uploader,可以快速申请
三.调用微信和支付宝功能
1.先在demo里找到beecloud.html,把页面做出来
2.去蚂蚁金服和微信开放平台注册开发者账号,并进行开发者资质认证,然后在各自平台创建APP应用,进行各自开发配置,比如回调地址,可以得到返回的订单信息。然后你还要去beecloud官网去注册企业账号,注册完了之后创建支付应用,这里会得到一个APP ID,这个APP ID是需要在hbuilder填写的,然后在这个支付应用里进行交易渠道参数设置,支付宝APP支付和微信APP支付都需要配置,填写的信息就来自你之前在各自开放平台创建的应用。缺少什么就申请什么,比如收款商户。Beecloud的东西都配置好了,支付功能就可以使用了,注意一下,微信支付只有打包之后才行,真机运行会报错。
3.以上的账号申请和各种配置,比较繁琐,但是都有教程,不要急躁,按步骤一步步来,把重要信息保存好。建议在做支付功能之前就开始申请注册,全程需要半个月的审核时间。
四、高德地图定位不准确
细心的同学会发现,在APP开发的时候调用高德地图api进行定位时,会有几百米的偏差,相当蛋疼。查阅资料之后发现是坐标系的问题,需要自己加一个纠偏算法。这里我详细的说一下怎么用。

这是纠偏之前的代码,使用浏览器定位
map = new AMap.Map('container', {
resizeEnable: true
});
//获取定位
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});

然后开始纠偏,首先把下面代码复制进来,放在获取定位之前

//纠偏算法  
                        var a = 6378245.0;  
                        var ee = 0.00669342162296594323;  
                        var lnglat = new Array(2);  

                        function transform(wgLon, wgLat) {  
                            console.log(Math.PI);  
                            if(outOfChina(wgLat, wgLon)) {  
                                console.log("outOfChina");  
                                lnglat[0] = wgLon;  
                                lnglat[1] = wgLat;  
                                console.log(lnglat[0] + "|" + lnglat[1]);  
                                return lnglat;  
                            }  
                            var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);  
                            var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);  
                            var radLat = wgLat / 180.0 * Math.PI;  
                            var magic = Math.sin(radLat);  
                            magic = 1 - ee * magic * magic;  
                            var sqrtMagic = Math.sqrt(magic);  
                            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);  
                            dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);  
                            lnglat[0] = wgLon + dLon;  
                            lnglat[1] = wgLat + dLat;  
                            console.log(lnglat[0] + "|" + lnglat[1] + "|" + dLon + "|" + dLat);  
                            return lnglat;  
                        }  

                        function outOfChina(lat, lon) {  
                            if(lon < 72.004 || lon > 137.8347)  
                                return true;  
                            if(lat < 0.8293 || lat > 55.8271)  
                                return true;  
                            return false;  
                        }  
                        function transformLat(x, y) {  
                            ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));  
                            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;  
                            ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;  
                            ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;  
                            return ret;  
                        }  

                        function transformLon(x, y) {  
                            ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));  
                            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;  
                            ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;  
                            ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;  
                            return ret;  
                        }  

然后,把之前获取定位的代码修改一下,把打点都false掉,纠偏之后重新打点。
/获取定位
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
showMarker: false,
showCircle: false,
panToLocation: true,
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
});
map.addControl(geolocation); // 把定位插件加入地图实例
geolocation.getCurrentPosition(function(status, result) {
if(status == "complete") {
var pos = result.position;
var newPos = transform(pos.lng, pos.lat);
var marker = new AMap.Marker({
position: newPos
});

                                    marker.setMap(map);  
                                }  
                            }); // 调用定位  

这样定位就比较准确了,目测还会有十米的偏差,但是已经在可接受范围了,基本达到我们的要求。
五、禁用下拉刷新
这个就比较简单了,把这段代码注释掉就可以了,然后重新运行一下,敲重点,要重新运行,否则看不到效果。
down: {
style: 'circle',
callback: function() {

                                                                    }  
                                                                },  

重写mui.back()这个更简单了
mui.back = function(){
//需要执行的代码
};
还有一些比较常用的代码
plus.webview.currentWebview().close();//关闭当前页面
window.localStorage.removeItem("orderId")//清除本地缓存

暂时想起来这么多,希望能对大家有所帮助

继续阅读 »

从菜鸟到新手,遇见问题解决问题是家常便饭,今天记录一下遇到的一些问题,希望能对同样被困扰过的同学的一些帮助。
一、修改状态栏背景色,在入口页面加这句代码
plus.navigator.setStatusBarBackground('#000'); //修改状态栏背景色
二、申请私有安卓打包证书
1.下载dcloud公有证书http://download.dcloud.net.cn/HBuilder.keystore
参考这篇文章http://ask.dcloud.net.cn/article/12718
2.使用第三方软件uploader,可以快速申请
三.调用微信和支付宝功能
1.先在demo里找到beecloud.html,把页面做出来
2.去蚂蚁金服和微信开放平台注册开发者账号,并进行开发者资质认证,然后在各自平台创建APP应用,进行各自开发配置,比如回调地址,可以得到返回的订单信息。然后你还要去beecloud官网去注册企业账号,注册完了之后创建支付应用,这里会得到一个APP ID,这个APP ID是需要在hbuilder填写的,然后在这个支付应用里进行交易渠道参数设置,支付宝APP支付和微信APP支付都需要配置,填写的信息就来自你之前在各自开放平台创建的应用。缺少什么就申请什么,比如收款商户。Beecloud的东西都配置好了,支付功能就可以使用了,注意一下,微信支付只有打包之后才行,真机运行会报错。
3.以上的账号申请和各种配置,比较繁琐,但是都有教程,不要急躁,按步骤一步步来,把重要信息保存好。建议在做支付功能之前就开始申请注册,全程需要半个月的审核时间。
四、高德地图定位不准确
细心的同学会发现,在APP开发的时候调用高德地图api进行定位时,会有几百米的偏差,相当蛋疼。查阅资料之后发现是坐标系的问题,需要自己加一个纠偏算法。这里我详细的说一下怎么用。

这是纠偏之前的代码,使用浏览器定位
map = new AMap.Map('container', {
resizeEnable: true
});
//获取定位
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});

然后开始纠偏,首先把下面代码复制进来,放在获取定位之前

//纠偏算法  
                        var a = 6378245.0;  
                        var ee = 0.00669342162296594323;  
                        var lnglat = new Array(2);  

                        function transform(wgLon, wgLat) {  
                            console.log(Math.PI);  
                            if(outOfChina(wgLat, wgLon)) {  
                                console.log("outOfChina");  
                                lnglat[0] = wgLon;  
                                lnglat[1] = wgLat;  
                                console.log(lnglat[0] + "|" + lnglat[1]);  
                                return lnglat;  
                            }  
                            var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);  
                            var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);  
                            var radLat = wgLat / 180.0 * Math.PI;  
                            var magic = Math.sin(radLat);  
                            magic = 1 - ee * magic * magic;  
                            var sqrtMagic = Math.sqrt(magic);  
                            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);  
                            dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);  
                            lnglat[0] = wgLon + dLon;  
                            lnglat[1] = wgLat + dLat;  
                            console.log(lnglat[0] + "|" + lnglat[1] + "|" + dLon + "|" + dLat);  
                            return lnglat;  
                        }  

                        function outOfChina(lat, lon) {  
                            if(lon < 72.004 || lon > 137.8347)  
                                return true;  
                            if(lat < 0.8293 || lat > 55.8271)  
                                return true;  
                            return false;  
                        }  
                        function transformLat(x, y) {  
                            ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));  
                            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;  
                            ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;  
                            ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;  
                            return ret;  
                        }  

                        function transformLon(x, y) {  
                            ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));  
                            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;  
                            ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;  
                            ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;  
                            return ret;  
                        }  

然后,把之前获取定位的代码修改一下,把打点都false掉,纠偏之后重新打点。
/获取定位
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
showMarker: false,
showCircle: false,
panToLocation: true,
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
});
map.addControl(geolocation); // 把定位插件加入地图实例
geolocation.getCurrentPosition(function(status, result) {
if(status == "complete") {
var pos = result.position;
var newPos = transform(pos.lng, pos.lat);
var marker = new AMap.Marker({
position: newPos
});

                                    marker.setMap(map);  
                                }  
                            }); // 调用定位  

这样定位就比较准确了,目测还会有十米的偏差,但是已经在可接受范围了,基本达到我们的要求。
五、禁用下拉刷新
这个就比较简单了,把这段代码注释掉就可以了,然后重新运行一下,敲重点,要重新运行,否则看不到效果。
down: {
style: 'circle',
callback: function() {

                                                                    }  
                                                                },  

重写mui.back()这个更简单了
mui.back = function(){
//需要执行的代码
};
还有一些比较常用的代码
plus.webview.currentWebview().close();//关闭当前页面
window.localStorage.removeItem("orderId")//清除本地缓存

暂时想起来这么多,希望能对大家有所帮助

收起阅读 »

模板分享

前年做的一个app,mui框架,感兴趣的可以私聊,拿去做模板。Q2589272097

前年做的一个app,mui框架,感兴趣的可以私聊,拿去做模板。Q2589272097

区分escape、encodeURI和encodeURIComponent

1.简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。
编码之后的效果是%XX或者%uXXXX这种形式。
其中 ASCII字母、数、@/ ,这几个字符不会被编码,其余的都会。
最关键的是,当你需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。*****

2.最常用的encodeURI和encodeURIComponent
对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!
()'
所以encodeURIComponent比encodeURI编码的范围更大
实际例子来说,encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

3.使用
(1)如果只是编码字符串,不和URL有半毛钱关系,那么用escape。
(2)如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
(3)当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。

参考: https://stackoverflow.com/questions/11294107/how-can-i-send-the-ampersand-character-via-ajax
https://www.zhihu.com/question/21861899

可以读一下 《HTTP 权威指南》的第二章第 4 节——各种令人头疼的字符
http://www.ituring.com.cn/book/844

继续阅读 »

1.简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。
编码之后的效果是%XX或者%uXXXX这种形式。
其中 ASCII字母、数、@/ ,这几个字符不会被编码,其余的都会。
最关键的是,当你需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。*****

2.最常用的encodeURI和encodeURIComponent
对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!
()'
所以encodeURIComponent比encodeURI编码的范围更大
实际例子来说,encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

3.使用
(1)如果只是编码字符串,不和URL有半毛钱关系,那么用escape。
(2)如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
(3)当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。

参考: https://stackoverflow.com/questions/11294107/how-can-i-send-the-ampersand-character-via-ajax
https://www.zhihu.com/question/21861899

可以读一下 《HTTP 权威指南》的第二章第 4 节——各种令人头疼的字符
http://www.ituring.com.cn/book/844

收起阅读 »

uploader又拍云上传文件集成

项目中用到又拍云文件存储,找了一遍没找到关于又拍云上传的方法,只能自己造了
首先我封装到一个文件了

(function($, request, upyun){  
    upyun.bucket = '您的服务名称'  
    upyun.upload = function (path, success, fail) {  
        var self = this  
        success = success || mui.noop  
        fail = fail || mui.noop  
        var name = path.substr(path.lastIndexOf('/') + 1)  
        this.getSignature({name: name}, function(err, res){  
            if (err) {  
              fail && fail(err)  
              return  
            }  
            var task = plus.uploader.createUpload(  
                'https://v0.api.upyun.com/'+ self.bucket,  
                {method:'POST'},   
                function ( t, status ) {  
                if ( status == 200 ) {  
                    var data = JSON.parse(t.responseText)  
                    if(data.code == 200){  
                        success(data)  
                    }else{  
                        fail(data.message)  
                    }  
                } else {  
                    fail({err:status,message:'上传文件出错'+ JSON.stringify(t)})  
                }  
            })  
            task.addFile(path, {key:"file"})  
            task.addData("authorization", res.signature || '')  
            task.addData("policy", res.policy || '')  
            task.start()  
        })  
    }  

    upyun.getSignature = function (data, cb) {  
        request.post(api.upsign, data).then(function(data){  
           cb(null, data)  
        }).catch(function(err){  
           cb(err)  
        })  
    }  
})(mui, request, window.upyun={})

后端采用php签名

        $key = 'upyun.operator‘;  
        $secret = md5('upyun.password');  
        $method = "POST";  
        $uri = "/".‘upyun.bucket';  
        $date = gmdate('D, d M Y H:i:s \G\M\T');  
        $name = $_POST['name'];  
        $ext = substr($name, strrpos($name, '.') + 1);  
        $name =str_replace('.','', microtime(true)).".".$ext;  
        $path = '/test/'.$name; //远程文件路径  
        $policy = base64_encode(json_encode([  
            'save-key' => $path,  
            'bucket' => 'upyun.bucket',  
            'expiration' => time() + 3600,  
            'date' => gmdate('D, d M Y H:i:s \G\M\T')  
        ]));  
        $elems = array();  
        foreach (array($method, $uri, $date, $policy) as $v)  
        {  
            if ($v)  
            {  
                $elems[] = $v;  
            }  
        }  
        $value = implode('&', $elems);  
        $sign = base64_encode(hash_hmac('sha1', $value, $secret, true));  
        $sign = 'UPYUN ' . $key . ':' . $sign;  
        $data = ['policy' => $policy, 'signature' => $sign];  
        echo json_encode($data);

使用方法很简单

upyun.upload(path, function(data){  
       console.log(JSON.stringify(data))  
},function(err){  
    console.log(JSON.stringify(err))  
})
继续阅读 »

项目中用到又拍云文件存储,找了一遍没找到关于又拍云上传的方法,只能自己造了
首先我封装到一个文件了

(function($, request, upyun){  
    upyun.bucket = '您的服务名称'  
    upyun.upload = function (path, success, fail) {  
        var self = this  
        success = success || mui.noop  
        fail = fail || mui.noop  
        var name = path.substr(path.lastIndexOf('/') + 1)  
        this.getSignature({name: name}, function(err, res){  
            if (err) {  
              fail && fail(err)  
              return  
            }  
            var task = plus.uploader.createUpload(  
                'https://v0.api.upyun.com/'+ self.bucket,  
                {method:'POST'},   
                function ( t, status ) {  
                if ( status == 200 ) {  
                    var data = JSON.parse(t.responseText)  
                    if(data.code == 200){  
                        success(data)  
                    }else{  
                        fail(data.message)  
                    }  
                } else {  
                    fail({err:status,message:'上传文件出错'+ JSON.stringify(t)})  
                }  
            })  
            task.addFile(path, {key:"file"})  
            task.addData("authorization", res.signature || '')  
            task.addData("policy", res.policy || '')  
            task.start()  
        })  
    }  

    upyun.getSignature = function (data, cb) {  
        request.post(api.upsign, data).then(function(data){  
           cb(null, data)  
        }).catch(function(err){  
           cb(err)  
        })  
    }  
})(mui, request, window.upyun={})

后端采用php签名

        $key = 'upyun.operator‘;  
        $secret = md5('upyun.password');  
        $method = "POST";  
        $uri = "/".‘upyun.bucket';  
        $date = gmdate('D, d M Y H:i:s \G\M\T');  
        $name = $_POST['name'];  
        $ext = substr($name, strrpos($name, '.') + 1);  
        $name =str_replace('.','', microtime(true)).".".$ext;  
        $path = '/test/'.$name; //远程文件路径  
        $policy = base64_encode(json_encode([  
            'save-key' => $path,  
            'bucket' => 'upyun.bucket',  
            'expiration' => time() + 3600,  
            'date' => gmdate('D, d M Y H:i:s \G\M\T')  
        ]));  
        $elems = array();  
        foreach (array($method, $uri, $date, $policy) as $v)  
        {  
            if ($v)  
            {  
                $elems[] = $v;  
            }  
        }  
        $value = implode('&', $elems);  
        $sign = base64_encode(hash_hmac('sha1', $value, $secret, true));  
        $sign = 'UPYUN ' . $key . ':' . $sign;  
        $data = ['policy' => $policy, 'signature' => $sign];  
        echo json_encode($data);

使用方法很简单

upyun.upload(path, function(data){  
       console.log(JSON.stringify(data))  
},function(err){  
    console.log(JSON.stringify(err))  
})
收起阅读 »

微信小程序如何解析HTML富文本

html 微信小程序

  对于开发一款微信小程序来说,很多程序人员已经知道如何去做了,但是对于在小程序中添加解析HTML富文本这个问题其实很多程序人员还是一知半解,那么下面就由专业的微信小程序开发公司燚轩科技来为大家分析解答一下吧。
1.把wxParse文件全部放入项目。

2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上
<!--wxml-->
<import src="../../../wxParse/wxParse.wxml"/>
<view class="view-title">{{title}}</view>
<view class="view-time-box">
<text class="view-date">{{date}}</text>
<text class="view-time">{{time}}</text>
</view>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3.在wxss中import wxParse.wxss,并设置样式;比如‘wxParse-image’是富文本图片转化成image组件之后的类名,‘wxParse-p’是p标签转化成view组件后设置的类名
<!--wxss-->
@import "../../../wxParse/wxParse.wxss";
page{
background: #fff;
}
.view-title{
line-height: 80rpx;
font-size: 48rpx;
color:#0C0C0C;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 190rpx;
min-height: 80rpx;
width:690rpx;
padding:30rpx 30rpx 0;
}
.view-time-box{
height: 66rpx;
line-height: 66rpx;
font-size: 30rpx;
color:#999999;
margin-bottom: 40rpx;
padding:0 30rpx;
}
.view-date{
margin-right: 20rpx;
}
.wxParse-img{
margin-top:20rpx;
display: block;
position:relative;
top:0;
left:50%;
transform: translateX(-50%);
}
.wxParse-p{
text-indent: 2em;
margin-top:20rpx;
color:#0C0C0C;
line-height:50rpx;
font-size:34rpx;
padding:0 30rpx 30rpx;
text-align: justify;
}

  关于如何在微信小程序中解析HTML这个问题就为大家解答到这里了,如果还存在不理解的地方可以留言咨询。

继续阅读 »

  对于开发一款微信小程序来说,很多程序人员已经知道如何去做了,但是对于在小程序中添加解析HTML富文本这个问题其实很多程序人员还是一知半解,那么下面就由专业的微信小程序开发公司燚轩科技来为大家分析解答一下吧。
1.把wxParse文件全部放入项目。

2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上
<!--wxml-->
<import src="../../../wxParse/wxParse.wxml"/>
<view class="view-title">{{title}}</view>
<view class="view-time-box">
<text class="view-date">{{date}}</text>
<text class="view-time">{{time}}</text>
</view>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3.在wxss中import wxParse.wxss,并设置样式;比如‘wxParse-image’是富文本图片转化成image组件之后的类名,‘wxParse-p’是p标签转化成view组件后设置的类名
<!--wxss-->
@import "../../../wxParse/wxParse.wxss";
page{
background: #fff;
}
.view-title{
line-height: 80rpx;
font-size: 48rpx;
color:#0C0C0C;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 190rpx;
min-height: 80rpx;
width:690rpx;
padding:30rpx 30rpx 0;
}
.view-time-box{
height: 66rpx;
line-height: 66rpx;
font-size: 30rpx;
color:#999999;
margin-bottom: 40rpx;
padding:0 30rpx;
}
.view-date{
margin-right: 20rpx;
}
.wxParse-img{
margin-top:20rpx;
display: block;
position:relative;
top:0;
left:50%;
transform: translateX(-50%);
}
.wxParse-p{
text-indent: 2em;
margin-top:20rpx;
color:#0C0C0C;
line-height:50rpx;
font-size:34rpx;
padding:0 30rpx 30rpx;
text-align: justify;
}

  关于如何在微信小程序中解析HTML这个问题就为大家解答到这里了,如果还存在不理解的地方可以留言咨询。

收起阅读 »

名片全能王识别名片

名片识别

1.名片全能王开发网址https://dev.camcard.com/developers/status

  1. 要申请一个账号,自己完善资料后,申请apikey,申请一般要审核两三天吧,我当时是三天。申请成功会邮箱通知,看下图
    下载附件下来,uploadurl改成自己的邮箱和apikey即可测试

    
    <!doctype html>  
    <html>  
    
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../css/mui.min.css" rel="stylesheet" />  
    </head>  
    
    <body>  
        <ul class="mui-table-view">  
                    <li class="mui-table-view-cell">  
                        <a class="camera" onclick="scanCard()">Take a picture </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="picture" onclick="galleryImg()">Choose from your phone album</a>  
                    </li>  
        </ul>  
        <script src="../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init()    
            var uploadurl="http://bcr2.intsig.net/BCRService/BCR_VCF2?PIN=**&json=1&user=6@qq.com&pass=&lang=2&size=";  
            // 扫描名片--拍照                           
            function scanCard() {  
                var cmr = plus.camera.getCamera();  
                var res = cmr.supportedImageResolutions[0];  
                var fmt = cmr.supportedImageFormats[0];  
                cmr.captureImage(function(path) {  
                        plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                            var localUrl = entry.toLocalURL();  
                            //压缩照片  
                            plus.zip.compressImage({  
                                src: localUrl,  
                                dst: localUrl,  
                                overwrite: true, //覆盖你拍照的图片  
                                format: "jpg", //对方只接受JPG  
                                quality: 70, //对方建议质量  
                                width: "1024",  
                                height: "auto"  
                            }, function(e) {                                  
                                uploadCardImg(e.target, e.size)                                                                                                           
                            }, function(req) {  
                                mui.toast('压缩失败~')  
                            })  
    
                        })  
    
                    },  
                    function(err) {  
                        console.error("拍照失败:" + err.message);  
                    }, {  
                        index: 1,  
                    });  
            }  
            // 扫描名片--选择相册     
            function galleryImg() {  
                plus.gallery.pick(function(path) {  
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                        var localUrl = entry.toLocalURL();  
                        //压缩照片  
                        plus.zip.compressImage({  
                            src: localUrl,  
                            dst: localUrl,  
                            overwrite: true, //覆盖你拍照的图片  
                            format: "jpg", //对方只接受JPG  
                            quality: 70, //对方建议质量  
                            width: "1024",  
                            height: "auto"  
                        }, function(e) {  
                            uploadCardImg(e.target, e.size)                                                                       
                        }, function(req) {  
                            mui.toast('压缩失败~')  
                        })  
    
                    })  
                }, function(e) {  
                    //outSet("取消选择图片");  
                }, {  
                    filter: "image"  
                })  
            }  
            // 扫描名片--上传图片到指定的api接口  
            function uploadCardImg(fileUrl, ImgSize) {  
                  //上传照片对象  
                var uploadimg = plus.uploader.createUpload(uploadurl + ImgSize, {  
                    method: "POST"  
                }, function(t, status) {                      
                    // 上传完成  
                    if (status == 200) {  
                        //alert(t.responseText);  
                        console.log(t.responseText)  
                    } else {  
    
                    }                   
                });  
                uploadimg.addFile(fileUrl, {  
                    key: "imgcark"  
                });  
                uploadimg.start();  
            }  
        </script>  
    </body>  

</html>

继续阅读 »

1.名片全能王开发网址https://dev.camcard.com/developers/status

  1. 要申请一个账号,自己完善资料后,申请apikey,申请一般要审核两三天吧,我当时是三天。申请成功会邮箱通知,看下图
    下载附件下来,uploadurl改成自己的邮箱和apikey即可测试

    
    <!doctype html>  
    <html>  
    
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="../css/mui.min.css" rel="stylesheet" />  
    </head>  
    
    <body>  
        <ul class="mui-table-view">  
                    <li class="mui-table-view-cell">  
                        <a class="camera" onclick="scanCard()">Take a picture </a>  
                    </li>  
                    <li class="mui-table-view-cell">  
                        <a class="picture" onclick="galleryImg()">Choose from your phone album</a>  
                    </li>  
        </ul>  
        <script src="../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init()    
            var uploadurl="http://bcr2.intsig.net/BCRService/BCR_VCF2?PIN=**&json=1&user=6@qq.com&pass=&lang=2&size=";  
            // 扫描名片--拍照                           
            function scanCard() {  
                var cmr = plus.camera.getCamera();  
                var res = cmr.supportedImageResolutions[0];  
                var fmt = cmr.supportedImageFormats[0];  
                cmr.captureImage(function(path) {  
                        plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                            var localUrl = entry.toLocalURL();  
                            //压缩照片  
                            plus.zip.compressImage({  
                                src: localUrl,  
                                dst: localUrl,  
                                overwrite: true, //覆盖你拍照的图片  
                                format: "jpg", //对方只接受JPG  
                                quality: 70, //对方建议质量  
                                width: "1024",  
                                height: "auto"  
                            }, function(e) {                                  
                                uploadCardImg(e.target, e.size)                                                                                                           
                            }, function(req) {  
                                mui.toast('压缩失败~')  
                            })  
    
                        })  
    
                    },  
                    function(err) {  
                        console.error("拍照失败:" + err.message);  
                    }, {  
                        index: 1,  
                    });  
            }  
            // 扫描名片--选择相册     
            function galleryImg() {  
                plus.gallery.pick(function(path) {  
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                        var localUrl = entry.toLocalURL();  
                        //压缩照片  
                        plus.zip.compressImage({  
                            src: localUrl,  
                            dst: localUrl,  
                            overwrite: true, //覆盖你拍照的图片  
                            format: "jpg", //对方只接受JPG  
                            quality: 70, //对方建议质量  
                            width: "1024",  
                            height: "auto"  
                        }, function(e) {  
                            uploadCardImg(e.target, e.size)                                                                       
                        }, function(req) {  
                            mui.toast('压缩失败~')  
                        })  
    
                    })  
                }, function(e) {  
                    //outSet("取消选择图片");  
                }, {  
                    filter: "image"  
                })  
            }  
            // 扫描名片--上传图片到指定的api接口  
            function uploadCardImg(fileUrl, ImgSize) {  
                  //上传照片对象  
                var uploadimg = plus.uploader.createUpload(uploadurl + ImgSize, {  
                    method: "POST"  
                }, function(t, status) {                      
                    // 上传完成  
                    if (status == 200) {  
                        //alert(t.responseText);  
                        console.log(t.responseText)  
                    } else {  
    
                    }                   
                });  
                uploadimg.addFile(fileUrl, {  
                    key: "imgcark"  
                });  
                uploadimg.start();  
            }  
        </script>  
    </body>  

</html>

收起阅读 »

分享app后台运行的问题

1.手机是华为手机,

  1. 需求是app常驻后台运行,即使清理了还在后台运行
  2. 只需要如下设置即可,使app常驻后台运行,
  3. 这种只能针对用户量较少的app,可以教他怎么做,
  4. 用户量大的app不可能这么做,如qq和微信,他们并非是手机上设置的

1.手机是华为手机,

  1. 需求是app常驻后台运行,即使清理了还在后台运行
  2. 只需要如下设置即可,使app常驻后台运行,
  3. 这种只能针对用户量较少的app,可以教他怎么做,
  4. 用户量大的app不可能这么做,如qq和微信,他们并非是手机上设置的

MUI、微信小程序、Vue实战项目项目及源代码分享(含源码)

Vue 教程 视频 mui

MUI 及 vue学习资料免费赠送,其中包含一系列实战项目以及项目的源码;
资源领取地址:MUI MUI实战项目及源码
VUE VUE2.0实战项目及源码

传智播客-黑马程序员 轻松玩转微信小程序视频
资源领取地址:微信小程序视频

继续阅读 »

MUI 及 vue学习资料免费赠送,其中包含一系列实战项目以及项目的源码;
资源领取地址:MUI MUI实战项目及源码
VUE VUE2.0实战项目及源码

传智播客-黑马程序员 轻松玩转微信小程序视频
资源领取地址:微信小程序视频

收起阅读 »

ios11.4打不开相册,打开相机黑屏,有人遇到过吗?

5+sdk

官方的HelloH5应用里也不可以,那位大佬回答下啊!!

官方的HelloH5应用里也不可以,那位大佬回答下啊!!

HTML中网页拍照并上传照片的实现方法

  对于如何在网页上进行拍照并上传照片的方法,可能很多程序员都觉得非常的简单,不就是调动一下摄像头开启吗?但是真正实现起来的话会发现,其实并不是这样子的,经过我们多次尝试终于成功了,下面就跟大家分享一下。

  代码如下:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>spittr.Spitter</title>
<link rel="stylesheet"
type="text/css"
href="/resource/layui/css/layui.css" >
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script src="/resource/jquery.webcam.js"></script>
<script type="text/javascript">
$(function() {

        var pos = 0, ctx = null, saveCB, image = [];    

//创建画布指定宽度和高度
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
//如果画布成功创建
if (canvas.toDataURL) {
//设置画布为2d,未来可能支持3d
ctx = canvas.getContext("2d");
//截图320*240,即整个画布作为有效区(cutx?)
image = ctx.getImageData(0, 0, 320, 240);

            saveCB = function(data) {    

//把data切割为数组
var col = data.split(";");
var img = image;
//绘制图像(这里不是很理解算法)
//参数data 只是每行的数据 ,例如320240 大小的照片,一张完整的照片下来需要240个data,每个data有320个rgb
for(var i = 0; i < 320; i++) {
//转换为十进制
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
//当绘制320
240像素的图片时发给后端php
if (pos >= 4 320 240) {
//把图像放到画布上,输出为png格式
ctx.putImageData(img, 0, 0);
console.log(1,canvas.toDataURL("image/jpeg"));
$.post("/fileupload", {type: "data", img: canvas.toDataURL("image/jpeg")},
function(data,status){
alert(status);
}
);
pos = 0;

                }    
            };    

        } else {    
            saveCB = function(data) {    

//把数据一点点的放入image[]
image.push(data);
pos+= 4 320;
console.log(1,image.join('|'));
if (pos >= 4
320 * 240) {
$.post("/fileupload", {type: "pixel", img: image.join('|')});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/resource/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},

            debug: function (type, string) {    
                console.log(type + ": " + string);    
            }    
        });    
    });    
</script>    

</head>
<body>
<div id="webcam"></div>
<input type="button" onclick="webcam.capture();" value="点击触发" >
</body>
</html>

  注意
  这是通过ajax来post图片到服务器上,这是http请求,不能直接本地post。
  需要jquery.webcam.js和jscam_canvas_only.swf 使用的时候目录修改一下
  本文由专业的app开发报价燚轩科技整理发布,如需转载请注明作者及出处。

继续阅读 »

  对于如何在网页上进行拍照并上传照片的方法,可能很多程序员都觉得非常的简单,不就是调动一下摄像头开启吗?但是真正实现起来的话会发现,其实并不是这样子的,经过我们多次尝试终于成功了,下面就跟大家分享一下。

  代码如下:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>spittr.Spitter</title>
<link rel="stylesheet"
type="text/css"
href="/resource/layui/css/layui.css" >
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script src="/resource/jquery.webcam.js"></script>
<script type="text/javascript">
$(function() {

        var pos = 0, ctx = null, saveCB, image = [];    

//创建画布指定宽度和高度
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
//如果画布成功创建
if (canvas.toDataURL) {
//设置画布为2d,未来可能支持3d
ctx = canvas.getContext("2d");
//截图320*240,即整个画布作为有效区(cutx?)
image = ctx.getImageData(0, 0, 320, 240);

            saveCB = function(data) {    

//把data切割为数组
var col = data.split(";");
var img = image;
//绘制图像(这里不是很理解算法)
//参数data 只是每行的数据 ,例如320240 大小的照片,一张完整的照片下来需要240个data,每个data有320个rgb
for(var i = 0; i < 320; i++) {
//转换为十进制
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
//当绘制320
240像素的图片时发给后端php
if (pos >= 4 320 240) {
//把图像放到画布上,输出为png格式
ctx.putImageData(img, 0, 0);
console.log(1,canvas.toDataURL("image/jpeg"));
$.post("/fileupload", {type: "data", img: canvas.toDataURL("image/jpeg")},
function(data,status){
alert(status);
}
);
pos = 0;

                }    
            };    

        } else {    
            saveCB = function(data) {    

//把数据一点点的放入image[]
image.push(data);
pos+= 4 320;
console.log(1,image.join('|'));
if (pos >= 4
320 * 240) {
$.post("/fileupload", {type: "pixel", img: image.join('|')});
pos = 0;
}
};
}
$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/resource/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},

            debug: function (type, string) {    
                console.log(type + ": " + string);    
            }    
        });    
    });    
</script>    

</head>
<body>
<div id="webcam"></div>
<input type="button" onclick="webcam.capture();" value="点击触发" >
</body>
</html>

  注意
  这是通过ajax来post图片到服务器上,这是http请求,不能直接本地post。
  需要jquery.webcam.js和jscam_canvas_only.swf 使用的时候目录修改一下
  本文由专业的app开发报价燚轩科技整理发布,如需转载请注明作者及出处。

收起阅读 »

io.dcloud.HBuilder离线打包 不让改ID吗

离线打包

io.dcloud.HBuilder 离线打包的时候 应用ID 不让修改吗 io.dcloud.HBuilder

为什么一改就运行不了了 一直转圈

io.dcloud.HBuilder 离线打包的时候 应用ID 不让修改吗 io.dcloud.HBuilder

为什么一改就运行不了了 一直转圈