文章 - DCloud问答

jsonp

全称 JSON with Padding，用于解决AJAX跨域问题的一种方案
JSON with Padding,这里的 Padding 指的就是包裹在 JSON 外层的回调函数，这么一来，是不是印象就非常深刻了呢。
1.jQuery的方案

$.ajax({  
  url: "http://xxxxxx",  
  dataType: 'jsonp',  
  jsonp: "callback",  
  jsonpCallback: "dosomething"  
})  
.done(function(res) {  
  console.log("success");  
  console.log(res);  
})  
.fail(function(res) {  
  console.log("error");  
  console.log(res);  
});

后端关键代码（以PHP为例）

$result   = "{'data':'JSONP Works'}"; // 这里省略了数据库查询等操作，直接给出返回值  
$callback = $_GET['callback'];        // 最好加上判空和默认值，以防拿不到参数  
echo $callback."(".$result.")";  

// 返回的结果  
// dosomething({"data":"JSONP Works"});

实际发送出来的完整请求长这样：http://xxxxxxxx?callback=dosomething&_=14714194443853。，后面的随机字符串是jQuery加上的。
区别于常规的 AJAX 请求，这里真正需要关心的参数有以下 3 个：

1.dataType: 'jsonp'，用于表示这是一个 JSONP 请求。
2.jsonp: 'callback'，用于告知服务器根据这个参数获取回调函数的名称，通常约定就叫 callback。
3.jsonpCallback: 'dosomething'，回调函数的名称，也是前面callback参数的值。
其中jsonpCallback参数是可以省略的，jQuery 会自动生成一个随机字符串作为函数名，推荐这么做，以减少不必要的命名工作，同时排除潜在的安全隐患。这里由于Github Page没有后台服务，我们只能指定一个名字。注意：省略jsonpCallback的同时，jsonp参数必须指明，不能为false。

$.ajax({  
  url: "http://xxxxxx",  
  dataType: 'jsonp',  
  jsonp: "callback"  
})  

// 这样会发出如下结构的请求  
// http://xxxxxx?callback=jQuery31008590081461589807_1471506026601&_=1471506026602  
// 可以看到 jQuery 自动创建了一个随机字符串作为 callback 参数的值

jQuery 还支持将jsonp设置为false以避免callback参数出现在请求 URL 中，但这需要前后端配合，前端必须要指定jsonpCallback的值为一个函数名，后端由于无法从请求中获取回调函数的名称，因此也必须固定使用同名的字符串进行拼接。

$.ajax({  
  url: "http://tonghuashuo.github.io/test/jsonp.txt",  
  dataType: 'jsonp',  
  jsonp: false,  
  jsonpCallback: "myCallback"  
})  

// 这样会发出如下结构的请求  
// http://tonghuashuo.github.io/test/jsonp.txt?_=1471506026602  
// 可以看到 callback 参数被隐藏了，单从 URL 上看不容易看出这是一个 JSONP 请求  
// 后端也无法从请求中获取回调函数名，因此必须事先约定好回调函数名，例如大家都使用 myCallback

后台接收到该请求后会做两件事，一是照常去获取请求的资源，构造 JSON 形式的返回内容，二是根据请求 url 中的 callback 参数（由 $.ajax() 中的 jsonp 参数指定）的值，以字符串拼接的方式，构造出一个“JavaScript函数调用”的字符串，将准备返回的JSON作为实参放入括号中，由于最终返回的是纯字符串，因此和后端所用技术无关。

重要：响应内容传回前台后，jQuery会自动接管，将其中JSON的部分剥离出来传给success()和error()，在这两个函数中可以直接读取JSON的内容，换句话说，无需实现doSomething()也可以拿到数据，当然如果你还是实现了doSomething()，它会在success()之前被调用。

参考:https://tonghuashuo.github.io/blog/jsonp.html
https://segmentfault.com/q/1010000000424040

1.url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的
2.默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery180099599698651582_1393992892572 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。
3.如果响应内容中是写死了 callback 名的话，那么可以对 jQuery 的 jsonp 指定 callback 名，如：

jQuery.ajax({  
    url: 'http://api.XXX.com/603/arealist_jsonp.txt',  
    dataType: 'jsonp',  
    jsonpCallback: 'CallBack',  
    success: function(data) {  
        // do what you want  
    }  
})

JSONP 的优缺点
JSONP 最大的优点就是兼容性非常好，其原理决定了即便在非常古老的浏览器上也能够很好的被实现。
JSONP 的主要缺点有两个，一是只能 GET 不能 POST，因为是通过<script>引用的资源，参数全都显式的放在URL里，和 AJAX 没有半毛钱关系。二是存在安全隐患，动态插入<script>标签其实就是一种脚本注入，XSS听过没？需要多留个心眼。

纯 JavaScript 实现 JSONP
利用 jQuery 我们虽然完成了 JSONP 跨域请求，但 JSONP 本质并不是 AJAX，jQuery 将其包含在 $.ajax() 误导了不少人。为了更好的理解 JSONP，我们来用纯 JavaScript 实现一遍。

 // 实现回调函数，这里没有了 jQuery 的封装，必须手动指定并实现  
  var dosomething = function(data){  
      console.log(data);  
  };  
 // 提供 JSONP 服务的 URL 地址，查询字符串中加入 callback 指定回调函数  
  var url = "tonghuashuo.github.io/test/jsonp.txt?callback=docomething";  
// 创建 <script> 标签，设置其 src 属性  
  var script = document.createElement('script');  
  script.setAttribute('src', url);  
// 把 <script> 标签加入 <body> 尾部，此时调用开始。  
  document.getElementsByTagName('body')[0].appendChild(script);  
// 因为目标 URL 是一个后台脚本，访问后会被执行，返回的 JSON 被包裹在回调函数中以字符串的形式被返回。  
  // 返回的字符串放入 <script> 中就成为了一个普通的函数调用，执行回调函数，返回的 JSON 数据作为实参被传给了回调函数。

AJAX 无法跨域是受到“同源政策”的限制，但是带有src属性的标签（例如<script>、<img>、<iframe>）是不受该政策限制的，因此我们可以通过向页面中动态添加<script>标签来完成对跨域资源的访问，这也是 JSONP 方案最核心的原理。
通常我们使用<script>都是引用的静态资源（主要是 js 文件），其实它也可以用来引用动态资源（php、jsp、aspx等），后台服务被访问后返回一个“JavaScript函数调用”形式的字符串，由于是字符串，因此在后台的时候不会起到任何作用，但到了前台，放入<script>标签之内，就成了一个合法的 JavaScript 函数调用，实参是我们真正需要的数据，被调用的回调函数也已经实现了，因此就会顺利的被调用。
再次强调：JSONP 不是 AJAX，了解了它的原理之后你应该已经明白这是为什么了（事实上 JSONP 的出现让 “AJAX跨域请求”变成了伪命题，跨域的过程根本就没 AJAX 什么事）。要怪就怪 jQuery，给不明真相的吃瓜群众带来了误解。当然 jQuery 这么做也不无道理，毕竟跨域的问题是在 AJAX 中遇到的，受惯性思维影响我们自然首先会从 AJAX 的角度去寻求解决方案，因此 jQuery 才把 JSONP 封装到了$.ajax()的配置项中，至于具体的实现自然还是上面提到的方法。

解决了之前的几个误区：
1.不需要用 type: 'GET',这个参数了

jsonp: "callback",参数不能省去，jsonpCallback: "dosomething"参数可以省去
jsonp本质上不是ajax请求
在jq中jsonp请求的响应内容传回前台后，jQuery会自动接管，将其中JSON的部分剥离出来传给success()和error()

还有这种返回类型... dataType: 'html',

继续阅读 »

全称 JSON with Padding，用于解决AJAX跨域问题的一种方案
JSON with Padding,这里的 Padding 指的就是包裹在 JSON 外层的回调函数，这么一来，是不是印象就非常深刻了呢。
1.jQuery的方案

$.ajax({  
  url: "http://xxxxxx",  
  dataType: 'jsonp',  
  jsonp: "callback",  
  jsonpCallback: "dosomething"  
})  
.done(function(res) {  
  console.log("success");  
  console.log(res);  
})  
.fail(function(res) {  
  console.log("error");  
  console.log(res);  
});

后端关键代码（以PHP为例）

$result   = "{'data':'JSONP Works'}"; // 这里省略了数据库查询等操作，直接给出返回值  
$callback = $_GET['callback'];        // 最好加上判空和默认值，以防拿不到参数  
echo $callback."(".$result.")";  

// 返回的结果  
// dosomething({"data":"JSONP Works"});

实际发送出来的完整请求长这样：http://xxxxxxxx?callback=dosomething&_=14714194443853。，后面的随机字符串是jQuery加上的。
区别于常规的 AJAX 请求，这里真正需要关心的参数有以下 3 个：

1.dataType: 'jsonp'，用于表示这是一个 JSONP 请求。
2.jsonp: 'callback'，用于告知服务器根据这个参数获取回调函数的名称，通常约定就叫 callback。
3.jsonpCallback: 'dosomething'，回调函数的名称，也是前面callback参数的值。
其中jsonpCallback参数是可以省略的，jQuery 会自动生成一个随机字符串作为函数名，推荐这么做，以减少不必要的命名工作，同时排除潜在的安全隐患。这里由于Github Page没有后台服务，我们只能指定一个名字。注意：省略jsonpCallback的同时，jsonp参数必须指明，不能为false。

$.ajax({  
  url: "http://xxxxxx",  
  dataType: 'jsonp',  
  jsonp: "callback"  
})  

// 这样会发出如下结构的请求  
// http://xxxxxx?callback=jQuery31008590081461589807_1471506026601&_=1471506026602  
// 可以看到 jQuery 自动创建了一个随机字符串作为 callback 参数的值

jQuery 还支持将jsonp设置为false以避免callback参数出现在请求 URL 中，但这需要前后端配合，前端必须要指定jsonpCallback的值为一个函数名，后端由于无法从请求中获取回调函数的名称，因此也必须固定使用同名的字符串进行拼接。

$.ajax({  
  url: "http://tonghuashuo.github.io/test/jsonp.txt",  
  dataType: 'jsonp',  
  jsonp: false,  
  jsonpCallback: "myCallback"  
})  

// 这样会发出如下结构的请求  
// http://tonghuashuo.github.io/test/jsonp.txt?_=1471506026602  
// 可以看到 callback 参数被隐藏了，单从 URL 上看不容易看出这是一个 JSONP 请求  
// 后端也无法从请求中获取回调函数名，因此必须事先约定好回调函数名，例如大家都使用 myCallback

后台接收到该请求后会做两件事，一是照常去获取请求的资源，构造 JSON 形式的返回内容，二是根据请求 url 中的 callback 参数（由 $.ajax() 中的 jsonp 参数指定）的值，以字符串拼接的方式，构造出一个“JavaScript函数调用”的字符串，将准备返回的JSON作为实参放入括号中，由于最终返回的是纯字符串，因此和后端所用技术无关。

重要：响应内容传回前台后，jQuery会自动接管，将其中JSON的部分剥离出来传给success()和error()，在这两个函数中可以直接读取JSON的内容，换句话说，无需实现doSomething()也可以拿到数据，当然如果你还是实现了doSomething()，它会在success()之前被调用。

参考:https://tonghuashuo.github.io/blog/jsonp.html
https://segmentfault.com/q/1010000000424040

1.url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的
2.默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery180099599698651582_1393992892572 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。
3.如果响应内容中是写死了 callback 名的话，那么可以对 jQuery 的 jsonp 指定 callback 名，如：

jQuery.ajax({  
    url: 'http://api.XXX.com/603/arealist_jsonp.txt',  
    dataType: 'jsonp',  
    jsonpCallback: 'CallBack',  
    success: function(data) {  
        // do what you want  
    }  
})

JSONP 的优缺点
JSONP 最大的优点就是兼容性非常好，其原理决定了即便在非常古老的浏览器上也能够很好的被实现。
JSONP 的主要缺点有两个，一是只能 GET 不能 POST，因为是通过<script>引用的资源，参数全都显式的放在URL里，和 AJAX 没有半毛钱关系。二是存在安全隐患，动态插入<script>标签其实就是一种脚本注入，XSS听过没？需要多留个心眼。

纯 JavaScript 实现 JSONP
利用 jQuery 我们虽然完成了 JSONP 跨域请求，但 JSONP 本质并不是 AJAX，jQuery 将其包含在 $.ajax() 误导了不少人。为了更好的理解 JSONP，我们来用纯 JavaScript 实现一遍。

 // 实现回调函数，这里没有了 jQuery 的封装，必须手动指定并实现  
  var dosomething = function(data){  
      console.log(data);  
  };  
 // 提供 JSONP 服务的 URL 地址，查询字符串中加入 callback 指定回调函数  
  var url = "tonghuashuo.github.io/test/jsonp.txt?callback=docomething";  
// 创建 <script> 标签，设置其 src 属性  
  var script = document.createElement('script');  
  script.setAttribute('src', url);  
// 把 <script> 标签加入 <body> 尾部，此时调用开始。  
  document.getElementsByTagName('body')[0].appendChild(script);  
// 因为目标 URL 是一个后台脚本，访问后会被执行，返回的 JSON 被包裹在回调函数中以字符串的形式被返回。  
  // 返回的字符串放入 <script> 中就成为了一个普通的函数调用，执行回调函数，返回的 JSON 数据作为实参被传给了回调函数。

AJAX 无法跨域是受到“同源政策”的限制，但是带有src属性的标签（例如<script>、<img>、<iframe>）是不受该政策限制的，因此我们可以通过向页面中动态添加<script>标签来完成对跨域资源的访问，这也是 JSONP 方案最核心的原理。
通常我们使用<script>都是引用的静态资源（主要是 js 文件），其实它也可以用来引用动态资源（php、jsp、aspx等），后台服务被访问后返回一个“JavaScript函数调用”形式的字符串，由于是字符串，因此在后台的时候不会起到任何作用，但到了前台，放入<script>标签之内，就成了一个合法的 JavaScript 函数调用，实参是我们真正需要的数据，被调用的回调函数也已经实现了，因此就会顺利的被调用。
再次强调：JSONP 不是 AJAX，了解了它的原理之后你应该已经明白这是为什么了（事实上 JSONP 的出现让 “AJAX跨域请求”变成了伪命题，跨域的过程根本就没 AJAX 什么事）。要怪就怪 jQuery，给不明真相的吃瓜群众带来了误解。当然 jQuery 这么做也不无道理，毕竟跨域的问题是在 AJAX 中遇到的，受惯性思维影响我们自然首先会从 AJAX 的角度去寻求解决方案，因此 jQuery 才把 JSONP 封装到了$.ajax()的配置项中，至于具体的实现自然还是上面提到的方法。

解决了之前的几个误区：
1.不需要用 type: 'GET',这个参数了

jsonp: "callback",参数不能省去，jsonpCallback: "dosomething"参数可以省去
jsonp本质上不是ajax请求
在jq中jsonp请求的响应内容传回前台后，jQuery会自动接管，将其中JSON的部分剥离出来传给success()和error()

还有这种返回类型... dataType: 'html',

收起阅读 »

支付宝及微信支付填坑记

H5支付支付宝微信支付

亲测，官网上下载的都是坑，付费的请联系我QQ／微信：826096331
1.商户平台已经开通微信支付功能。

使用自有证书打包，且生成签名与微信开放平台登记应用中的包名和签名一致。
调用微信统一下单接口返回参数正常，prepayid正常返回（其中sign签名我自己用官方的签名生成工具调试过，生成后是一样的）
manifest.json中配置了微信分享，微信支付，其中微信分享正常
测试支付的时候一直都是打包测试
真机运行，打包后安装的，还有微信客户端全部重装过并且清理过缓存
mui版本3.3.0（不知道是不是版本的问题）

以上的方法我全部试过了，但是一次都没有吊起过支付，全部返回-1，不知道该怎么进行下去了。。。。

最后终于搞定了
微信请参考下这里：http://www.erdangjiade.com/php/2750.html
支付宝请参考下这里：[](亲测，官网上下载的都是坑，付费的请联系我QQ／微信：826096331 微信请参考下这里：http://www.erdangjiade.com/php/2750.html

继续阅读 »

pdf.js使用总结

pdf

ps:文中图片显示的浏览效果不佳是因为PDF文件没有按照原始尺寸大小显示，最后一张图是按原始大小显示的。

由于最新有个功能需求为浏览文档，而其中一种文档格式就是PDF，怎么查看PDF文件呢？网上查了相关资料，经过综合考虑认为集成tbs或psdf.js是比较好的实现方式。tbs只支持Android，而且需要离线打包，暂时放下。在此先记录pdf.js的使用：

pdf.js地址:pdf.js

如何下载pdf.js,github里有详细的介绍，并且提供了一些使用demo。不过demo都是需要配合服务器，可能是因为开发者的本意是做PDF的在线浏览。而今天要记录的是在不使用自己的服务器的情况下，用HBuilder如何使用pdf.js。

总共有3种使用方式：
1.下载pdf.js到本地
将从GitHub下载好的pdf.js项目build目录下的generic目录及其目录下所有文件拷贝到自己的项目中

将目录名'generic'改为'pdfjs'（为何要改为psdjs，这和pdf.js这个js文件中的引用有关，看源码便知）,目录结构和所含文件如图所示。

mui.openWindow({  
                    url: 'viewer.html路径?PDF文件路径',  
                          // 本地PDF文件url示例：'_www/pdfjs/web/viewer.html?file=file:///storage/emulated/0/xxx.pdf'  
                    id: 'pdf_preview',  
                    show: {  
                        duration: 300  
                    }  
                }

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），如要添加按back键返回功能，引入mui.js便可。界面也可以根据自己的需求进行修改。
优点：无网络环境下也可正常浏览本地文件，速度相对其他两种较快
缺点：插件体积有点大

2.使用mozilla部署在github pages上的Viewer

mui.openWindow({  
                    url:'http://mozilla.github.io/pdf.js/web/viewer.html?PDF文件路径',  
                         // 网络PDF文件url示例：'http://mozilla.github.io/pdf.js/web/viewer.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf1',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），界面无法修改。
优点：无需下载插件，便可直接使用
缺点：无法浏览本地文件，需要网络，网络文件较大时加载慢，浏览界面无回退功能（用双webview可实现回退）、无法修改，会有跨域问题

3.自定义预览界面，pdf.js使用cdn的方式导入

mui.openWindow({  
                    url: '自定义HTML路径?pdf路径',   
                          // 本地PDF文件url示例：'_www/pdfjs/index.html?file:///storage/emulated/0/tbs.pdf'  
                          // 网络PDF文件url示例：'_www/pdfjs/index.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf3',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码便可浏览PDF文件了
优点：无需下载插件，使用简单，
缺点：需要网络

4.把pdf.js部署到服务端
和第3种方式类似，区别在于需要自己去部署服务器，之后的使用方法一样。

问题1：在直接实现预览的时候遇到显示模糊的问题，通过增大scale系数解决
var viewport = page.getViewport(2.0);//设置为2.0

问题2：pdf内容显示不完整，通过设置cMapUrl和cMapPacked解决
PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
PDFJS.cMapPacked = true;

实际大小显示效果（横屏）：

demo在附件

继续阅读 »

ps:文中图片显示的浏览效果不佳是因为PDF文件没有按照原始尺寸大小显示，最后一张图是按原始大小显示的。

由于最新有个功能需求为浏览文档，而其中一种文档格式就是PDF，怎么查看PDF文件呢？网上查了相关资料，经过综合考虑认为集成tbs或psdf.js是比较好的实现方式。tbs只支持Android，而且需要离线打包，暂时放下。在此先记录pdf.js的使用：

pdf.js地址:pdf.js

如何下载pdf.js,github里有详细的介绍，并且提供了一些使用demo。不过demo都是需要配合服务器，可能是因为开发者的本意是做PDF的在线浏览。而今天要记录的是在不使用自己的服务器的情况下，用HBuilder如何使用pdf.js。

总共有3种使用方式：
1.下载pdf.js到本地
将从GitHub下载好的pdf.js项目build目录下的generic目录及其目录下所有文件拷贝到自己的项目中

将目录名'generic'改为'pdfjs'（为何要改为psdjs，这和pdf.js这个js文件中的引用有关，看源码便知）,目录结构和所含文件如图所示。

mui.openWindow({  
                    url: 'viewer.html路径?PDF文件路径',  
                          // 本地PDF文件url示例：'_www/pdfjs/web/viewer.html?file=file:///storage/emulated/0/xxx.pdf'  
                    id: 'pdf_preview',  
                    show: {  
                        duration: 300  
                    }  
                }

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），如要添加按back键返回功能，引入mui.js便可。界面也可以根据自己的需求进行修改。
优点：无网络环境下也可正常浏览本地文件，速度相对其他两种较快
缺点：插件体积有点大

2.使用mozilla部署在github pages上的Viewer

mui.openWindow({  
                    url:'http://mozilla.github.io/pdf.js/web/viewer.html?PDF文件路径',  
                         // 网络PDF文件url示例：'http://mozilla.github.io/pdf.js/web/viewer.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf1',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码并可浏览PDF文件了，其中viewer.html就是浏览界面（由demo提供），界面无法修改。
优点：无需下载插件，便可直接使用
缺点：无法浏览本地文件，需要网络，网络文件较大时加载慢，浏览界面无回退功能（用双webview可实现回退）、无法修改，会有跨域问题

3.自定义预览界面，pdf.js使用cdn的方式导入

mui.openWindow({  
                    url: '自定义HTML路径?pdf路径',   
                          // 本地PDF文件url示例：'_www/pdfjs/index.html?file:///storage/emulated/0/tbs.pdf'  
                          // 网络PDF文件url示例：'_www/pdfjs/index.html?http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'  
                    id: 'pdf3',  
                    show: {  
                        duration: 300  
                    }  
                })

使用如上代码便可浏览PDF文件了
优点：无需下载插件，使用简单，
缺点：需要网络

4.把pdf.js部署到服务端
和第3种方式类似，区别在于需要自己去部署服务器，之后的使用方法一样。

问题1：在直接实现预览的时候遇到显示模糊的问题，通过增大scale系数解决
var viewport = page.getViewport(2.0);//设置为2.0

问题2：pdf内容显示不完整，通过设置cMapUrl和cMapPacked解决
PDFJS.cMapUrl = 'https://unpkg.com/pdfjs-dist@1.9.426/cmaps/';
PDFJS.cMapPacked = true;

实际大小显示效果（横屏）：

demo在附件

收起阅读 »

vue+webapck+hbuilder实时热更新开发APP经验分享

Vue

vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生，告别在html引入vue的low操作。截止目前，DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章，只是零零散散有人去构建一些自己的项目，并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主，适量 demo 为辅，印证了 vue+webpack+hbuilder 实时调试以及打包的可行性，为开发者提供多开发种选择。
该项目应现阶段APP构造方式构建了两个APP，一个为SPA（单页面应用），一个为MPA（多页面应用），分别采用不同的方式构建，满足不同需求的开发。
需要注意的是，两个APP都几乎没有展示内容的业务逻辑，你可以把它理解为DCLOUD的muiAPP，做UIdemo的展示。SPA使用的是mint-ui（饿了么）MPA使用的是cube-ui（滴滴），两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展，方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。
SPA请参照：https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
MPA请参照：https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

下载代码

MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git  
$ cd vue-webpack-cube-for-hbuilder  
$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git  
$ cd vue-webpack-mint-for-hbuilder  
$ npm install

在浏览器中调试调试

$ npm run dev

MPA
浏览器地址为：http://localhost:8080/html/index.html
SPA
浏览器地址为：http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html
SPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html
如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段，否则无法访问本机的服务。

编译后真机同步调试

$ npm run build

把 dist 目录下的文件复制到 HBuilder 项目下
设置起始页为 html/index.html MPA
设置起始页为 index.html SPA
真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

UI模块和PLUS模块独立展示，参考使用各取所需

UI是对cube-ui/mint-ui官网demo的仿造与实际实践，采用的是后编译，100%迁移以及额外的扩展，更多的自定义demo展示与结合APP的运用，更加符合一款APP的基础需求

PLUS对5+SDK的的集成运用，对APP常用的几个功能进行了展示，验证5+在vue中的使用

索引页面、登陆与登出，登陆超时、广告弹出等等功能的基础实现原理，使得APP更加“高仿”

对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建，至于为什么不用4.x进行构建在app中进行了回答。
无论是SPA还是MPA开发者可以直接对项目进行修改复用，10分钟快速上手，方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案，更贴近真是开发，可以直接复制粘贴。
PS：希望可以帮到大家，如果帮助到了您，请多多点赞！

继续阅读 »

vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生，告别在html引入vue的low操作。截止目前，DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章，只是零零散散有人去构建一些自己的项目，并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主，适量 demo 为辅，印证了 vue+webpack+hbuilder 实时调试以及打包的可行性，为开发者提供多开发种选择。
该项目应现阶段APP构造方式构建了两个APP，一个为SPA（单页面应用），一个为MPA（多页面应用），分别采用不同的方式构建，满足不同需求的开发。
需要注意的是，两个APP都几乎没有展示内容的业务逻辑，你可以把它理解为DCLOUD的muiAPP，做UIdemo的展示。SPA使用的是mint-ui（饿了么）MPA使用的是cube-ui（滴滴），两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展，方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。
SPA请参照：https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
MPA请参照：https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

下载代码

MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git  
$ cd vue-webpack-cube-for-hbuilder  
$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git  
$ cd vue-webpack-mint-for-hbuilder  
$ npm install

在浏览器中调试调试

$ npm run dev

MPA
浏览器地址为：http://localhost:8080/html/index.html
SPA
浏览器地址为：http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html
SPA
在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html
如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段，否则无法访问本机的服务。

编译后真机同步调试

$ npm run build

把 dist 目录下的文件复制到 HBuilder 项目下
设置起始页为 html/index.html MPA
设置起始页为 index.html SPA
真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

UI模块和PLUS模块独立展示，参考使用各取所需

UI是对cube-ui/mint-ui官网demo的仿造与实际实践，采用的是后编译，100%迁移以及额外的扩展，更多的自定义demo展示与结合APP的运用，更加符合一款APP的基础需求

PLUS对5+SDK的的集成运用，对APP常用的几个功能进行了展示，验证5+在vue中的使用

索引页面、登陆与登出，登陆超时、广告弹出等等功能的基础实现原理，使得APP更加“高仿”

对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建，至于为什么不用4.x进行构建在app中进行了回答。
无论是SPA还是MPA开发者可以直接对项目进行修改复用，10分钟快速上手，方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案，更贴近真是开发，可以直接复制粘贴。
PS：希望可以帮到大家，如果帮助到了您，请多多点赞！

收起阅读 »

iOS 蓝牙打印原生插件

github开源

必须使用mac os系统也就是苹果电脑，xcode 打包编译
hbuilder的第三方插件必须用对应的IDE 打包发布

如有需求请加群 218460026
或者个人qq：511308538
所有蓝牙打印机都是根据指令不同指令需要做对应的开发

继续阅读 »

跨平台APP开发框架MUI全套视频教程

mui

mui是最接近原生App体验的前端框架，可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用。真正实现多端发布 – 开发一套代码，发布六个平台。本教程将详细讲解MUI的方方面面。

马上来学习吧 http://www.sucaihuo.com/video/251.html

继续阅读 »

修改mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求

有的用户会在第一次上拉和下拉事件未完成的时候，就执行第二次，第三次请求....

提示文字也加上的位置动态计算,修改了mui的部份源码实现，我们的需求达到了

我们来看一下腾讯新闻的效果:

继续阅读 »

手动处理返回按钮事件

mui.init 返回按键

有时候需要处理返回按钮事件，左上角的可以取消 ‘mui-action-back’这个class，但物理返回按钮就要复杂些。
经过查看源码，我总结出以下方式：

mui.init({  
                keyEventBind: {  
                    backbutton: false //很关键  
                }  
            });  
            var page_can_close = false;  
            mui.plusReady(function() {  
                //要延迟一下  
                setTimeout(function() {  
                    plus.key.addEventListener("backbutton", function() {  
                mui.closePopup();  
                        //用法1 需要处理一下事情  
                        if(!page_can_close) { //判断是否可以返回，比如有时候页面中有弹出窗，点击返回要关闭弹出框。//大多数mui系列弹出层都会智能处理返回事件  
                            plus.nativeUI.showWaiting('关闭窗口....');  
                            setTimeout(function() {  
                                page_can_close = true;  
                                plus.nativeUI.closeWaiting();  
                            }, 1000);  
                            return;  
                        }  
                        //用法2需要确定关闭的  
                        mui.confirm('退出当前页面？', '', ['取消', '退出'], function(e) {  
                            if(e.index == 1) {  
                                setTimeout(function() {  
                                    mui.back(); //用此方法要延迟一下  
                                }, 10);  
                                //plus.webview.currentWebview().close();//不用延迟  
                            }  
                        }, 'div');  
                    }, false);  
                }, 10);  
            });

继续阅读 »

有时候需要处理返回按钮事件，左上角的可以取消 ‘mui-action-back’这个class，但物理返回按钮就要复杂些。
经过查看源码，我总结出以下方式：

mui.init({  
                keyEventBind: {  
                    backbutton: false //很关键  
                }  
            });  
            var page_can_close = false;  
            mui.plusReady(function() {  
                //要延迟一下  
                setTimeout(function() {  
                    plus.key.addEventListener("backbutton", function() {  
                mui.closePopup();  
                        //用法1 需要处理一下事情  
                        if(!page_can_close) { //判断是否可以返回，比如有时候页面中有弹出窗，点击返回要关闭弹出框。//大多数mui系列弹出层都会智能处理返回事件  
                            plus.nativeUI.showWaiting('关闭窗口....');  
                            setTimeout(function() {  
                                page_can_close = true;  
                                plus.nativeUI.closeWaiting();  
                            }, 1000);  
                            return;  
                        }  
                        //用法2需要确定关闭的  
                        mui.confirm('退出当前页面？', '', ['取消', '退出'], function(e) {  
                            if(e.index == 1) {  
                                setTimeout(function() {  
                                    mui.back(); //用此方法要延迟一下  
                                }, 10);  
                                //plus.webview.currentWebview().close();//不用延迟  
                            }  
                        }, 'div');  
                    }, false);  
                }, 10);  
            });

收起阅读 »

混合开发预览pdf的方法集成

pdf

我主要参考了这个文档的方法 https://blog.csdn.net/niedewang/article/details/78965924

亲测很好用，只需要把pdf.js和pdf.worker.js引入html页面即可。
集成完之后发现清晰度不够，只需要调整一下这个参数：
scale, scale的值越大，清晰度越高

继续阅读 »

mui手势解锁时的问题 mui.locker

手势解锁 mui

mui.openWindow时如果预加载页面后再显示，解锁图案有时候不显示，点击图案处才显示
此处修改打开页面的方式，不用预加载功能，每次可以正常显示解锁图案

经验总结：pagebeforeshow事件最好不要用

事件 mui

mui的pagebeforeshow这个设计是比较奇葩的，有以下几个缺点：

只能通过mui.openWindow才能触发，并且必须show:{autoShow: true}才行，其他情况下显示出来的webview里不会触发
只有手机真机才能触发，pc浏览器里不能触发
基于以上两点，pagebeforeshow实际上是没什么用处的。如果用来做页面显示前刷新信息，那么需要把到达这个页面的所有地方都通过mui.openWindow来打开，很繁琐易出错且不利于代码维护性，而且这样打开后原来的页面没有关掉，有些地方如返回键也没法这样打开，而且如果在pc浏览器里调试更会遇到各种问题，这时如果写代码兼容pc浏览器下的效果，则使得代码更加繁琐。所以最好不要使用pagebeforeshow，而是自己写方法解决此类需求

继续阅读 »

分享一个简单的 video 短视频播放例子，可以上下滑动播放

视频播放器 video

video 用于APP 做播放器，还是有点吃力，
下面是一个可以，在网页，APP里都可以使的video 短视频播放页，
例子在附件

vue+webapck+hbuilder实时热更新开发APP经验分享

使用步骤

下载代码

在浏览器中调试调试

真机同步调试

编译后真机同步调试

主要架构以及特色

快速上手

vue+webapck+hbuilder实时热更新开发APP经验分享

使用步骤

下载代码

在浏览器中调试调试

真机同步调试

编译后真机同步调试

主要架构以及特色

快速上手

热门文章