HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app 经纬度坐标距离计算

js版本:

distance(la1, lo1, la2, lo2) {  
            var La1 = la1 * Math.PI / 180.0;  
            var La2 = la2 * Math.PI / 180.0;  
            var La3 = La1 - La2;  
            var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2)   Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
            s = s * 6378.137;//地球半径  
            s = Math.round(s * 10000) / 10000;  
            console.log("计算结果",s,'KM');   
        }

写php接口时,可以用下面的方法来计算距离。

php版本:

/**  
 * 计算两点之间直线距离  
 * @param float $lon1    经度  
 * @param float $lat1    维度  
 * @param float $lon2    经度  
 * @param float $lat2    维度  
 * @return float         浮点数  
 */  
function distance($lon1, $lat1, $lon2, $lat2){  
    return (2*ATAN2(SQRT(SIN(($lat1-$lat2)*PI()/180/2)  
            *SIN(($lat1-$lat2)*PI()/180/2)   
            COS($lat2*PI()/180)*COS($lat1*PI()/180)  
            *SIN(($lon1-$lon2)*PI()/180/2)  
            *SIN(($lon1-$lon2)*PI()/180/2)),  
            SQRT(1-SIN(($lat1-$lat2)*PI()/180/2)  
                    *SIN(($lat1-$lat2)*PI()/180/2)  
                     COS($lat2*PI()/180)*COS($lat1*PI()/180)  
                    *SIN(($lon1-$lon2)*PI()/180/2)  
                    *SIN(($lon1-$lon2)*PI()/180/2))))*6378140;  
}  
echo distance(116.3896,39.91917,116.3940,39.91726);
继续阅读 »

js版本:

distance(la1, lo1, la2, lo2) {  
            var La1 = la1 * Math.PI / 180.0;  
            var La2 = la2 * Math.PI / 180.0;  
            var La3 = La1 - La2;  
            var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2)   Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
            s = s * 6378.137;//地球半径  
            s = Math.round(s * 10000) / 10000;  
            console.log("计算结果",s,'KM');   
        }

写php接口时,可以用下面的方法来计算距离。

php版本:

/**  
 * 计算两点之间直线距离  
 * @param float $lon1    经度  
 * @param float $lat1    维度  
 * @param float $lon2    经度  
 * @param float $lat2    维度  
 * @return float         浮点数  
 */  
function distance($lon1, $lat1, $lon2, $lat2){  
    return (2*ATAN2(SQRT(SIN(($lat1-$lat2)*PI()/180/2)  
            *SIN(($lat1-$lat2)*PI()/180/2)   
            COS($lat2*PI()/180)*COS($lat1*PI()/180)  
            *SIN(($lon1-$lon2)*PI()/180/2)  
            *SIN(($lon1-$lon2)*PI()/180/2)),  
            SQRT(1-SIN(($lat1-$lat2)*PI()/180/2)  
                    *SIN(($lat1-$lat2)*PI()/180/2)  
                     COS($lat2*PI()/180)*COS($lat1*PI()/180)  
                    *SIN(($lon1-$lon2)*PI()/180/2)  
                    *SIN(($lon1-$lon2)*PI()/180/2))))*6378140;  
}  
echo distance(116.3896,39.91917,116.3940,39.91726);
收起阅读 »

【教程】uniapp从0到1开发指南, 跨平台开发新手必看

自定义基座 打包 subnvue Vue nvue 教程 uniapp

此文已同步到 点击查看博客文章,如果要copy代码就要移步公众号
写在前面: 由于本人开发uniapp已经2年了,我希望能把正确的东西带给新手,如果您发现了错误或者描述不当的话,请及时在评论区告诉我一下。
还有本来这个文档作为公司内部培训资料的,但是我选择发布在社区中,希望各路大神能指点一二,本教程的目的就是:让新手快速了解uniapp,让新手以后看官方文档不至于一些名词很陌生,希望大家知晓这个教程并不是真正意义上的新手教程而是过渡踩坑教程。

这篇万字的长文我是利于空闲时间写了一周,由于markdown是生成出来的,如果要复制代码或者片段,请移步下方,因为排版原因这篇文章的代码都被压缩了。

关注


文章概览

完整版在公众号

继续阅读 »

此文已同步到 点击查看博客文章,如果要copy代码就要移步公众号
写在前面: 由于本人开发uniapp已经2年了,我希望能把正确的东西带给新手,如果您发现了错误或者描述不当的话,请及时在评论区告诉我一下。
还有本来这个文档作为公司内部培训资料的,但是我选择发布在社区中,希望各路大神能指点一二,本教程的目的就是:让新手快速了解uniapp,让新手以后看官方文档不至于一些名词很陌生,希望大家知晓这个教程并不是真正意义上的新手教程而是过渡踩坑教程。

这篇万字的长文我是利于空闲时间写了一周,由于markdown是生成出来的,如果要复制代码或者片段,请移步下方,因为排版原因这篇文章的代码都被压缩了。

关注


文章概览

完整版在公众号

收起阅读 »

招聘+uni-app前端开发工程师+双休+五险一金

uni_app

uni-app前端开发工程师

技能要求:
Vue,Sass,ElementUI,前端架构,uni-app,axios
岗位职责
1、负责uni-app前端框架开发
2、负责uni ui前端框架的开发
3、负责vue前端项目的开发
任职要求
1、计算机相关专业;
2、熟悉vue开发,熟悉小程序。熟悉跨平台App开发者优先
3、熟悉vue、element-ui、axios、ecmascript、git、nodejs、npm、sass等相关技术、具备前端模块化或者组件化开发思维者优先;
4、有责任心,认同企业文化,愿意和企业共同发展;
5、开发程序质量较高,思路清晰,考虑问题全面;
6、具有1年以上的vue项目经验。
面试者请携带一份个人简历。

工作地点:苏州工业园区星湖街创意产业园6#103
薪资6000-12000,可打luna:15716216759电话咨询

继续阅读 »

uni-app前端开发工程师

技能要求:
Vue,Sass,ElementUI,前端架构,uni-app,axios
岗位职责
1、负责uni-app前端框架开发
2、负责uni ui前端框架的开发
3、负责vue前端项目的开发
任职要求
1、计算机相关专业;
2、熟悉vue开发,熟悉小程序。熟悉跨平台App开发者优先
3、熟悉vue、element-ui、axios、ecmascript、git、nodejs、npm、sass等相关技术、具备前端模块化或者组件化开发思维者优先;
4、有责任心,认同企业文化,愿意和企业共同发展;
5、开发程序质量较高,思路清晰,考虑问题全面;
6、具有1年以上的vue项目经验。
面试者请携带一份个人简历。

工作地点:苏州工业园区星湖街创意产业园6#103
薪资6000-12000,可打luna:15716216759电话咨询

收起阅读 »

发布插件应该给奖励才对,不然作者都没心情更新作品了

发布插件应该给奖励才对,不然作者都没心情更新作品了

发布插件应该给奖励才对,不然作者都没心情更新作品了

【经验分享】部分安卓手机无法搜索到蓝牙设备问题(onReceive不执行)

搜索设备 蓝牙打印

直接上解决方案:
经过排查,最后发现是因为部分手机需要授权位置信息的原因,权限管理已勾上但是未弹出授权提示,故直接在搜索蓝牙前调用plus.android.requestPermissions提示授权;

plus.android.requestPermissions(['android.permission.BLUETOOTH','android.permission.BLUETOOTH_ADMIN','android.permission.WRITE_EXTERNAL_STORAGE','android.permission.ACCESS_COARSE_LOCATION','android.permission.ACCESS_FINE_LOCATION'])
继续阅读 »

直接上解决方案:
经过排查,最后发现是因为部分手机需要授权位置信息的原因,权限管理已勾上但是未弹出授权提示,故直接在搜索蓝牙前调用plus.android.requestPermissions提示授权;

plus.android.requestPermissions(['android.permission.BLUETOOTH','android.permission.BLUETOOTH_ADMIN','android.permission.WRITE_EXTERNAL_STORAGE','android.permission.ACCESS_COARSE_LOCATION','android.permission.ACCESS_FINE_LOCATION'])
收起阅读 »

淘宝客APP开源

nvue

基于uniapp nvue开发的一款淘客APP 现全部开源:https://ext.dcloud.net.cn/plugin?id=2641#detail

基于uniapp nvue开发的一款淘客APP 现全部开源:https://ext.dcloud.net.cn/plugin?id=2641#detail

uni-app中使用webview加载网页,支持后退和关闭

Webview
  1. pages.json
"pages": [  
    {  
            "path" : "pages/index/web",  
            "style": {  
              "app-plus": {  
                "titleNView": {  
                  "buttons": [{  
                    "type": "close",  
                    "float": "left",  
                    "color": "#FFFFFF"  
                  }]  
                }  
              }  
            }  
        }  
]
  1. web.vue
<template>  
  <view>  
  </view>  
</template>  

<script>  
  export default {  
    data () {  
      return {  
        wv: null,  
        canBack: false  
      }  
    },  
    onLoad(params) {  
      if (!params.url) {  
        return  
      }  
      if (params.title) {  
        uni.setNavigationBarTitle({  
          title: params.title  
        })  
      }  

      // #ifdef APP-PLUS  
      const url = params.url  
      const wv = plus.webview.create("", "custom-webview", {  
        plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止  
        'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突  
        top: uni.getSystemInfoSync().statusBarHeight + 44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值  
      })  
      wv.loadURL(url)  

      const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()  
      currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭  

      const self = this  
      wv.addEventListener('loaded', e => {  
        wv.canBack(e => {  
          self.canBack = e.canBack  
          currentWebview.setTitleNViewButtonStyle(0, {  
            color: e.canBack ? '#000' : '#fff',    
          });  
        })  
      })  
      this.wv = wv  
      // #endif  
    },  
    onBackPress(e) {  
      if (e.from === 'navigateBack') {    
        return false  
      }  
      // #ifdef APP-PLUS  
      if (this.wv && this.canBack) {  
        this.wv.back()  
        return true  
      }  
      // #endif  
    },  
    onNavigationBarButtonTap (e) {  
      uni.navigateBack()  
    }  
  }  
</script>
继续阅读 »
  1. pages.json
"pages": [  
    {  
            "path" : "pages/index/web",  
            "style": {  
              "app-plus": {  
                "titleNView": {  
                  "buttons": [{  
                    "type": "close",  
                    "float": "left",  
                    "color": "#FFFFFF"  
                  }]  
                }  
              }  
            }  
        }  
]
  1. web.vue
<template>  
  <view>  
  </view>  
</template>  

<script>  
  export default {  
    data () {  
      return {  
        wv: null,  
        canBack: false  
      }  
    },  
    onLoad(params) {  
      if (!params.url) {  
        return  
      }  
      if (params.title) {  
        uni.setNavigationBarTitle({  
          title: params.title  
        })  
      }  

      // #ifdef APP-PLUS  
      const url = params.url  
      const wv = plus.webview.create("", "custom-webview", {  
        plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止  
        'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突  
        top: uni.getSystemInfoSync().statusBarHeight + 44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值  
      })  
      wv.loadURL(url)  

      const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()  
      currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭  

      const self = this  
      wv.addEventListener('loaded', e => {  
        wv.canBack(e => {  
          self.canBack = e.canBack  
          currentWebview.setTitleNViewButtonStyle(0, {  
            color: e.canBack ? '#000' : '#fff',    
          });  
        })  
      })  
      this.wv = wv  
      // #endif  
    },  
    onBackPress(e) {  
      if (e.from === 'navigateBack') {    
        return false  
      }  
      // #ifdef APP-PLUS  
      if (this.wv && this.canBack) {  
        this.wv.back()  
        return true  
      }  
      // #endif  
    },  
    onNavigationBarButtonTap (e) {  
      uni.navigateBack()  
    }  
  }  
</script>
收起阅读 »

uniapp父组件请求数据再渲染并传递子组件

很多时候都会遇见在父组件中请求数据,然后在子组件中使用。但结果是还在父组件请求数据时,子组件就已经渲染出来了,传递的数据为父组件data中设置的默认值。为解决这个问题,我选择的方案是:采用 v-if,一开始先不渲染子组件,再数据请求结果出来后,再进行渲染。

很多时候都会遇见在父组件中请求数据,然后在子组件中使用。但结果是还在父组件请求数据时,子组件就已经渲染出来了,传递的数据为父组件data中设置的默认值。为解决这个问题,我选择的方案是:采用 v-if,一开始先不渲染子组件,再数据请求结果出来后,再进行渲染。

第一次下载,发现官网下载页有个bug

下载
  • 打开下载页面后,怎么都找不到下载按钮

  • 想了想,是不是藏起来了

  • 果不其然
  • 打开下载页面后,怎么都找不到下载按钮

  • 想了想,是不是藏起来了

  • 果不其然

解决iOS下wap2app打开页面或Ajax请求慢的问题

启动慢

问题:iOS下wap2app打开页面和Ajax请求数据非常慢,但是Android和浏览器打开却正常。
原因:我使用的是Let's Encrypt 免费SSL服务,抓包发现域名http://ocsp.int-x3.letsencrypt.org长时间无响应,最终返回503,意识到这是因为iOS下访问https链接时会先校验其有效性,所以导致了上述问题。
解决方案:更换其他ssl证书,如宝塔SSL。

踩了一坑,记录下来,以便日后查询。

继续阅读 »

问题:iOS下wap2app打开页面和Ajax请求数据非常慢,但是Android和浏览器打开却正常。
原因:我使用的是Let's Encrypt 免费SSL服务,抓包发现域名http://ocsp.int-x3.letsencrypt.org长时间无响应,最终返回503,意识到这是因为iOS下访问https链接时会先校验其有效性,所以导致了上述问题。
解决方案:更换其他ssl证书,如宝塔SSL。

踩了一坑,记录下来,以便日后查询。

收起阅读 »

在uni-app开发过程中新建page的时候可以同时新增页面title

新需求

在新增页面的输入页面名称的同时可以在下方增加页面的title,即page.json中注册的页面同步"navigationBarTitleText"。

在新增页面的输入页面名称的同时可以在下方增加页面的title,即page.json中注册的页面同步"navigationBarTitleText"。

A-承接uni-app开发,联系QQ:543610866

本人开发的插件地址:https://ext.dcloud.net.cn/publisher?id=22130,有需要开发uni-app插件的,联系QQ:543610866,欢迎骚扰

继续阅读 »

本人开发的插件地址:https://ext.dcloud.net.cn/publisher?id=22130,有需要开发uni-app插件的,联系QQ:543610866,欢迎骚扰

收起阅读 »