mui 页面无法下滑拖拽 主要体现在华为手机浏览器
项目做到中期遇到一个问题，华为手机有些页面显示不全且无法下滑。
因为之前一直用的Google浏览器的模拟模式进行开发和调试的，一直未发现这个问题。
刚开始 选用mui的下拉刷新上拉加载的方式来进行页面配置。
忙活半天总算是把android的问题给解决了。然后转头去os上看看。果然ios又出问题了。
因为头部用的是原生的头部，下面主体内容又都用mui的mui-scroll-wrapper样式栝主了，
所以使用的时候反应迟钝、不流畅，根据无法正常使用。
接着又有传统方式写html发现在浏览器上是没有问题。问题原因浮现了。
然后我把相关的js和css全部加进来发现，果然不好使了。
经过排查原因找到了
原来是因为 mui.min.css 中设置了 touch-action: none;只需要把它删掉就好了
但因为下拉刷新上拉加载还需要这个属性。
所以我是直接把mui.min.css文件复制 一份，改个新的名称。
在不需要使用下拉刷新的页面引用这个新的mui样式就可以了。
如果嫌麻烦，则在不需要使用“下拉刷新” 的html页面，加上 * { touch-action:inherit; }
就可以解决问题了。
此博客是本人原创 未经允许不得转载 谢谢。
博客链接地址：http://www.cnblogs.com/richard-ju/p/L2018004.html
项目做到中期遇到一个问题，华为手机有些页面显示不全且无法下滑。
因为之前一直用的Google浏览器的模拟模式进行开发和调试的，一直未发现这个问题。
刚开始 选用mui的下拉刷新上拉加载的方式来进行页面配置。
忙活半天总算是把android的问题给解决了。然后转头去os上看看。果然ios又出问题了。
因为头部用的是原生的头部，下面主体内容又都用mui的mui-scroll-wrapper样式栝主了，
所以使用的时候反应迟钝、不流畅，根据无法正常使用。
接着又有传统方式写html发现在浏览器上是没有问题。问题原因浮现了。
然后我把相关的js和css全部加进来发现，果然不好使了。
经过排查原因找到了
原来是因为 mui.min.css 中设置了 touch-action: none;只需要把它删掉就好了
但因为下拉刷新上拉加载还需要这个属性。
所以我是直接把mui.min.css文件复制 一份，改个新的名称。
在不需要使用下拉刷新的页面引用这个新的mui样式就可以了。
如果嫌麻烦，则在不需要使用“下拉刷新” 的html页面，加上 * { touch-action:inherit; }
就可以解决问题了。
此博客是本人原创 未经允许不得转载 谢谢。
博客链接地址：http://www.cnblogs.com/richard-ju/p/L2018004.html
收起阅读 »
左侧向右，滑动关闭webview代码分享
JS方法
var rightClose = function(parview) {
//获得父窗口ID
var pws = plus.webview.getWebviewById(parview);
//获取当前窗口
var ws = plus.webview.currentWebview();
//监听当前侧滑窗口的右滑
ws.drag({
direction: 'right',
moveMode: 'followFinger'
}, {
view: pws.id,
moveMode: 'silent'
}, function(e) {
//滑动到end执行mui.back()事件
if(e.type == 'end' && e.result) {
mui.back();
}
});
}在子页面调用方法
mui.plusReady(function() {
rightClose('memadd');
}); 说明： memadd=当前页面的ID 也就是子页的ID
JS方法
var rightClose = function(parview) {
//获得父窗口ID
var pws = plus.webview.getWebviewById(parview);
//获取当前窗口
var ws = plus.webview.currentWebview();
//监听当前侧滑窗口的右滑
ws.drag({
direction: 'right',
moveMode: 'followFinger'
}, {
view: pws.id,
moveMode: 'silent'
}, function(e) {
//滑动到end执行mui.back()事件
if(e.type == 'end' && e.result) {
mui.back();
}
});
}在子页面调用方法
mui.plusReady(function() {
rightClose('memadd');
}); 说明： memadd=当前页面的ID 也就是子页的ID
收起阅读 »
PHP开发中基于layUI的三级联动效果如何实现
后台开发常常用到layUI框架，这样才能让整个页面效果看起来美观大方，然而有时候一些原生的效果放到layUI框架上是无法使用的，比如最近遇到了省市县三级联动的select效果。不同于之前的，layUI框架里，需要重视select的lay-filter属性，来监听事件，另外需要form.render()来重新渲染，解决这两大难题，联动也就不再是难题。下面就来为大家分享下吧。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区级联的实现</title>
<link rel="stylesheet" href="http://www.zhengjinfan.cn/plugins/layui/css/layui.css" />
</head>
<body>
<div style="margin: 50px auto; ">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="area" lay-filter="area">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="http://www.zhengjinfan.cn/js/area.js"></script>
<script>
(function(){
var areaData=Area;
var $, $form,form;
var $selectProvince,$selectCity,$selectArea;
layui.use(['jquery', 'form'], function() {
$ = layui.jquery;
form = layui.form();
$form = $('form');
$selectProvince=$form.find('select[name=province]');
$selectCity=$form.find('select[name=city]');
$selectArea=$form.find('select[name=area]');
form.on('select(province)', function(data){
var value = data.value;
var d = value.split('');
var code = d[0];
var count = d[1];
var index = d[2];
if(count > 0) {
loadCity(areaData[index].mallCityList,index);
$selectCity.parent().show();
} else {
$selectCity.parent().hide();
$selectArea.parent().hide();
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
form.render('select');
}
});
form.on('select(city)', function(data){
var value = data.value;
var d = value.split('');
var code = d[0];
var count = d[1];
var index = d[2];
var areaIndex=d[3];
if(count > 0) {
loadArea(areaData[index].mallCityList[index].mallAreaList);
$selectArea.parent().show();
} else {
$selectArea.parent().hide();
}
});
form.on('select(area)', function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append('<option value="'+ areaData[i].provinceCode + '' + areaData[i].mallCityList.length + '' + i + '">'+areaData[i].provinceName+'</option>')
}
form.render('select');
}
function loadCity(citys,areaIndex){
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append('<option data-new ="1" value="'+ citys[i].cityCode + '' + citys[i].mallAreaList.length + '' + i + '_'+areaIndex+'">'+citys[i].cityName+'</option>')
}
form.render('select');
}
function loadArea(areas){
$selectArea.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append('<option data-new ="1" value="'+ areas[i].areaCode+'">'+areas[i].areaName +'</option>')
}
form.render('select');
}
})()
</script>
</body>
</html>
相信现在大家已经知道是如何实现的了，如果还存在有疑问的程序开发者，可以留言给我们，欢迎大家留言共同讨论学习。本文由专业的郑州app开发公司燚轩科技整理发布，如需转载请注明出处。
后台开发常常用到layUI框架，这样才能让整个页面效果看起来美观大方，然而有时候一些原生的效果放到layUI框架上是无法使用的，比如最近遇到了省市县三级联动的select效果。不同于之前的，layUI框架里，需要重视select的lay-filter属性，来监听事件，另外需要form.render()来重新渲染，解决这两大难题，联动也就不再是难题。下面就来为大家分享下吧。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区级联的实现</title>
<link rel="stylesheet" href="http://www.zhengjinfan.cn/plugins/layui/css/layui.css" />
</head>
<body>
<div style="margin: 50px auto; ">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="area" lay-filter="area">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="http://www.zhengjinfan.cn/js/area.js"></script>
<script>
(function(){
var areaData=Area;
var $, $form,form;
var $selectProvince,$selectCity,$selectArea;
layui.use(['jquery', 'form'], function() {
$ = layui.jquery;
form = layui.form();
$form = $('form');
$selectProvince=$form.find('select[name=province]');
$selectCity=$form.find('select[name=city]');
$selectArea=$form.find('select[name=area]');
form.on('select(province)', function(data){
var value = data.value;
var d = value.split('');
var code = d[0];
var count = d[1];
var index = d[2];
if(count > 0) {
loadCity(areaData[index].mallCityList,index);
$selectCity.parent().show();
} else {
$selectCity.parent().hide();
$selectArea.parent().hide();
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
form.render('select');
}
});
form.on('select(city)', function(data){
var value = data.value;
var d = value.split('');
var code = d[0];
var count = d[1];
var index = d[2];
var areaIndex=d[3];
if(count > 0) {
loadArea(areaData[index].mallCityList[index].mallAreaList);
$selectArea.parent().show();
} else {
$selectArea.parent().hide();
}
});
form.on('select(area)', function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append('<option value="'+ areaData[i].provinceCode + '' + areaData[i].mallCityList.length + '' + i + '">'+areaData[i].provinceName+'</option>')
}
form.render('select');
}
function loadCity(citys,areaIndex){
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append('<option data-new ="1" value="'+ citys[i].cityCode + '' + citys[i].mallAreaList.length + '' + i + '_'+areaIndex+'">'+citys[i].cityName+'</option>')
}
form.render('select');
}
function loadArea(areas){
$selectArea.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append('<option data-new ="1" value="'+ areas[i].areaCode+'">'+areas[i].areaName +'</option>')
}
form.render('select');
}
})()
</script>
</body>
</html>
相信现在大家已经知道是如何实现的了，如果还存在有疑问的程序开发者，可以留言给我们，欢迎大家留言共同讨论学习。本文由专业的郑州app开发公司燚轩科技整理发布，如需转载请注明出处。
收起阅读 »
开发app需要多少钱？
想开发App，“要多少钱”是很多人心里最重要的问题。但App开发商不会给你直接答案，因为影响开发App价格的因素有很多。
App开发的功能类型（宣传服务类/电商类/游戏类/工具类等）、精细程度、制作方法（自建团队/外包/SaaS）等，都在影响价格，所以只有详细的需求和计划，才能得到具体的价格。下面我讲解一下不同的需求和做法，是怎么影响App价格的。
一、功能类型
在所有App中，游戏App的数量可能是最多的，但也是价格差异最大的，想想做个斗地主游戏要多少钱，做王者荣耀要多少钱？所以这里就不讨论游戏App了。在其他种类中，宣传服务类和简单工具类价格比较便宜，但是因这类App赚钱比较少，做的人不多，也搁置不谈。
我想主要讲讲电商App的价格，因为电商App是开发市场的热点。电商的客流量较多，容易赚钱，所以做App的人也比较多。
二、精细程度
以电商App开发为例，需求不一样，价格差很远。
⑴套壳还是原生代码？
套壳App就是在现有的手机网站模版上进行简单制作。价格低至几千元，而且制作速度快，但是这种并不为大多数客户所需要。套壳App存在着本身无法忽视的劣势，首先因为现在政府对App监管越来越严，套壳App很难上架，上不了应用市场的App是很难推广的。另外，套壳App的视觉效果差，反应慢、功能简单，靠它赚钱是指望不上的。原生电商App的价格，则起码是万元起跳。
⑵传统电商还是社交电商？
以天猫、淘宝等为主流的传统电商，这类App常用的功能有订单管理、客户管理、促销、客服、支付、内容等等，已经相当复杂。如果是做天猫的商铺入驻模式，会大大提高App功能的复杂性。如果用定制外包模式，价格大概是几十万起。
现在还有些品牌企业在做这类App，但这类App很难做流量，因为它和淘宝、京东等相比没有优势。
在这种情况下，社交电商利用社交渠道的裂变流量，开辟出一条新的发展途径。特别是微信电商兴起后，电商App的社交功能越来越不可或缺，包括富媒体、社交分享等等。为了打通实体业务，电商平台往往要提供物流配送、LBS等功能。功能要求越强大，价格自然越高。
⑶分销和拼团
社交电商的发展如日中天，主流的营销模式是分销和拼团。最经典的莫过于拼多多、云集微店、环球捕手等社交电商实现突围，尝到了甜头。这也刺激很多人，想要尝试拼团和分销这类玩法。但这些玩法有它们自己的门道，传统电商App是没有这些功能的。不是每个App开发商都能把这些新功能做好的，但不少人会对这些功能单独收费。这需要大家仔细鉴别评估了。
⑷想支撑多少用户级别？
“我的App能支持越多用户越好”这个想法未必正确，因为支持大用户量的系统是贵的，大家应该量力而行。不过一些技术过硬的公司通过云服务，可以用比较低的成本支持大容量的系统。
总的来说，一个App的用户数越大、交易量越大，后台需要的技术支撑就越复杂，成本也越高。如果需求简单，只需让功能通过简单测试，数据库、系统架构都可以很简单，但交易量变大后，系统可能出现闪退、卡顿的现象。而且支持海量客户和高并发数据请求，或者为未来功能扩展预留灵活性，事情就非常复杂，成本也自然随之增加。
三、开发模式
⑴企业自主研发。
如果你是个大老板，或者技术大牛，愿意花很多资源和时间来打磨一个超级App，自建团队肯定是最好选择。但是组建团队时间长、风险大，费用高昂，烧个一两百万都看不到多少东西出来，而且周期长。
⑵外包定制
很多中小老板选择外包定制，避免了自建团队的高风险和高成本。但时间和费用成本仍然很高，而且二次开发难，产品质量也难以保证。还有一个很多人忽视、又避免不了的风险，即乙方有良好的服务，但产品质量也受甲方提需求的水平限制。如果你没有信心规划好你的App，外包开发的成功风险就会很大。
⑶SaaS模块化
近几年，打破传统App开发形式，以功能组件形式搭建原生App、以SaaS云服务的形式提供后台支撑的模式逐渐兴起，但由于技术门槛高、电商客户的要求高，这个模式直到最近才接近成熟。
SaaS技术，将常用的功能模块化，并提前开发好，缩短了开发周期，降低了开发成本，可以迅速自定义模块组件。让客户省时省钱省心省力。
但是这个模式成熟的企业不多。话不多说，这里只推荐一个品牌：力谱云。这家位于上海的公司用的就是SaaS模块化技术，所以价格总归在几万块以内。力谱云不仅有完备的传统电商功能，还有先进的社交电商功能如三级分销、拼团等，同时物流配送、服务预订等功能也很完善。更关键的是他们的产品全都集成了这些功能，不另收费！在技术能力上，这个公司的老板曾经做过很多爆款App，用户应该不用担心系统容量问题。我推荐它还有一个原因，就是它的解决方案里除了App，还有用同一后台管理的微信小程序、微官网和网站，有助于社交分享和客户导流。别小看这个设计，这是个绝招，对电商App来说，获得流量始终是头等大事，有了网站、小程序这样的获客导流工具，对电商运营价值很大。
好了，今天就跟大家聊这么多。
想开发App，“要多少钱”是很多人心里最重要的问题。但App开发商不会给你直接答案，因为影响开发App价格的因素有很多。
App开发的功能类型（宣传服务类/电商类/游戏类/工具类等）、精细程度、制作方法（自建团队/外包/SaaS）等，都在影响价格，所以只有详细的需求和计划，才能得到具体的价格。下面我讲解一下不同的需求和做法，是怎么影响App价格的。
一、功能类型
在所有App中，游戏App的数量可能是最多的，但也是价格差异最大的，想想做个斗地主游戏要多少钱，做王者荣耀要多少钱？所以这里就不讨论游戏App了。在其他种类中，宣传服务类和简单工具类价格比较便宜，但是因这类App赚钱比较少，做的人不多，也搁置不谈。
我想主要讲讲电商App的价格，因为电商App是开发市场的热点。电商的客流量较多，容易赚钱，所以做App的人也比较多。
二、精细程度
以电商App开发为例，需求不一样，价格差很远。
⑴套壳还是原生代码？
套壳App就是在现有的手机网站模版上进行简单制作。价格低至几千元，而且制作速度快，但是这种并不为大多数客户所需要。套壳App存在着本身无法忽视的劣势，首先因为现在政府对App监管越来越严，套壳App很难上架，上不了应用市场的App是很难推广的。另外，套壳App的视觉效果差，反应慢、功能简单，靠它赚钱是指望不上的。原生电商App的价格，则起码是万元起跳。
⑵传统电商还是社交电商？
以天猫、淘宝等为主流的传统电商，这类App常用的功能有订单管理、客户管理、促销、客服、支付、内容等等，已经相当复杂。如果是做天猫的商铺入驻模式，会大大提高App功能的复杂性。如果用定制外包模式，价格大概是几十万起。
现在还有些品牌企业在做这类App，但这类App很难做流量，因为它和淘宝、京东等相比没有优势。
在这种情况下，社交电商利用社交渠道的裂变流量，开辟出一条新的发展途径。特别是微信电商兴起后，电商App的社交功能越来越不可或缺，包括富媒体、社交分享等等。为了打通实体业务，电商平台往往要提供物流配送、LBS等功能。功能要求越强大，价格自然越高。
⑶分销和拼团
社交电商的发展如日中天，主流的营销模式是分销和拼团。最经典的莫过于拼多多、云集微店、环球捕手等社交电商实现突围，尝到了甜头。这也刺激很多人，想要尝试拼团和分销这类玩法。但这些玩法有它们自己的门道，传统电商App是没有这些功能的。不是每个App开发商都能把这些新功能做好的，但不少人会对这些功能单独收费。这需要大家仔细鉴别评估了。
⑷想支撑多少用户级别？
“我的App能支持越多用户越好”这个想法未必正确，因为支持大用户量的系统是贵的，大家应该量力而行。不过一些技术过硬的公司通过云服务，可以用比较低的成本支持大容量的系统。
总的来说，一个App的用户数越大、交易量越大，后台需要的技术支撑就越复杂，成本也越高。如果需求简单，只需让功能通过简单测试，数据库、系统架构都可以很简单，但交易量变大后，系统可能出现闪退、卡顿的现象。而且支持海量客户和高并发数据请求，或者为未来功能扩展预留灵活性，事情就非常复杂，成本也自然随之增加。
三、开发模式
⑴企业自主研发。
如果你是个大老板，或者技术大牛，愿意花很多资源和时间来打磨一个超级App，自建团队肯定是最好选择。但是组建团队时间长、风险大，费用高昂，烧个一两百万都看不到多少东西出来，而且周期长。
⑵外包定制
很多中小老板选择外包定制，避免了自建团队的高风险和高成本。但时间和费用成本仍然很高，而且二次开发难，产品质量也难以保证。还有一个很多人忽视、又避免不了的风险，即乙方有良好的服务，但产品质量也受甲方提需求的水平限制。如果你没有信心规划好你的App，外包开发的成功风险就会很大。
⑶SaaS模块化
近几年，打破传统App开发形式，以功能组件形式搭建原生App、以SaaS云服务的形式提供后台支撑的模式逐渐兴起，但由于技术门槛高、电商客户的要求高，这个模式直到最近才接近成熟。
SaaS技术，将常用的功能模块化，并提前开发好，缩短了开发周期，降低了开发成本，可以迅速自定义模块组件。让客户省时省钱省心省力。
但是这个模式成熟的企业不多。话不多说，这里只推荐一个品牌：力谱云。这家位于上海的公司用的就是SaaS模块化技术，所以价格总归在几万块以内。力谱云不仅有完备的传统电商功能，还有先进的社交电商功能如三级分销、拼团等，同时物流配送、服务预订等功能也很完善。更关键的是他们的产品全都集成了这些功能，不另收费！在技术能力上，这个公司的老板曾经做过很多爆款App，用户应该不用担心系统容量问题。我推荐它还有一个原因，就是它的解决方案里除了App，还有用同一后台管理的微信小程序、微官网和网站，有助于社交分享和客户导流。别小看这个设计，这是个绝招，对电商App来说，获得流量始终是头等大事，有了网站、小程序这样的获客导流工具，对电商运营价值很大。
好了，今天就跟大家聊这么多。
利用mui pullrefresh_with_tab模板做动态选项卡遇到的问题
向后台获取数据以后直接加载页面选项卡是滑不动的,需要在获取数据以后加上这几行代码:
var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
mui('.mui-slider').slider(); //这一行是关键,让选项卡初始化滑动
下面的选项卡可以左右滑动了,但发现当上面的tab有超出屏幕的选项时,上面的tab不会移动,获取数据以后可以加上这几行代码:
var sss = mui('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({
scrollY: false,
scrollX: true,
indicators: false,
snap: '.mui-control-item'
});
sss.reLayout();//这一行是关键,可以让上面的选项卡随着下面滑动而滑动位置,出现在可视区域内
最后再加上上拉加载下拉刷新代码.
向后台获取数据以后直接加载页面选项卡是滑不动的,需要在获取数据以后加上这几行代码:
var deceleration = mui.os.ios ? 0.003 : 0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
mui('.mui-slider').slider(); //这一行是关键,让选项卡初始化滑动
下面的选项卡可以左右滑动了,但发现当上面的tab有超出屏幕的选项时,上面的tab不会移动,获取数据以后可以加上这几行代码:
var sss = mui('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({
scrollY: false,
scrollX: true,
indicators: false,
snap: '.mui-control-item'
});
sss.reLayout();//这一行是关键,可以让上面的选项卡随着下面滑动而滑动位置,出现在可视区域内
最后再加上上拉加载下拉刷新代码.
收起阅读 »
蓝牙 Android ios 插件
之前，因为公司项目，用到了hbuilder，然后核心部分，需要用蓝牙来进行开锁，然后进行各种百度、逛论坛，结果发现一个大大的坑，
hbuilder官方给出的各种插件里面 ，没有蓝牙，而关于蓝牙的demo例子，也仅仅是限于蓝牙的发现而已，后续更多的操作，官方没有
给出更多的例子，也许官方的重点在别的方面，所以导致项目受阻。
期间，发帖、给官方提意见、加入各种群去请教，结果收效甚微，果断还是需要自己一点点的爬坑。
在阅览看了很多文档，发现要完美的解决这个问题，只能自己写一个插件，然后利用离线打包的方式，来完成蓝牙的调用。
关于ios和 android的离线打包：http://ask.dcloud.net.cn/article/38 http://ask.dcloud.net.cn/article/41
开发的插件包括android： 4.3 以上的bluetooth支持，ios 8 以上的插件。
希望给后来的爬坑兄弟们一个方向，如果有兴趣的朋友，可以加QQ，一起讨论。
在整个爬坑的过程中，发现不少的问题 ， 有兴趣的朋友可以联系我：qq：731986459
之前，因为公司项目，用到了hbuilder，然后核心部分，需要用蓝牙来进行开锁，然后进行各种百度、逛论坛，结果发现一个大大的坑，
hbuilder官方给出的各种插件里面 ，没有蓝牙，而关于蓝牙的demo例子，也仅仅是限于蓝牙的发现而已，后续更多的操作，官方没有
给出更多的例子，也许官方的重点在别的方面，所以导致项目受阻。
期间，发帖、给官方提意见、加入各种群去请教，结果收效甚微，果断还是需要自己一点点的爬坑。
在阅览看了很多文档，发现要完美的解决这个问题，只能自己写一个插件，然后利用离线打包的方式，来完成蓝牙的调用。
关于ios和 android的离线打包：http://ask.dcloud.net.cn/article/38 http://ask.dcloud.net.cn/article/41
开发的插件包括android： 4.3 以上的bluetooth支持，ios 8 以上的插件。
希望给后来的爬坑兄弟们一个方向，如果有兴趣的朋友，可以加QQ，一起讨论。
在整个爬坑的过程中，发现不少的问题 ， 有兴趣的朋友可以联系我：qq：731986459
收起阅读 »
IMG标签的before,after伪类
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。
嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。
为什么会这样呢？
让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如：
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content
我们应该注意到所谓 document tree content，对于 img 这种自闭和标签，似乎不存在 content （内容或后代元素）在标签中，所以选择器没有生效。但这样的解释还不够清晰，实际上标准中还有一行注释：
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
嗯，这回清楚了，对于可替换元素（如 img、input、select 等），标准并没有清晰定义，这也导致了浏览器实现的差异性。
有解决办法么？搜了一下是有的（http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements）：
使用jQuery
使用 jQuery 的 before，after 方法：
javascript
$('.target').after('<img src="..." />');
实际上，jQuery 只是在目标元素前后插入 dom 而已。
伪造 content
给 img 这类标签添加 content 属性，输入一些无意义的文本，让浏览器认为标签含有 content。
如在 CSS 中添加：
css
img {
/ hide the default image /
height:0;
width:0;
/ hide fake content /
font-size:0;
color:transparent;
/ enable absolute position for pseudo elements /
position:relative;
/ and this is just fake content /
content:"I'm just fake content";
}
但这种方法存在浏览器兼容问题。
所以最后还是建议不要做这种尝试了，给父标签添加伪类吧。
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。
嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。
为什么会这样呢？
让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如：
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content
我们应该注意到所谓 document tree content，对于 img 这种自闭和标签，似乎不存在 content （内容或后代元素）在标签中，所以选择器没有生效。但这样的解释还不够清晰，实际上标准中还有一行注释：
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
嗯，这回清楚了，对于可替换元素（如 img、input、select 等），标准并没有清晰定义，这也导致了浏览器实现的差异性。
有解决办法么？搜了一下是有的（http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements）：
使用jQuery
使用 jQuery 的 before，after 方法：
javascript
$('.target').after('<img src="..." />');
实际上，jQuery 只是在目标元素前后插入 dom 而已。
伪造 content
给 img 这类标签添加 content 属性，输入一些无意义的文本，让浏览器认为标签含有 content。
如在 CSS 中添加：
css
img {
/ hide the default image /
height:0;
width:0;
/ hide fake content /
font-size:0;
color:transparent;
/ enable absolute position for pseudo elements /
position:relative;
/ and this is just fake content /
content:"I'm just fake content";
}
但这种方法存在浏览器兼容问题。
所以最后还是建议不要做这种尝试了，给父标签添加伪类吧。
收起阅读 »
坐标深圳 , 招聘2-3年 dcloud vue全家桶 开发
有意者可直接发送邮件到我的邮箱 9523@outlook.com
岗位职责：
1、利用HTML5、CSS3等相关技术开发PC、手机、平板电脑等多平台上的WEB前端应用；
2、配合产品经理和UI设计师 ，研究并改善用户体验；
3、负责公司相关产品的Web前端开发。
任职要求：
1、计算机相关专业大专以上学历，2年前端开发工作经验，能独立完成项目前端开发；
2、熟悉Vue、MUI、JQuery、等前端流行框架,；
3、熟练使用JavaScript/CSS、熟悉html5/css3等Web前端开发技术,熟练掌握ES6语法以及webpack\gulp\npm等工具链的使用；
4、熟悉JS原生实现，熟练掌握语言本质，常规函数/对象、DOM操作和事件处理机制等；
5、熟悉网站制作的流程及规范，对处理浏览器的兼容性问题具有一定经验。
6、有良好的产品意识和团队合作意识，能够和产品、UI、测试等部门协作完成产品面向用户端的呈现。
有意者可直接发送邮件到我的邮箱 9523@outlook.com
岗位职责：
1、利用HTML5、CSS3等相关技术开发PC、手机、平板电脑等多平台上的WEB前端应用；
2、配合产品经理和UI设计师 ，研究并改善用户体验；
3、负责公司相关产品的Web前端开发。
任职要求：
1、计算机相关专业大专以上学历，2年前端开发工作经验，能独立完成项目前端开发；
2、熟悉Vue、MUI、JQuery、等前端流行框架,；
3、熟练使用JavaScript/CSS、熟悉html5/css3等Web前端开发技术,熟练掌握ES6语法以及webpack\gulp\npm等工具链的使用；
4、熟悉JS原生实现，熟练掌握语言本质，常规函数/对象、DOM操作和事件处理机制等；
5、熟悉网站制作的流程及规范，对处理浏览器的兼容性问题具有一定经验。
6、有良好的产品意识和团队合作意识，能够和产品、UI、测试等部门协作完成产品面向用户端的呈现。
收起阅读 »
Tp3如何实现本地视频文件上传到七牛云
对于七牛云的使用，估计有些刚接触开发的技术人员还不太清楚，那么更不要说如何实现本地视频上传到七牛云转储了，其实这个技术并没有想象中的那么困难，下面就来跟大家详细介绍一下流程：
1、首先我们要先去寻找七牛云的SDK网址，打开后直接下载就行了;
2、下载完成之后我们把它放在tp框架的./ThinkPHP/Extend/Vendor/目录下;
3、完成之后，前期的准备工作就完成了，接下来就是自己上手写代码了：
首先肯定是先在模板部分建立一个form表单：
*视频上传：
我们就提交到News控制器里的do_add这个方法里边：
public function do_add(){
if(!empty($_FILES['video']['name'])){ //首先判断数据是否为空
import('ORG.Net.UploadFile');
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 31457281;// 设置附件上传大小
$upload->allowExts = array('mp4');// 设置附件上传类型 如果是MP3的话改为mp3 就ok
$upload->savePath = './Public/Uploads/video/';// 设置附件上传目录(先把文件上传到本地服务器上)
//$upload->saveName = I('uid').'_'.time();// 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$this->error($upload->getErrorMsg());
}else{// 上传成功 获取上传文件信息
$info = $upload->getUploadFileInfo();
}
//导入类自动加载器
require_once'./ThinkPHP/Extend/Vendor/qiniusdk/autoload.php';
//七牛的钥密
$accessKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$secretKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$bucket = 'haha'; //这个是你上传的空间
$savepath = "http://www.xxxxxxxxxx.com/";//这是你七牛的路径
$auth = new Auth($accessKey, $secretKey);
//可以对转码后的文件进行使用saveas参数自定义命名，当然也可以不指定文件会默认命名并保存在当间
$mediaid = time().uniqid();
$savekey = \Qiniu\base64_urlSafeEncode(haha:'.$mediaid.'.mp4');
$fops = $fops.'|saveas/'.$savekey;
$policy = array(
'persistentOps' => $fops,
);
$uptoken = $auth->uploadToken($bucket, null, 3600, $policy);
//上传文件的本地路径
$filePath = './Public/Uploads/video/'.$info[0]['savename'];
$key = $mediaid.'.mp4';
$uploadMgr = new UploadManager();
list($ret, $err) = $uploadMgr->putFile($uptoken, $key, $filePath);
if ($err !== null) {
$dataname["info"]="error";
} else {
$savename=$ret['key'];
$file = $savepath.$savename;
$dataname["info"]=$file;
}
}else{
$dataname["info"]="error";
}
unlink($filePath);//上传成功后删除本地服务器上的文件
$audio=D("audio");
$wh['aid']=I("aid");
$data['video_path']=$file;
$re=$audio->add($data); //路径保存到数据表
if($re){
success('添加成功',U('News/newslist'));
}else{
error("添加失败");
}
//echo json_encode($dataname); //返回数据结构自行封装
}
到这里运行之后还是出错 找不到Auth这个类，摸索了一会儿才发现少了命名空间，加到控制器顶部即可：
use Qiniu\Storage\UploadManager;
use Qiniu\Auth;
运行后正常。
至此已经上传完毕，上传完成到自己的七牛看一看就OK!需要跟大家说明的是MP3和MP4类似，只需要把代码中的MP4换为MP3即可，那么现在大家可以开始动手尝试一下了，如果还存在疑问的话，可以留言，我们收到后会第一时间回复。本文由专业的郑州app开发公司燚轩科技整理发表，如需转载请注明出处。
对于七牛云的使用，估计有些刚接触开发的技术人员还不太清楚，那么更不要说如何实现本地视频上传到七牛云转储了，其实这个技术并没有想象中的那么困难，下面就来跟大家详细介绍一下流程：
1、首先我们要先去寻找七牛云的SDK网址，打开后直接下载就行了;
2、下载完成之后我们把它放在tp框架的./ThinkPHP/Extend/Vendor/目录下;
3、完成之后，前期的准备工作就完成了，接下来就是自己上手写代码了：
首先肯定是先在模板部分建立一个form表单：
*视频上传：
我们就提交到News控制器里的do_add这个方法里边：
public function do_add(){
if(!empty($_FILES['video']['name'])){ //首先判断数据是否为空
import('ORG.Net.UploadFile');
$upload = new UploadFile();// 实例化上传类
$upload->maxSize = 31457281;// 设置附件上传大小
$upload->allowExts = array('mp4');// 设置附件上传类型 如果是MP3的话改为mp3 就ok
$upload->savePath = './Public/Uploads/video/';// 设置附件上传目录(先把文件上传到本地服务器上)
//$upload->saveName = I('uid').'_'.time();// 设置附件上传目录
if(!$upload->upload()) {// 上传错误提示错误信息
$this->error($upload->getErrorMsg());
}else{// 上传成功 获取上传文件信息
$info = $upload->getUploadFileInfo();
}
//导入类自动加载器
require_once'./ThinkPHP/Extend/Vendor/qiniusdk/autoload.php';
//七牛的钥密
$accessKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$secretKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$bucket = 'haha'; //这个是你上传的空间
$savepath = "http://www.xxxxxxxxxx.com/";//这是你七牛的路径
$auth = new Auth($accessKey, $secretKey);
//可以对转码后的文件进行使用saveas参数自定义命名，当然也可以不指定文件会默认命名并保存在当间
$mediaid = time().uniqid();
$savekey = \Qiniu\base64_urlSafeEncode(haha:'.$mediaid.'.mp4');
$fops = $fops.'|saveas/'.$savekey;
$policy = array(
'persistentOps' => $fops,
);
$uptoken = $auth->uploadToken($bucket, null, 3600, $policy);
//上传文件的本地路径
$filePath = './Public/Uploads/video/'.$info[0]['savename'];
$key = $mediaid.'.mp4';
$uploadMgr = new UploadManager();
list($ret, $err) = $uploadMgr->putFile($uptoken, $key, $filePath);
if ($err !== null) {
$dataname["info"]="error";
} else {
$savename=$ret['key'];
$file = $savepath.$savename;
$dataname["info"]=$file;
}
}else{
$dataname["info"]="error";
}
unlink($filePath);//上传成功后删除本地服务器上的文件
$audio=D("audio");
$wh['aid']=I("aid");
$data['video_path']=$file;
$re=$audio->add($data); //路径保存到数据表
if($re){
success('添加成功',U('News/newslist'));
}else{
error("添加失败");
}
//echo json_encode($dataname); //返回数据结构自行封装
}
到这里运行之后还是出错 找不到Auth这个类，摸索了一会儿才发现少了命名空间，加到控制器顶部即可：
use Qiniu\Storage\UploadManager;
use Qiniu\Auth;
运行后正常。
至此已经上传完毕，上传完成到自己的七牛看一看就OK!需要跟大家说明的是MP3和MP4类似，只需要把代码中的MP4换为MP3即可，那么现在大家可以开始动手尝试一下了，如果还存在疑问的话，可以留言，我们收到后会第一时间回复。本文由专业的郑州app开发公司燚轩科技整理发表，如需转载请注明出处。
收起阅读 »
PHP如何有效实现多视频同时上传功能
视频的出现让网站更加有生有色，对于php上传视频而言，我需要实现多视频上传，视频播放功能，静音功能，全屏播放，下载视频功能等一体的需求，接下来就为大家详细讲解一下如何实现多视频同时上传这样一个功能。具体代码如下：
<form method="POST" name="myform" action="{:U('doeditvideo')}" enctype="multipart/form-data">
<!-- <input type="hidden" value="{$info.id}" name="id" /> -->
<table class="layui-table" lay-skin="nob" style="width: 1000px;">
<tr>
<td class="layui-input"><span class="bi_tian"></span>视频:</td>
<td class="input">
<foreach name="imgarr1" item="vv">
<video class="min_img" controls src="/Public/Uploads/video/{$vv}"
style="width:150px;height:150px;" alt=""></video>
</foreach>
<img src="">
</td>
</tr>
<tr>
<td class="layui-input"><span class="bi_tian"></span>上传视频:</td>
<td class="input">
<input type="file" name="video[]" multiple>
</td>
</tr>
<tr>
<td class="layui-input"></td>
<td class="submit">
<input type="submit" value="保存" class="layui-btn"/>
</td>
</tr>
</table>
</form>
PHP实现代码:
public function doeditvideo(){
header("Content-type:text/html;charset=utf-8");
$id=I("id");
$data['addtime']=time();
if($_FILES["video"]["name"]!=''){
$arr1=$this->upload1();
$imgstr1="";
foreach($arr1 as $vv){
$imgstr1.=$vv['savename'].',';
}
$imgstr1=trim($imgstr1,',');
$data['video']=$imgstr1;
}else{
$data['video']=0;
}
$model=M('dynamic');
if($model->where("id=$id")->save($data)){
$this->success("成功",U("Dynamic/index"));
}else{
$this->error("发布失败");
}
}
public function upload1(){
import('ORG.Net.UploadFile');
$upload= new UploadFile(); // 实例化上传类
$upload->maxSize = 9999999 ; // 设置附件上传大小
$upload->allowExts = array("vob","ifo","mpg","mpeg","dat","mp4","3gp","mov","rm","ram","rmvb","wmv","asf","avi","asx");
$upload->savePath = './Public/Uploads/video/'; // 设置附件上传目录
$info= $upload->upload();
$arr = $upload->getUploadFileInfo();
return $arr;
}
相信看到这里各位程序开发者应该已经清楚是如何实现了吧，那么大家现在就可以开始尝试一下了，如果还是存在有其他方面疑问的话，可以留言讨论，我们收到留言后会第一时间给出详细的答复。本文由专业的郑州app开发公司燚轩科技整理发布，如需转载请注明出处。
视频的出现让网站更加有生有色，对于php上传视频而言，我需要实现多视频上传，视频播放功能，静音功能，全屏播放，下载视频功能等一体的需求，接下来就为大家详细讲解一下如何实现多视频同时上传这样一个功能。具体代码如下：
<form method="POST" name="myform" action="{:U('doeditvideo')}" enctype="multipart/form-data">
<!-- <input type="hidden" value="{$info.id}" name="id" /> -->
<table class="layui-table" lay-skin="nob" style="width: 1000px;">
<tr>
<td class="layui-input"><span class="bi_tian"></span>视频:</td>
<td class="input">
<foreach name="imgarr1" item="vv">
<video class="min_img" controls src="/Public/Uploads/video/{$vv}"
style="width:150px;height:150px;" alt=""></video>
</foreach>
<img src="">
</td>
</tr>
<tr>
<td class="layui-input"><span class="bi_tian"></span>上传视频:</td>
<td class="input">
<input type="file" name="video[]" multiple>
</td>
</tr>
<tr>
<td class="layui-input"></td>
<td class="submit">
<input type="submit" value="保存" class="layui-btn"/>
</td>
</tr>
</table>
</form>
PHP实现代码:
public function doeditvideo(){
header("Content-type:text/html;charset=utf-8");
$id=I("id");
$data['addtime']=time();
if($_FILES["video"]["name"]!=''){
$arr1=$this->upload1();
$imgstr1="";
foreach($arr1 as $vv){
$imgstr1.=$vv['savename'].',';
}
$imgstr1=trim($imgstr1,',');
$data['video']=$imgstr1;
}else{
$data['video']=0;
}
$model=M('dynamic');
if($model->where("id=$id")->save($data)){
$this->success("成功",U("Dynamic/index"));
}else{
$this->error("发布失败");
}
}
public function upload1(){
import('ORG.Net.UploadFile');
$upload= new UploadFile(); // 实例化上传类
$upload->maxSize = 9999999 ; // 设置附件上传大小
$upload->allowExts = array("vob","ifo","mpg","mpeg","dat","mp4","3gp","mov","rm","ram","rmvb","wmv","asf","avi","asx");
$upload->savePath = './Public/Uploads/video/'; // 设置附件上传目录
$info= $upload->upload();
$arr = $upload->getUploadFileInfo();
return $arr;
}
相信看到这里各位程序开发者应该已经清楚是如何实现了吧，那么大家现在就可以开始尝试一下了，如果还是存在有其他方面疑问的话，可以留言讨论，我们收到留言后会第一时间给出详细的答复。本文由专业的郑州app开发公司燚轩科技整理发布，如需转载请注明出处。
收起阅读 »
离线打包个推的坑
按照官方的文档配置了好几次都取不到cid
官方文档中少了一个环节导入so库
可能对于安卓比较好的朋友解决这个问题没有什么
但是对于初学者的我可闷逼了；
在build.gradle中defaultConfig节点下加入
ndk {
//选择要添加的对应cpu类型的.so库。
abiFilters 'armeabi', 'armeabi-v7a','x86'
// 还可以添加 'x86', 'x86_64', 'mips', 'mips64'
}
希望能帮助到大家
按照官方的文档配置了好几次都取不到cid
官方文档中少了一个环节导入so库
可能对于安卓比较好的朋友解决这个问题没有什么
但是对于初学者的我可闷逼了；
在build.gradle中defaultConfig节点下加入
ndk {
//选择要添加的对应cpu类型的.so库。
abiFilters 'armeabi', 'armeabi-v7a','x86'
// 还可以添加 'x86', 'x86_64', 'mips', 'mips64'
}
希望能帮助到大家
