文章 - DCloud问答

集成百度语音rest demo

看地址源码 https://github.com/rs1314/dcloud-baidu-ai

集成百度语音安卓sdk demo

看地址源码 https://github.com/rs1314/dcloud-android-baidu-yuyin

MUI开发小米商城视频教程附源码和笔记

mui

MUI开发小米商城视频教程附源码和笔记，学习一下MUI如何快速开发webapp商城，大牛手把手教你制作开发首页、发现页、分类页等

主要课程如下：
mui框架的基本使用
常用组件的使用，包括轮播组件、懒加载、下拉加载和节流函数
小米商城的实现

下载地址：http://www.sucaihuo.com/video/260.html

继续阅读 »

uni-app的H5版使用注意事项

uni_app HBuilderX h5

uni-app x的web版运行注意事项，另见https://doc.dcloud.net.cn/uni-app-x/web/

HBuilderX 1.2开始包含了uni-app的web平台支持。

使用方式

打开uni-app项目下的vue文件
点击菜单运行->运行到浏览器->Chrome
在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备（如果UI变形刷新即可）
HBuilderX修改代码后会自动刷新chrome的页面
审查元素

在chrome控制台安装vue devtools后可查看节点关系。
安装方式自行搜索。
每个页面都在page节点下，pageHead是微信和app下的原生导航栏，即pages.json里配的导航栏。
pageBody是导航栏下的页面内容。
所有标签为了避免和标准H5标签冲突，都加了U前缀。
断点debug
点chrome控制台的source，可以给js打断点调试。
找到同名的文件，如果没有同名vue文件，一般会有一个同文件名的js文件，此时会提示检测到sourcemap，是否引入，点允许。然后就会有同名的vue文件。如果找不到，则把焦点放到source的代码区，然后敲ctrl+p打开文件查找窗口，然后敲入vue页面名字，然后打开vue页面。
这个vue里，只有js，没有tag和css，但可以打断点调试。

发布方式

配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
可视化界面设置：

源码视图设置：
点击菜单发行->H5
在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的history模式，需要服务端配合，参考：后端配置方式

跨端注意

uni-app由uni的通用api和平台专有api组成，H5版也不例外。可以使用uni的通用api完成很多工作，也可以在条件编译里调用H5版的浏览器专有api。
虽然dom、window都可以用了，但如果要跨端，还是少写这样的代码好。
H5仍应该使用pages.json管理页面，强烈不建议使用浏览器的跳转页面的api。
H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

//#ifdef H5  
this.titleHeight = 44  
//#endif

条件编译目前有7个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。
其中APP-PLUS-NVUE是APP-PLUS的子集，用于weex下单独写专用代码。
为了方便多平台选择，还引入了~~~#ifndef~~~，也就是ifdef的not，反向选择。以及或语法，及||。这些命名都是c语言条件编译的标准命名。

// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif

开发者之前为微信或app写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

组件和API支持情况

目前的H5版，还没有100%实现uni的所有api，但大部分已经完成，具体参考uniapp文档。

第三方组件支持

支持mpvue组件
支持普通vue组件（仅H5平台）
支持微信小程序组件（HBuilderX2.5.0+开始支持编译到H5）
支持nvue

vue语法支持

H5版支持完整的vue语法，同时校验器也校验了更严格的vue语法，有些写法不规范会报警。比如data后面写对象会报警，必须写function。

注意事项（必看）

编译为H5版后生成的是单页应用，SPA。如果想要seo优化，首页可以在template模板中配置keyword。二级页不支持配置。但一个更酷的方式是用uni-app直接发布一版百度小程序，搜索权重更高。
编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：https://ask.dcloud.net.cn/article/35267
APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：--window-top和--window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(--window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
event 对象上使用的 mpvue 独有的属性需调整（比如 event.pageY，可能需要加上44px的导航栏高度）。
fixed定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI。
正常支持rpx。px是真实物理像素。暂不支持通过设manifest的"transformPx" : true，把px当动态单位使用。
使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议。
PC 端 Chrome 浏览器模拟器设备测试的时候，获取定位 API 需要连接谷歌服务器，需要翻墙。
组件内（页面除外）不支持onLoad生命周期。
为避免和内置组件冲突，自定义组件请加上前缀（但不能是u和uni）。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input。如果已有项目使用了可能造成冲突的名称，请修改名称。另外微信小程序下自定义组件名称不能以wx开头。
在tabBar页面，如果page高度设置为100%时，页面超出滚动会导致底部被tabbar遮挡，可在tabbar页面去掉height:100%或者改用min-height:100%。
编写组件时需要遵守vue的规范，之前在app端和小程序端能使用的一些不规范写法需要纠正，比如：不要修改props的值、组件最外层template节点下不允许包含多个节点。
开发App时，不可在H5预览后直接云打包。需在HBuilderX里点运行-选择运行到手机，真机调试无误后再打包。
H5端 “网络不给力” 原因及解决办法：https://ask.dcloud.net.cn/article/37065。

使用方式

打开uni-app项目下的vue文件
点击菜单运行->运行到浏览器->Chrome
在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备（如果UI变形刷新即可）
HBuilderX修改代码后会自动刷新chrome的页面
审查元素

在chrome控制台安装vue devtools后可查看节点关系。
安装方式自行搜索。
每个页面都在page节点下，pageHead是微信和app下的原生导航栏，即pages.json里配的导航栏。
pageBody是导航栏下的页面内容。
所有标签为了避免和标准H5标签冲突，都加了U前缀。
断点debug
点chrome控制台的source，可以给js打断点调试。
找到同名的文件，如果没有同名vue文件，一般会有一个同文件名的js文件，此时会提示检测到sourcemap，是否引入，点允许。然后就会有同名的vue文件。如果找不到，则把焦点放到source的代码区，然后敲ctrl+p打开文件查找窗口，然后敲入vue页面名字，然后打开vue页面。
这个vue里，只有js，没有tag和css，但可以打断点调试。

发布方式

配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
可视化界面设置：

源码视图设置：
点击菜单发行->H5
在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的history模式，需要服务端配合，参考：后端配置方式

跨端注意

uni-app由uni的通用api和平台专有api组成，H5版也不例外。可以使用uni的通用api完成很多工作，也可以在条件编译里调用H5版的浏览器专有api。
虽然dom、window都可以用了，但如果要跨端，还是少写这样的代码好。
H5仍应该使用pages.json管理页面，强烈不建议使用浏览器的跳转页面的api。
H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

//#ifdef H5  
this.titleHeight = 44  
//#endif

条件编译目前有7个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。
其中APP-PLUS-NVUE是APP-PLUS的子集，用于weex下单独写专用代码。
为了方便多平台选择，还引入了~~~#ifndef~~~，也就是ifdef的not，反向选择。以及或语法，及||。这些命名都是c语言条件编译的标准命名。

// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif

开发者之前为微信或app写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

组件和API支持情况

目前的H5版，还没有100%实现uni的所有api，但大部分已经完成，具体参考uniapp文档。

第三方组件支持

支持mpvue组件
支持普通vue组件（仅H5平台）
支持微信小程序组件（HBuilderX2.5.0+开始支持编译到H5）
支持nvue

vue语法支持

H5版支持完整的vue语法，同时校验器也校验了更严格的vue语法，有些写法不规范会报警。比如data后面写对象会报警，必须写function。

注意事项（必看）

编译为H5版后生成的是单页应用，SPA。如果想要seo优化，首页可以在template模板中配置keyword。二级页不支持配置。但一个更酷的方式是用uni-app直接发布一版百度小程序，搜索权重更高。
编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：https://ask.dcloud.net.cn/article/35267
APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：--window-top和--window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(--window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
event 对象上使用的 mpvue 独有的属性需调整（比如 event.pageY，可能需要加上44px的导航栏高度）。
fixed定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI。
正常支持rpx。px是真实物理像素。暂不支持通过设manifest的"transformPx" : true，把px当动态单位使用。
使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议。
PC 端 Chrome 浏览器模拟器设备测试的时候，获取定位 API 需要连接谷歌服务器，需要翻墙。
组件内（页面除外）不支持onLoad生命周期。
为避免和内置组件冲突，自定义组件请加上前缀（但不能是u和uni）。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input。如果已有项目使用了可能造成冲突的名称，请修改名称。另外微信小程序下自定义组件名称不能以wx开头。
在tabBar页面，如果page高度设置为100%时，页面超出滚动会导致底部被tabbar遮挡，可在tabbar页面去掉height:100%或者改用min-height:100%。
编写组件时需要遵守vue的规范，之前在app端和小程序端能使用的一些不规范写法需要纠正，比如：不要修改props的值、组件最外层template节点下不允许包含多个节点。
开发App时，不可在H5预览后直接云打包。需在HBuilderX里点运行-选择运行到手机，真机调试无误后再打包。
H5端 “网络不给力” 原因及解决办法：https://ask.dcloud.net.cn/article/37065。

mui使用百度语音合成来制作文字转语音来播放

文字转语音

百度语音合成中有对应的webapi可以使用，这个相对比较简单，废话不多说直接上代码吧。代码比较简单，老规矩不懂的在下方评论留言，觉得好就点个赞，转发请注明出处：https://blog.csdn.net/baidu_21919557；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>

</head>
<body>
   <div id="">
       <textarea id="content" name="" rows="3" cols="20" style="top: 20px;height: 600px;"></textarea>
       <input id="play" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="播放"></input>
       <input id="puase" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="暂停"></input>
   </div>
   <script type="text/javascript" charset="utf-8">
   var tokenUrl = "https://openapi.baidu.com/oauth/2.0/token";
       var client_id = "client_id ";//此处为申请的client_id;
       var client_secret = "client_secret ";/此处为申请的client_secret ;
       var access_token;
       var data = "grant_type=client_credentials&client_id="+client_id+"&client_secret="+client_secret;
       var p = document.createElement("audio");//创建一个潜在的audio播放器
   mui("body").on("tap","#play",function(){
       var tex = document.getElementById("content").value.replace(/[\r\n]/g,"").replace(/\ +/g,"").replace(/-/g, '').trim();//对文本进行去空格和换行；
           var a=0,b=0,c=0;
           var contentArray = new Array();
           if(tex.length/500>=0){//接口上传限制字数，避免出现接口腻出，限制上传字数
               for (var i = 0; i < tex.length/500; i++) {
                   a = a + 500;
                   splitTex = tex.slice(b,a);
                   b=a;
                   contentArray.push(splitTex);
               }
           }
       mui.ajax({
               type:"get",
               url:tokenUrl,
               data:data,
               async:true,
               success:function(resp){
                   if(resp.access_token){
                       access_token = resp.access_token;
                       var shibieUrl = "http://tsn.baidu.com/text2audio";
                       tex = encodeURI(encodeURI(contentArray[0]));
                       var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                       p.controls="controls";
                       p.src = shibieUrl+"?"+data;
                       p.play();
                       c++;
                   }else{
                   }
               },
               error:function(error){
               }
           });
           setTimeout(function(){
               p.addEventListener('ended', function () {
                   if(contentArray.length>0&&c<=contentArray.length){
                       var shibieUrl = "http://tsn.baidu.com/text2audio";
                       tex = encodeURI(encodeURI(contentArray[c]));
                       var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                       p.src = shibieUrl+"?"+data;
                       p.play();
                       c++;
                   }else{
                       c=0;
                   }
               });
           },500);
   });
       mui("body").on("tap","#puase",function(){
           if(p.paused) {
           p.play();
           }else{
           p.pause();
           }

       });
</script>
</body>
</html>

继续阅读 »

百度语音合成中有对应的webapi可以使用，这个相对比较简单，废话不多说直接上代码吧。代码比较简单，老规矩不懂的在下方评论留言，觉得好就点个赞，转发请注明出处：https://blog.csdn.net/baidu_21919557；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>

</head>
<body>
   <div id="">
       <textarea id="content" name="" rows="3" cols="20" style="top: 20px;height: 600px;"></textarea>
       <input id="play" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="播放"></input>
       <input id="puase" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="暂停"></input>
   </div>
   <script type="text/javascript" charset="utf-8">
   var tokenUrl = "https://openapi.baidu.com/oauth/2.0/token";
       var client_id = "client_id ";//此处为申请的client_id;
       var client_secret = "client_secret ";/此处为申请的client_secret ;
       var access_token;
       var data = "grant_type=client_credentials&client_id="+client_id+"&client_secret="+client_secret;
       var p = document.createElement("audio");//创建一个潜在的audio播放器
   mui("body").on("tap","#play",function(){
       var tex = document.getElementById("content").value.replace(/[\r\n]/g,"").replace(/\ +/g,"").replace(/-/g, '').trim();//对文本进行去空格和换行；
           var a=0,b=0,c=0;
           var contentArray = new Array();
           if(tex.length/500>=0){//接口上传限制字数，避免出现接口腻出，限制上传字数
               for (var i = 0; i < tex.length/500; i++) {
                   a = a + 500;
                   splitTex = tex.slice(b,a);
                   b=a;
                   contentArray.push(splitTex);
               }
           }
       mui.ajax({
               type:"get",
               url:tokenUrl,
               data:data,
               async:true,
               success:function(resp){
                   if(resp.access_token){
                       access_token = resp.access_token;
                       var shibieUrl = "http://tsn.baidu.com/text2audio";
                       tex = encodeURI(encodeURI(contentArray[0]));
                       var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                       p.controls="controls";
                       p.src = shibieUrl+"?"+data;
                       p.play();
                       c++;
                   }else{
                   }
               },
               error:function(error){
               }
           });
           setTimeout(function(){
               p.addEventListener('ended', function () {
                   if(contentArray.length>0&&c<=contentArray.length){
                       var shibieUrl = "http://tsn.baidu.com/text2audio";
                       tex = encodeURI(encodeURI(contentArray[c]));
                       var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
                       p.src = shibieUrl+"?"+data;
                       p.play();
                       c++;
                   }else{
                       c=0;
                   }
               });
           },500);
   });
       mui("body").on("tap","#puase",function(){
           if(p.paused) {
           p.play();
           }else{
           p.pause();
           }

       });
</script>
</body>
</html>

收起阅读 »

请管理员，能否帮忙审下流应用，比较急

审核流应用

appid=H5C7685CB

希望审核大大看到后，帮忙审核通过下

小弟在此万分感谢

客户催的比较急

地图经纬度转换工具

uniapp 高德地图

实际在开发 UNI-APP过程用，要用到打开高德地图APP 需求，看了5+ APP 接口，得把经纬度转 wgs84
在网上找的代码，简单封了一下，自己也是小白，参考高德地图小程序 SDK 简单封了一下，适合uni-app 小程序。不喜勿喷。

function mapTool() {  
    this.x_PI = 3.14159265358979324 * 3000.0 / 180.0,  
    this.PI = 3.1415926535897932384626,  
    this.ee = 0.00669342162296594323,  
    this.a = 6378245.0;  
}  
/**  
 * GCJ02 转换为 WGS84  
 * @param lng  
 * @param lat  
 * @returns {*[]}  
 */  
mapTool.prototype.gcj02towgs84 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [lng * 2 - mglng, lat * 2 - mglat]  
        }  
    },  
    /**  
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换  
     * 即谷歌、高德 转 百度  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.gcj02tobd09 = function(lng, lat) {  
        let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_PI);  
        let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_PI);  
        let bd_lng = z * Math.cos(theta) + 0.0065;  
        let bd_lat = z * Math.sin(theta) + 0.006;  
        return [bd_lng, bd_lat]  
    },  
    /**  
     * WGS84转GCj02  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.wgs84togcj02 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [mglng, mglat]  
        }  
    },  
    /**  
     * GCJ02 转换为 WGS84  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.gcj02towgs84 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [lng * 2 - mglng, lat * 2 - mglat]  
        }  
    },  
    mapTool.prototype.transformlat = function(lng, lat) {  
        let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));  
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;  
        ret += (20.0 * Math.sin(lat * this.PI) + 40.0 * Math.sin(lat / 3.0 * this.PI)) * 2.0 / 3.0;  
        ret += (160.0 * Math.sin(lat / 12.0 * this.PI) + 320 * Math.sin(lat * this.PI / 30.0)) * 2.0 / 3.0;  
        return ret  
    },  
    mapTool.prototype.transformlng = function(lng, lat) {  
        let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));  
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;  
        ret += (20.0 * Math.sin(lng * this.PI) + 40.0 * Math.sin(lng / 3.0 * this.PI)) * 2.0 / 3.0;  
        ret += (150.0 * Math.sin(lng / 12.0 * this.PI) + 300.0 * Math.sin(lng / 30.0 * this.PI)) * 2.0 / 3.0;  
        return ret  
    },  
    /**  
     * 判断是否在国内，不在国内则不做偏移  
     * @param lng  
     * @param lat  
     * @returns {boolean}  
     */  
    mapTool.prototype.out_of_china = function(lng, lat) {  
        return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);  
    },  
    module.exports.mapTool = mapTool;

继续阅读 »

实际在开发 UNI-APP过程用，要用到打开高德地图APP 需求，看了5+ APP 接口，得把经纬度转 wgs84
在网上找的代码，简单封了一下，自己也是小白，参考高德地图小程序 SDK 简单封了一下，适合uni-app 小程序。不喜勿喷。

function mapTool() {  
    this.x_PI = 3.14159265358979324 * 3000.0 / 180.0,  
    this.PI = 3.1415926535897932384626,  
    this.ee = 0.00669342162296594323,  
    this.a = 6378245.0;  
}  
/**  
 * GCJ02 转换为 WGS84  
 * @param lng  
 * @param lat  
 * @returns {*[]}  
 */  
mapTool.prototype.gcj02towgs84 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [lng * 2 - mglng, lat * 2 - mglat]  
        }  
    },  
    /**  
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换  
     * 即谷歌、高德 转 百度  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.gcj02tobd09 = function(lng, lat) {  
        let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_PI);  
        let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_PI);  
        let bd_lng = z * Math.cos(theta) + 0.0065;  
        let bd_lat = z * Math.sin(theta) + 0.006;  
        return [bd_lng, bd_lat]  
    },  
    /**  
     * WGS84转GCj02  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.wgs84togcj02 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [mglng, mglat]  
        }  
    },  
    /**  
     * GCJ02 转换为 WGS84  
     * @param lng  
     * @param lat  
     * @returns {*[]}  
     */  
    mapTool.prototype.gcj02towgs84 = function(lng, lat) {  
        if (this.out_of_china(lng, lat)) {  
            return [lng, lat]  
        } else {  
            let dlat = this.transformlat(lng - 105.0, lat - 35.0);  
            let dlng = this.transformlng(lng - 105.0, lat - 35.0);  
            let radlat = lat / 180.0 * this.PI;  
            let magic = Math.sin(radlat);  
            magic = 1 - this.ee * magic * magic;  
            let sqrtmagic = Math.sqrt(magic);  
            dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);  
            dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);  
            let mglat = lat + dlat;  
            let mglng = lng + dlng;  
            return [lng * 2 - mglng, lat * 2 - mglat]  
        }  
    },  
    mapTool.prototype.transformlat = function(lng, lat) {  
        let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));  
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;  
        ret += (20.0 * Math.sin(lat * this.PI) + 40.0 * Math.sin(lat / 3.0 * this.PI)) * 2.0 / 3.0;  
        ret += (160.0 * Math.sin(lat / 12.0 * this.PI) + 320 * Math.sin(lat * this.PI / 30.0)) * 2.0 / 3.0;  
        return ret  
    },  
    mapTool.prototype.transformlng = function(lng, lat) {  
        let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));  
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;  
        ret += (20.0 * Math.sin(lng * this.PI) + 40.0 * Math.sin(lng / 3.0 * this.PI)) * 2.0 / 3.0;  
        ret += (150.0 * Math.sin(lng / 12.0 * this.PI) + 300.0 * Math.sin(lng / 30.0 * this.PI)) * 2.0 / 3.0;  
        return ret  
    },  
    /**  
     * 判断是否在国内，不在国内则不做偏移  
     * @param lng  
     * @param lat  
     * @returns {boolean}  
     */  
    mapTool.prototype.out_of_china = function(lng, lat) {  
        return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);  
    },  
    module.exports.mapTool = mapTool;

收起阅读 »

【分享】视频录制限制拍摄时长

录制视频 HBuilder X

安卓代码摘自论坛 http://ask.dcloud.net.cn/question/45756
IOS 代码核心就是一个 videoMaximumDuration 参数
注意事项为 IOS 必须使用HbuilderX 真机调试、打包
使用到的5+ API http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.CameraOptions

附件为测试代码

    function captureVideo(callback){  
        var TIMEOUT = 5;  //录像时间 5 秒  
        if(mui.os.android) {  
            // 调用原生android摄像头  
            var VIDEOZOOM = 200;  
            var MediaStore = plus.android.importClass("android.provider.MediaStore");  
            var Intent = plus.android.importClass("android.content.Intent");  
            // 导入后可以使用new方法创建类的示例对象  
            var intent = new Intent("android.media.action.VIDEO_CAPTURE");  
            intent.putExtra("android.intent.extra.videoQuality", 0); //0 means low quality, 1 means high quality  
            // intent.putExtra("android.provider.MediaStore.EXTRA_OUTPUT", url);  
            intent.putExtra("android.intent.extra.durationLimit", TIMEOUT); //设置录像时间,5秒钟  

            var main = plus.android.runtimeMainActivity();  
            main.startActivityForResult(intent, VIDEOZOOM);  
            // 获取返回参数  
            main.onActivityResult = function(requestCode, resultCode, data) {  
                var context = main;  
                plus.android.importClass(data);  
                var uri = data.getData();  
                var resolver = context.getContentResolver();  
                plus.android.importClass(resolver);  
                var cursor = resolver.query(uri, null, null, null, null);  
                plus.android.importClass(cursor);  
                cursor.moveToFirst();  
                var column = cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DATA);  
                // 获取录制的视频路径  
                var path = cursor.getString(column);  
                if(path) {  
                    callback && callback(path);  
                } else {  
                    mui.toast("录制小视频失败");  
                }  
            }  
        } else {  
            /**  
             * HBuilderX已更新：iOS平台 新增 支持摄像头录像（plus.camera.startVideoCapture）设置视频长度（videoMaximumDuration）  
             * http://ask.dcloud.net.cn/question/59024  
             */  

            var cmr = plus.camera.getCamera();  
            var res = cmr.supportedVideoResolutions[0];  
            var fmt = cmr.supportedVideoFormats[0];  
            cmr.startVideoCapture(function(path) {  
                callback && callback(path);  
            }, function(error) {  
                mui.toast("取消录制小视频");  
            }, {  
                resolution: res,  
                format: fmt,  
                filename: "_downloads/ibos/video/",  
                videoMaximumDuration:TIMEOUT      //该参数仅支持HBuilderX 打包  
            });  

        }  
    }

继续阅读 »

安卓代码摘自论坛 http://ask.dcloud.net.cn/question/45756
IOS 代码核心就是一个 videoMaximumDuration 参数
注意事项为 IOS 必须使用HbuilderX 真机调试、打包
使用到的5+ API http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.CameraOptions

附件为测试代码

    function captureVideo(callback){  
        var TIMEOUT = 5;  //录像时间 5 秒  
        if(mui.os.android) {  
            // 调用原生android摄像头  
            var VIDEOZOOM = 200;  
            var MediaStore = plus.android.importClass("android.provider.MediaStore");  
            var Intent = plus.android.importClass("android.content.Intent");  
            // 导入后可以使用new方法创建类的示例对象  
            var intent = new Intent("android.media.action.VIDEO_CAPTURE");  
            intent.putExtra("android.intent.extra.videoQuality", 0); //0 means low quality, 1 means high quality  
            // intent.putExtra("android.provider.MediaStore.EXTRA_OUTPUT", url);  
            intent.putExtra("android.intent.extra.durationLimit", TIMEOUT); //设置录像时间,5秒钟  

            var main = plus.android.runtimeMainActivity();  
            main.startActivityForResult(intent, VIDEOZOOM);  
            // 获取返回参数  
            main.onActivityResult = function(requestCode, resultCode, data) {  
                var context = main;  
                plus.android.importClass(data);  
                var uri = data.getData();  
                var resolver = context.getContentResolver();  
                plus.android.importClass(resolver);  
                var cursor = resolver.query(uri, null, null, null, null);  
                plus.android.importClass(cursor);  
                cursor.moveToFirst();  
                var column = cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DATA);  
                // 获取录制的视频路径  
                var path = cursor.getString(column);  
                if(path) {  
                    callback && callback(path);  
                } else {  
                    mui.toast("录制小视频失败");  
                }  
            }  
        } else {  
            /**  
             * HBuilderX已更新：iOS平台 新增 支持摄像头录像（plus.camera.startVideoCapture）设置视频长度（videoMaximumDuration）  
             * http://ask.dcloud.net.cn/question/59024  
             */  

            var cmr = plus.camera.getCamera();  
            var res = cmr.supportedVideoResolutions[0];  
            var fmt = cmr.supportedVideoFormats[0];  
            cmr.startVideoCapture(function(path) {  
                callback && callback(path);  
            }, function(error) {  
                mui.toast("取消录制小视频");  
            }, {  
                resolution: res,  
                format: fmt,  
                filename: "_downloads/ibos/video/",  
                videoMaximumDuration:TIMEOUT      //该参数仅支持HBuilderX 打包  
            });  

        }  
    }

收起阅读 »

IOS离线打包适配IPhoneX,Widget为实例,webView方式集成方法同理

iPhone iOS iOS打包 App离线打包离线打包 iphonex

近期在负责公司的IOS打包,因为要接入第三方渠道所以采用了离线打包方式
因为我司是做H5游戏开发的,需要设置沉浸式状态栏等
在IPhoneX适配时发现最新版本的ios以及xcode打包出来并不能完全适配,研究了两天ios发现完美解决方法

1.判断当前机器是否是IphoneX

+(BOOL)isIhoneX{  
    return (CGSizeEqualToSize(CGSizeMake(375.f, 812.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(812.f, 375.f), [UIScreen mainScreen].bounds.size));  
}

2.代码设定()

appDelegte.m中

application方法

在self.window = window;此行代码下添加如下代码

    NSInteger viewheight=0;  
    if ([AppDelegate isIhoneX]) {  
        viewheight=44;   //IphoneX上下间距44PX  
    }else{  
        viewheight=0;    //普通机型则设置为0,全屏显示  
    }  
    // 用来设定Frame的大小  
    self.window.frame = CGRectMake(0, viewheight, self.window.frame.size.width, self.window.frame.size.height - viewheight);

3.底部适配
在manifest.json文件中plus项中添加

"safearea": {  
            "background": "#000",  
            "bottom": {  
                "offset": "auto"  
            }  
        },

继续阅读 »

近期在负责公司的IOS打包,因为要接入第三方渠道所以采用了离线打包方式
因为我司是做H5游戏开发的,需要设置沉浸式状态栏等
在IPhoneX适配时发现最新版本的ios以及xcode打包出来并不能完全适配,研究了两天ios发现完美解决方法

1.判断当前机器是否是IphoneX

+(BOOL)isIhoneX{  
    return (CGSizeEqualToSize(CGSizeMake(375.f, 812.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(812.f, 375.f), [UIScreen mainScreen].bounds.size));  
}

2.代码设定()

appDelegte.m中

application方法

在self.window = window;此行代码下添加如下代码

    NSInteger viewheight=0;  
    if ([AppDelegate isIhoneX]) {  
        viewheight=44;   //IphoneX上下间距44PX  
    }else{  
        viewheight=0;    //普通机型则设置为0,全屏显示  
    }  
    // 用来设定Frame的大小  
    self.window.frame = CGRectMake(0, viewheight, self.window.frame.size.width, self.window.frame.size.height - viewheight);

3.底部适配
在manifest.json文件中plus项中添加

"safearea": {  
            "background": "#000",  
            "bottom": {  
                "offset": "auto"  
            }  
        },

收起阅读 »

HBuilderX关于引用微信小程序自定义组件像素单位的问题

upx Debug

经测试，在引用微信小程序自定义组件时，发生的一些问题：

1、wxcomponents目录下的小程序组件样式表不支持使用upx单位，使用upx单位会渲染失效。
2、wxcomponents目录下的小程序组件样式表里若使用px单位，在设置transformPx=true时也未能自动转换为upx。

暂缓解决办法：修改wxcomponents目录下的小程序组件样式里的px单位改为rpx，这样就有一个问题，vue页面使用的样式是upx，组件使用rpx就会造成组件大小不一的现象，若vue页面也改为rpx，那么后期也无法支持其他的平台，所以很纠结。

期望问题解决办法：希望能够在wxcomponents目录下的小程序组件样式里支持upx，或者transformPx=true，编译时对该目录下的所有样式进行自动转换为upx，这样才能统一像素单位，在写样式时也没有那么乱，UNI-APP统一像素单位是好事，既然统一的话就请全部调整规范做好适配吧。

感谢HBuilderX技术团队的无私奉献，让我们有这么好的一款国产跨平台开发编译平台

继续阅读 »

iOS离线打包配置

Xcode升级后，官方文档中有些配置需要变更，琢磨了大半天，整理了下文资料，完成离线打包配置。
iOS离线打包配置

使用plus.gallery.pick打开本地相册

plus.gallery

使用plus.gallery.pick打开本地相册，必须在manifest.json里配置竖屏权限，不然打包后在ios里无法打开本地相册，会卡死，闪退

使用方式

发布方式

跨端注意

组件和API支持情况

第三方组件支持

vue语法支持

注意事项（必看）

相关

使用方式

发布方式

跨端注意

组件和API支持情况

第三方组件支持

vue语法支持

注意事项（必看）

相关

热门文章