之前，因为公司项目，用到了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

在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";
}

但这种方法存在浏览器兼容问题。

所以最后还是建议不要做这种尝试了，给父标签添加伪类吧。

有意者可直接发送邮件到我的邮箱 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、测试等部门协作完成产品面向用户端的呈现。

　　对于七牛云的使用，估计有些刚接触开发的技术人员还不太清楚，那么更不要说如何实现本地视频上传到七牛云转储了，其实这个技术并没有想象中的那么困难，下面就来跟大家详细介绍一下流程：

　　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上传视频而言，我需要实现多视频上传，视频播放功能，静音功能，全屏播放，下载视频功能等一体的需求，接下来就为大家详细讲解一下如何实现多视频同时上传这样一个功能。具体代码如下：

　　<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>&nbsp;&nbsp;
</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'
}
希望能帮助到大家

dcloud的产品是很好的，可是众多的命名不给力。比如HTML5+就有很大的问题，首先字符串“HTML5+”在所有搜索中歧义太多，难以得到比较接近的结果，其次HTML5+定义让人不知什么意思，我看了半天文档才明白这是移动上对HTML5的扩展，并不是在WEB上。与其说这是HTML的架构不如说是移动端的架构。
还有MUI，github里居然有个muicss，非常容易搞错。
HBuilder，dcloud也是很难搜索的，因为名字太普通。
其它主流的架构Cordova虽然名字也不好听但是搜索资料很方便。dcloud要成功需要大量的程序员参与交流经验，象许多stackoverflow，googlegroup必须有人建群。dcloud的各个名字太难搜索了。

　　步骤如下

　　1. 将PHPPowerpoint下的Classes文件夹引入到Vendor下。

　　2. 然后就可以使用了，注意要调整include_path，否则会导致引用失败。

　　3. 代码中分享了新建ppt空白页，填充图片，填充文字，设置文字样式等方法

　　4. 最后，既然要导出ppt，那么需要下载方法。普通下载方法会出错，参考大神的下载方法完美解决问题，这里一并贴出。

　　5. 注意：生成ppt的路径必须存在。否则会生成失败linux下注意写入权限。

　　代码如下：

　　function get_ppt_handle(){

　　//设置include_path

　　define('DS', DIRECTORY_SEPARATOR);

　　define('ROOT', VENDOR_PATH );

　　set_include_path(get_include_path() . PATH_SEPARATOR . ROOT . 'Classes');

　　//引入类库

　　require_once VENDOR_PATH.'Classes/PHPPowerPoint.php';

　　//实例化ppt类

　　$yxppt = new PHPPowerPoint();

　　/新幻灯片/

　　//移除第一张空白页(实例化后自动生成的)

　　$yxppt->removeSlideByIndex(0);

　　//生成第一张幻灯片，方法在下方定义

　　$firstSlide = $this->createFirstSlide($yxppt);

　　$list = $this->get_all_ppts();

　　//循环生成中间的幻灯片

　　foreach($list as $v){

　　//图片：产品图片

　　$img= $_SERVER['DOCUMENT_ROOT'] .$v['info']['img'];

　　$currentSlide = $this->createTemplatedSlide($yxppt,$img); // local function

　　//标题：产品名称

　　$shape_Title = $currentSlide->createRichTextShape();

　　$shape_Title->setWidth(1000);

　　$shape_Title->setHeight(40);

　　$shape_Title->setOffsetX(70);

　　$shape_Title->setOffsetY(150);

　　$shape_Title->getAlignment()->setHorizontal( PHPPowerPoint_Style_Alignment::HORIZONTAL_LEFT );

　　$shape_Title->getAlignment()->setVertical( PHPPowerPoint_Style_Alignment::VERTICAL_CENTER );

　　$strtext = $v['info']['name'];

　　$textRun = $shape_Title->createTextRun($strtext);

　　$textRun->getFont()->setSize(20);

　　$textRun->getFont()->setColor( new PHPPowerPoint_Style_Color( '333333' ) );

　　}

　　//生成最后一张幻灯片

　　$lastSlide = $this->createLastSlide($yxppt);

　　//保存PPTX 文件, 使用 2007 格式

　　include_once 'PHPPowerPoint/IOFactory.php';

　　$objWriter = PHPPowerPoint_IOFactory::createWriter($yxppt, 'PowerPoint2007');

　　//保存文件

　　$map['id'] = $_SESSION['uid'];

　　$userinfo = M('users')->where($map)->find();

　　$objWriter->save( . 'userppt/'.$userinfo['username'].'_PPT.pptx');

　　$this->download( . 'userppt/'.$userinfo['username'].'_PPT.pptx');

　　}

　　function createTemplatedSlide(PHPPowerPoint $objPHPPowerPoint, $img='')

　　{

　　// Create slide

　　$slide = $objPHPPowerPoint->createSlide();

　　$shape = $slide->createDrawingShape();

　　$shape->setName('Background');

　　$shape->setDescription('Background');

　　$shape->setPath($img);

　　$shape->setWidth(500);

　　$shape->setHeight(400);

　　$shape->setOffsetX(70);

　　$shape->setOffsetY(200);

　　// Add logo

　　$shape = $slide->createDrawingShape();

　　$shape->setName('PHPPowerPoint logo');

　　$shape->setDescription('PHPPowerPoint logo');

　　$shape->setPath(.'Public/Home/images/3.png');

　　$shape->setWidth(950);

　　$shape->setHeight(40);

　　$shape->setOffsetY(50);

　　return $slide;

　　}

　　function createFirstSlide(PHPPowerPoint $objPHPPowerPoint){

　　$slide = $objPHPPowerPoint->createSlide();

　　$shape = $slide->createDrawingShape();

　　$shape->setName('Background');

　　$shape->setDescription('Background');

　　$shape->setPath(.'Public/Home/images/1.png');

　　$shape->setWidth(950);

　　$shape->setHeight(720);

　　$shape->setOffsetX(0);

　　$shape->setOffsetY(0);

　　}

　　function createLastSlide(PHPPowerPoint $objPHPPowerPoint){

　　$slide = $objPHPPowerPoint->createSlide();

　　$shape = $slide->createDrawingShape();

　　$shape->setName('Background');

　　$shape->setDescription('Background');

　　$shape->setPath(.'Public/Home/images/2.png');

　　$shape->setWidth(950);

　　$shape->setHeight(720);

　　$shape->setOffsetX(0);

　　$shape->setOffsetY(0);

　　}

　　function fileReader($file_url){

　　// 这个函数其实就是借用了php的file相关函数，从fopen,fread,fclose，所以跟thinkphp没有多大关系

　　$file=fopen($file_url,'r');

　　// 获取文件路径中最后的文件名部分

　　$file_name=basename($file_url);

　　header("Content-type: application/octet-stream");

　　header("Accept-Ranges: bytes");

　　header("Accept-Length: ".filesize($file_url));

　　header("Content-Disposition: attachment; filename=".$file_name);

　　// 这里一定要使用echo 进行输出，否则下载的文家是空白的

　　echo fread($file,filesize($file_url));

　　// 断开链接

　　fclose($file_url);

　　}

　　function download($file_url,$new_name=''){

　　$file_url=iconv('utf-8','gb2312',$file_url);

　　//将编码转为支持中英文的gb2312编码

　　if(!isset($file_url)||trim($file_url)==''){

　　return '500';

　　}

　　if(!file_exists($file_url)){ //检查文件是否存在

　　return '404';

　　}

　　$file_name=basename($file_url);

　　$file_type=explode('.',$file_url);

　　$file_type=$file_type[count($file_type)-1];

　　$file_name=trim($new_name=='')?$file_name:urlencode($new_name).'.'.$file_type;

　　//输入文件标签

　　header("Content-type: application/octet-stream");

　　header("Accept-Ranges: bytes");

　　header("Accept-Length: ".filesize($file_url));

　　header("Content-Disposition: attachment; filename=".$file_name);

　　$file_type=fopen($file_url,'r'); //打开文件

　　//输出文件内容

　　$file_size=filesize($file_url);//获取文件大小

　　$buffer=1024; //定义1KB的缓存空间

　　$file_count=0; //计数器,计算发送了多少数据

　　while(!feof($file_type) && ($file_size>$file_count)){

　　//如果文件还没读到结尾，且还有数据没有发送

　　$senddata=fread($file_type,$buffer);

　　//读取文件内容到缓存区

　　$file_count+=$senddata;

　　echo $senddata;

　　}

　　//echo fread($file_type,filesize($file_url));

　　fclose($file_type);

　　}

　　到这里就算是结束了，现在大家也可以动手尝试一下，如果对于文中还存在有不理解或者需要指正的地方，可以留言，同时也欢迎各路大神批评指正。

　　本文由郑州app开发公司燚轩科技整理发布，如需转载请注明出处。

官方文档都v不更新，在使用下拉刷新模块都时候，按照api给的例子：
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
一直都不能调用刷新，也是不报错。一直到我看了mui源码，发现有段代码
var PullRefresh = {
init: function(element, options) {
this._super(element, $.extend(true, {
scrollY: true,
scrollX: false,
indicators: true,
deceleration: 0.003,
down: {
height: 50,
contentinit: '下拉可以刷新',
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...'
},
up: {
height: 50,
auto: false,
contentinit: '上拉显示更多',
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了',
duration: 300
}
}, options));
}
其中到height属性，是数字而不是字符串，将height：“50px”改成height：50就好了。
还有下拉刷新结束到方法：
function pullfresh-function() {
//业务逻辑代码，比如通过ajax从服务器获取新数据；
......
//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
//没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
mui('#refreshContainer').pullRefresh().endPulldown();
}
一直报endPulldown()未定义。原来这个方法名字改了：
endPulldownToRefresh: function() {
var self = this;
if (self.topPocket && self.loading && this.pulldown) {
self.scrollTo(0, 0, self.options.bounceTime, self.options.bounceEasing);
self.loading = false;
self._setCaption(self.options.down.contentdown, true);
setTimeout(function() {
self.loading || self.topPocket.classList.remove(CLASS_VISIBILITY);
}, 350);
}
}
改成了endPulldownToRefresh()。
官网上到API也不更新下，坑了我好久，一直在找自己到底哪里写错了。

主要是你们这个上面插件太少了。开放开发者合作 让有能力的开发者自己开发的插件可以在官方出售 官方可以分成的方式进行合作。只有这样平台才能吸引更多的开发者入住。纯属个人建议。

哈哈哈 这个问题 我一直怀疑是mui的ajax问题 后面发现 是接口地址之前写的http 后来加了https证书 导致这边无法通过http接口地址传递参数过去，参数问题是搞明白了 至于http为什么不能传递参数没搞懂 懒得搞了。。。估计服务器这边也有些问题

基于vue + router + Vuex + hbuilder写的webapp快速构建工具，可以单独运行在web端。主要实现了页面切换管理。
编译出来的代码直接放在hbuilder项目运行

已开源github，有兴趣的朋友了解一下
vue-hamal

在线例子
请尝试从左边拖动页面返回
https://liangfuzhi.github.io/vue-hamal/dist/index.html