HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

ios 跳转app应用权限界面 判断用户是否开启定位权限

uniapp

ios 打开app应用权限


var cllocationManger = plus.ios.importClass("CLLocationManager");    
            var enable = cllocationManger.locationServicesEnabled();    
            var status = cllocationManger.authorizationStatus();    
            console.log("enable:" + enable);    
            console.log("status:" + status);    
            if (enable && status != 2) {    

                console.log("手机系统的定位已经打开");    
            } else {   
                console.log("手机系统的定位没有打开");  
                                 //  定位没有开启时  提示用户是否开启  
                  plus.nativeUI.confirm("定位权限没有开启,是否去开启?", function(e) {    
                        if (e.index == 0) {    
                            var UIApplication = plus.ios.importClass("UIApplication");    
                            var application2 = UIApplication.sharedApplication();    
                            var NSURL2 = plus.ios.importClass("NSURL");                          
                              var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限  
                            application2.openURL(setting2);    
                            plus.ios.deleteObject(setting2);    
                            plus.ios.deleteObject(NSURL2);    
                            plus.ios.deleteObject(application2);    
                        }    
                    }, {    
                        "buttons": ["不开启", "去设置"],    
                        "verticalAlign": "center"    
                    });    
            }    
                         plus.ios.deleteObject(cllocationManger);   
继续阅读 »

ios 打开app应用权限


var cllocationManger = plus.ios.importClass("CLLocationManager");    
            var enable = cllocationManger.locationServicesEnabled();    
            var status = cllocationManger.authorizationStatus();    
            console.log("enable:" + enable);    
            console.log("status:" + status);    
            if (enable && status != 2) {    

                console.log("手机系统的定位已经打开");    
            } else {   
                console.log("手机系统的定位没有打开");  
                                 //  定位没有开启时  提示用户是否开启  
                  plus.nativeUI.confirm("定位权限没有开启,是否去开启?", function(e) {    
                        if (e.index == 0) {    
                            var UIApplication = plus.ios.importClass("UIApplication");    
                            var application2 = UIApplication.sharedApplication();    
                            var NSURL2 = plus.ios.importClass("NSURL");                          
                              var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限  
                            application2.openURL(setting2);    
                            plus.ios.deleteObject(setting2);    
                            plus.ios.deleteObject(NSURL2);    
                            plus.ios.deleteObject(application2);    
                        }    
                    }, {    
                        "buttons": ["不开启", "去设置"],    
                        "verticalAlign": "center"    
                    });    
            }    
                         plus.ios.deleteObject(cllocationManger);   
收起阅读 »

高薪招聘深圳uni-app人才

uni_app

岗位职责:
1、使用最新的 Web 前端技术负责产品的开发工作,包括前端js、html5开发工作;
2、持续优化前端页面体验和访问速度,搭建高性能、高可用和安全的前端技术架构。

任职要求:
1、有良好的逻辑思维能力;
2、具备扎实且与时俱进的Javascript 基础;
3、能熟练使用hbuilderx软件,精通uni-app前端框架;
4、关注前端动态,至少非常熟练使用一种前端框架,包括但不限于:React, Vue, Angular ...;
5、熟悉各种Web客户端,尤其是主流移动端浏览器的开发模式和特性;
熟练的调试和工程化功底;
6、有写测试的习惯,且在项目中有过实践经历;
7、熟悉HTTP协议,了解TCP/IP的基本工作原理;熟悉常用WEB开发调试工具;

继续阅读 »

岗位职责:
1、使用最新的 Web 前端技术负责产品的开发工作,包括前端js、html5开发工作;
2、持续优化前端页面体验和访问速度,搭建高性能、高可用和安全的前端技术架构。

任职要求:
1、有良好的逻辑思维能力;
2、具备扎实且与时俱进的Javascript 基础;
3、能熟练使用hbuilderx软件,精通uni-app前端框架;
4、关注前端动态,至少非常熟练使用一种前端框架,包括但不限于:React, Vue, Angular ...;
5、熟悉各种Web客户端,尤其是主流移动端浏览器的开发模式和特性;
熟练的调试和工程化功底;
6、有写测试的习惯,且在项目中有过实践经历;
7、熟悉HTTP协议,了解TCP/IP的基本工作原理;熟悉常用WEB开发调试工具;

收起阅读 »

在 ios 真机运行时在 page.json 下给 nvue 页面配置 pullToRefresh 下拉刷新会导致 app 卡死

在 ios 真机运行下,给 nvue 页面配置 pullToRefresh 会导致 app 卡死退出,其他情况正常,即 android 真机运行环境以及 vue 页面正常

解决方法:去掉 nvue 页面的 pullToRefresh 配置即可

继续阅读 »

在 ios 真机运行下,给 nvue 页面配置 pullToRefresh 会导致 app 卡死退出,其他情况正常,即 android 真机运行环境以及 vue 页面正常

解决方法:去掉 nvue 页面的 pullToRefresh 配置即可

收起阅读 »

已找到

招聘

已找到

已找到

IOS离线打包库文件精简

离线打包 iOS

研究了几天IOS离线打包,总算是初步走通了,真是历尽千辛万苦,尤其打包文件精简过程。

这里抱怨一句:官方出的文档能不能详细点?能不能别那么多bug?做事情能不能认真一点?

以下是我精简出来的包,打包出来的文件和云端打包大小差别不大了,如果发现还可以精简的里方欢迎补充:

我的项目用到了蓝牙,如果不需要用蓝牙的可以把liblibBlueTooth.a这个文件也去掉

继续阅读 »

研究了几天IOS离线打包,总算是初步走通了,真是历尽千辛万苦,尤其打包文件精简过程。

这里抱怨一句:官方出的文档能不能详细点?能不能别那么多bug?做事情能不能认真一点?

以下是我精简出来的包,打包出来的文件和云端打包大小差别不大了,如果发现还可以精简的里方欢迎补充:

我的项目用到了蓝牙,如果不需要用蓝牙的可以把liblibBlueTooth.a这个文件也去掉

收起阅读 »

【分享】uniapp迁移QQ小程序

uniapp没有兼容QQ小程序,
但是QQ小程序本身是兼容微信小程序的,
所以考虑生成微信小程序后直接搞到QQ小程序内,
发现效果还不错,
但是请注意,
每个页面和组件必须有js/json/wxml/wxss四个文件,否则会报错。

uniapp没有兼容QQ小程序,
但是QQ小程序本身是兼容微信小程序的,
所以考虑生成微信小程序后直接搞到QQ小程序内,
发现效果还不错,
但是请注意,
每个页面和组件必须有js/json/wxml/wxss四个文件,否则会报错。

加快表单处理效率:增加、编辑通用

表单

首先看表单的基本格式

<form @submit="onSubmit">  
            <view class="cu-form-group margin-top">  
                <view class="title">申请理由</view>  
                <input placeholder="请输入..." name="name" :value="formdata.name"></input>  
            </view>  
</form>

其中value因为是可以给表单赋初值,所以可以再进入编辑页时,调用查询详情的接口给formdata对象赋值,

但是因为这里是单向绑定的关系,input内容的变更如果不做特殊事件处理,formdata.name是接收不到它更改之后的值的,因此我们还是需要在上面写上name。

注意,value依赖的对象是双层的,这是为了定义变量和引用方便,我们需要在data中声明

formdata: {  
    name: ''  
},

这里的name是可以可无的。

提交表单时,可以使用

...this.formdata,  
...e.detail.value

两者合并,同时构成提交的对象

示例:

methods: {  
   onSubmit(e) {  
       // 这里因为我用了request插件所以直接使用$http,即使不用也只是这里不同  
       this.$http.post('/device/authority/authApply', {  
           ...this.formdata,  
           ...e.detail.value  
           }).then(res => {  
       })  
   }  
}
继续阅读 »

首先看表单的基本格式

<form @submit="onSubmit">  
            <view class="cu-form-group margin-top">  
                <view class="title">申请理由</view>  
                <input placeholder="请输入..." name="name" :value="formdata.name"></input>  
            </view>  
</form>

其中value因为是可以给表单赋初值,所以可以再进入编辑页时,调用查询详情的接口给formdata对象赋值,

但是因为这里是单向绑定的关系,input内容的变更如果不做特殊事件处理,formdata.name是接收不到它更改之后的值的,因此我们还是需要在上面写上name。

注意,value依赖的对象是双层的,这是为了定义变量和引用方便,我们需要在data中声明

formdata: {  
    name: ''  
},

这里的name是可以可无的。

提交表单时,可以使用

...this.formdata,  
...e.detail.value

两者合并,同时构成提交的对象

示例:

methods: {  
   onSubmit(e) {  
       // 这里因为我用了request插件所以直接使用$http,即使不用也只是这里不同  
       this.$http.post('/device/authority/authApply', {  
           ...this.formdata,  
           ...e.detail.value  
           }).then(res => {  
       })  
   }  
}
收起阅读 »

提升体验,操作完成后先提示结果再延时跳转

很多时候,我们提交完一个表单或者做了一个搜索操作等,需要跳转到其它页面,但是如果直接跳转会给用户显得很突兀,而且我们的提示信息用户也看不到。

场景:

  1. 提交表单后,需要跳到列表页或者结果页

这个时候可以按如下方式,先提示,然后在1.5秒之后跳转。

if (res.data.code == 0) {  
    uni.showToast({  
        title: '提交成功'  
    });  
    setTimeout(function() {                           
        uni.redirectTo({  
            url: 'toMe',  
            success: res => {},  
            fail: () => {},  
            complete: () => {}  
        });  
    }, 1500)  
}

或者

uni.showToast({  
    title: '提示信息'  
});  
setTimeout(function() {                           
    uni.navigateBack({  
        delta: 1  
    });  
}, 1500)
继续阅读 »

很多时候,我们提交完一个表单或者做了一个搜索操作等,需要跳转到其它页面,但是如果直接跳转会给用户显得很突兀,而且我们的提示信息用户也看不到。

场景:

  1. 提交表单后,需要跳到列表页或者结果页

这个时候可以按如下方式,先提示,然后在1.5秒之后跳转。

if (res.data.code == 0) {  
    uni.showToast({  
        title: '提交成功'  
    });  
    setTimeout(function() {                           
        uni.redirectTo({  
            url: 'toMe',  
            success: res => {},  
            fail: () => {},  
            complete: () => {}  
        });  
    }, 1500)  
}

或者

uni.showToast({  
    title: '提示信息'  
});  
setTimeout(function() {                           
    uni.navigateBack({  
        delta: 1  
    });  
}, 1500)
收起阅读 »

厦门招聘uni-app人才

移动APP 招聘

厦门企业(云起行简)招聘资深前端工程师,薪资17-25K 职位信息
1、负责基于H5、uni-App的手机APP的设计与开发;
2、负责公司现有APP的重构与优化;
3、参与公司级APP的发展方向的规划与设计;
4、参与APP研发技术的积累、学习、实践工作;
5、参与公司其他前端技术支持工作。
6、指导其他前端开发工程师完成研发任务。
任职要求:
1、专科及以上学历,计算机、软件、设计等相关专业;
2、3年或以上H5相关开发经验,一个以上项目跨平台APP开发经验(要有项目展示);
3、精通符合W3C标准的Html5、JavaScript和CSS相关技术;
4、精通JSON、XML等通信格式以及基于AJAX请求实现与后台数据交互;
5、精通JQuery、Vue等常见JS开发框架;
6、熟悉使用HBuilder IDE编辑器进行开发,并完成打包发布安卓、ios版本app;
7、精通 Vue、uni-app 框架应用,并能运用uni-app框架完成移动端及小程序开发;
9、良好沟通能力、团队合作精神,积极主动、服从安排,能承受较大压力,责任心和学习能力强,能独立分析问题及解决问题;
有意向者请联系sophie:
手机微信:13544899516
qq:1765268710

继续阅读 »

厦门企业(云起行简)招聘资深前端工程师,薪资17-25K 职位信息
1、负责基于H5、uni-App的手机APP的设计与开发;
2、负责公司现有APP的重构与优化;
3、参与公司级APP的发展方向的规划与设计;
4、参与APP研发技术的积累、学习、实践工作;
5、参与公司其他前端技术支持工作。
6、指导其他前端开发工程师完成研发任务。
任职要求:
1、专科及以上学历,计算机、软件、设计等相关专业;
2、3年或以上H5相关开发经验,一个以上项目跨平台APP开发经验(要有项目展示);
3、精通符合W3C标准的Html5、JavaScript和CSS相关技术;
4、精通JSON、XML等通信格式以及基于AJAX请求实现与后台数据交互;
5、精通JQuery、Vue等常见JS开发框架;
6、熟悉使用HBuilder IDE编辑器进行开发,并完成打包发布安卓、ios版本app;
7、精通 Vue、uni-app 框架应用,并能运用uni-app框架完成移动端及小程序开发;
9、良好沟通能力、团队合作精神,积极主动、服从安排,能承受较大压力,责任心和学习能力强,能独立分析问题及解决问题;
有意向者请联系sophie:
手机微信:13544899516
qq:1765268710

收起阅读 »

如何使用uni.$emit()和uni.$on() 进行页面间通讯

自定义事件 uniapp

自 HBuilderX 2.0.0 起支持 uni.$emituni.$onuni.$onceuni.$off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。事件详情

具体如何使用呢?我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。

监听事件

首先,在我的页面监听事件。

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。

触发事件

进入登陆页面,触发事件

// 登陆页面  
uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。

更多使用场景

以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:

  • vue 与 nvue,nvue 与 vue 间的通讯
  • tabbar 页面之间的通讯
  • 父页面与多级子页面间的通讯

基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emituni.$onuni.$onceuni.$off 四个事件完成。

Tips

  • 如果页面没有打开,将不能 注册监听事件 uni.$onuni.$once
  • 一次性的事件,直接使用 uni.$once 监听,不需要移除。

附件为 demo

继续阅读 »

自 HBuilderX 2.0.0 起支持 uni.$emituni.$onuni.$onceuni.$off ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。事件详情

具体如何使用呢?我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。

监听事件

首先,在我的页面监听事件。

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重复监听。

触发事件

进入登陆页面,触发事件

// 登陆页面  
uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。

更多使用场景

以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:

  • vue 与 nvue,nvue 与 vue 间的通讯
  • tabbar 页面之间的通讯
  • 父页面与多级子页面间的通讯

基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emituni.$onuni.$onceuni.$off 四个事件完成。

Tips

  • 如果页面没有打开,将不能 注册监听事件 uni.$onuni.$once
  • 一次性的事件,直接使用 uni.$once 监听,不需要移除。

附件为 demo

收起阅读 »

最简单的uni-app返回携带参数解决方案

页面跳转 传参数 传参 uniapp

场景:A页面到B页面,B页面返回,A页面接收数据

A页面

//引入  
 import WxNotificationCenter  from '@/common/NotificationCenter.js'  

onLoad: function () {  
    //注册通知  
    WxNotificationCenter.addNotification('NotificationName', this.didNotification, this)  
  },  
    onUnload: function () {  
    //移除通知  
    WxNotificationCenter.removeNotification('NotificationName', this)  
  },  
methods:{  
   //通知处理  
  didNotification: function (info) {  
    var that = this  
    console.log(info)  
  },    
}

B页面

//引入  
 import WxNotificationCenter  from '@/common/NotificationCenter.js'  
 //发送通知  
 WxNotificationCenter.postNotificationName('NotificationName', '来自B页面')  

文件
http://e0c3afa5a2.hz22l-181.6464.cn/lian/NotificationCenter.js

继续阅读 »

场景:A页面到B页面,B页面返回,A页面接收数据

A页面

//引入  
 import WxNotificationCenter  from '@/common/NotificationCenter.js'  

onLoad: function () {  
    //注册通知  
    WxNotificationCenter.addNotification('NotificationName', this.didNotification, this)  
  },  
    onUnload: function () {  
    //移除通知  
    WxNotificationCenter.removeNotification('NotificationName', this)  
  },  
methods:{  
   //通知处理  
  didNotification: function (info) {  
    var that = this  
    console.log(info)  
  },    
}

B页面

//引入  
 import WxNotificationCenter  from '@/common/NotificationCenter.js'  
 //发送通知  
 WxNotificationCenter.postNotificationName('NotificationName', '来自B页面')  

文件
http://e0c3afa5a2.hz22l-181.6464.cn/lian/NotificationCenter.js

收起阅读 »