HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【分享】js正则表达式 如何验证邮箱?

js uniapp 正则
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;  
var email = "xxxx@qq.com";  
if (reg.test(email) {  
    alert("邮箱格式正确");  
}else{  
    alert("邮箱格式不正确");  
}
继续阅读 »
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;  
var email = "xxxx@qq.com";  
if (reg.test(email) {  
    alert("邮箱格式正确");  
}else{  
    alert("邮箱格式不正确");  
}
收起阅读 »

承接uniapp项目外包,网站、APP、小程序。前后台都可以写。欢迎咨询微信batik88

招聘 外包

承接uniapp项目外包,网站、APP、小程序。前后台都可以写。欢迎咨询微信 batik88

承接uniapp项目外包,网站、APP、小程序。前后台都可以写。欢迎咨询微信 batik88

uni-app调微信分享微信小程序 由于应用universal link校验不通过

不管是微信分享, 还是跳转小程序, 老提示:由于应用universal link校验不通过

前提条件:用uni-app本地打包, 然后用Xcode原生打包

按网上的方法,检查各种配置,都未能解决,选择排出以下几个情况
1、bundle Id中的teamId写错
2、与微信开放平台不一致
3、apple-app-site-association加了json后缀

这些都对过了,都是正确了,最后实现没有招,用了亘古科技的代理试了,马上成功了,
然后就比对亘古科技生成的apple-app-site-association定位到问题点,
公司服务器上只是把这个文件丢根目录,https:/xxx/apple-app-site-association 只可以下载文件,不是直接输出

正确配置是要直接输出,我用nginx的配置如下:

        location /apple-app-site-association {  
            default_type application/json;  
            root /home/webapp/html;  
        }

配置过程比较有效贴子:
https://cloud.tencent.com/developer/article/1146932

https://www.cnblogs.com/guoshaobin/p/11164000.html

继续阅读 »

不管是微信分享, 还是跳转小程序, 老提示:由于应用universal link校验不通过

前提条件:用uni-app本地打包, 然后用Xcode原生打包

按网上的方法,检查各种配置,都未能解决,选择排出以下几个情况
1、bundle Id中的teamId写错
2、与微信开放平台不一致
3、apple-app-site-association加了json后缀

这些都对过了,都是正确了,最后实现没有招,用了亘古科技的代理试了,马上成功了,
然后就比对亘古科技生成的apple-app-site-association定位到问题点,
公司服务器上只是把这个文件丢根目录,https:/xxx/apple-app-site-association 只可以下载文件,不是直接输出

正确配置是要直接输出,我用nginx的配置如下:

        location /apple-app-site-association {  
            default_type application/json;  
            root /home/webapp/html;  
        }

配置过程比较有效贴子:
https://cloud.tencent.com/developer/article/1146932

https://www.cnblogs.com/guoshaobin/p/11164000.html

收起阅读 »

scrollview 如何在ios上隐藏滚动条的解决方案

去掉滚动条 scrollview uniapp

配置文件pages.json文件里,app-plus中设置:

"scrollIndicator": "none"

参考设置:

     {  
        "path": "pages/xxxx/xxxxxx",  
        "style": {  
            "navigationBarTitleText": "xxxx",  
            "app-plus": {  
                "titleNView": {  
                    "titleColor": "#FFFFFF",  
                    "backgroundColor": "#E41F19",  
                    "pullToRefresh": {  
                        "support": false  
                    }  
                },  
                "enablePullDownRefresh": false,  
                 //滚动条显示策略,设置为 "none" 时不显示滚动条  
                "scrollIndicator": "none"  
            }  
        }  
    }
继续阅读 »

配置文件pages.json文件里,app-plus中设置:

"scrollIndicator": "none"

参考设置:

     {  
        "path": "pages/xxxx/xxxxxx",  
        "style": {  
            "navigationBarTitleText": "xxxx",  
            "app-plus": {  
                "titleNView": {  
                    "titleColor": "#FFFFFF",  
                    "backgroundColor": "#E41F19",  
                    "pullToRefresh": {  
                        "support": false  
                    }  
                },  
                "enablePullDownRefresh": false,  
                 //滚动条显示策略,设置为 "none" 时不显示滚动条  
                "scrollIndicator": "none"  
            }  
        }  
    }
收起阅读 »

关于uniapp的rich-text组件 动态注入的HTML代码中包含a标签 不能点击跳转的解决方法

Webview 页面跳转 uparse richtext uniapp

一年多前的一个提问,结果到现在还有很多人来加我q问我怎么解决

在这里统一回复下,关于rich-text组件动态注入的HTML代码中包含a标签 不能点击跳转

解决方法:

可以将rich-text组件换成uParse组件,uParse组件可以实现动态注入a标签跳转

<uParse :content="strings" @preview="preview" @navigate="navigate" />

navigate就是点击跳转方法

在method中加上navigate函数:

navigate(href, e) {  
    //比如点击a标签,打开某个webview并传输url  
     uni.navigateTo({  
        url: '/pages/goodsDetail/webView?url=' + href  
     })  
}
继续阅读 »

一年多前的一个提问,结果到现在还有很多人来加我q问我怎么解决

在这里统一回复下,关于rich-text组件动态注入的HTML代码中包含a标签 不能点击跳转

解决方法:

可以将rich-text组件换成uParse组件,uParse组件可以实现动态注入a标签跳转

<uParse :content="strings" @preview="preview" @navigate="navigate" />

navigate就是点击跳转方法

在method中加上navigate函数:

navigate(href, e) {  
    //比如点击a标签,打开某个webview并传输url  
     uni.navigateTo({  
        url: '/pages/goodsDetail/webView?url=' + href  
     })  
}
收起阅读 »

uni-app 手势事件解析,uni点击方法

uni_app uniapp

查看了官方的文档没有解释手势事件。只有一些方法,所以列举出来方便大家使用:

@click 组件被点击  
@longpress 长按(手指触摸超过350ms)  
@longtap 长按  
@tap 点击  
@touchcancel 手指触摸被打断,如来电提醒,弹窗  
@touchend 手指触摸动作结束,如松开按钮  
@touchmove 手指触摸后移动  
@touchstart 手指触摸动作开始
继续阅读 »

查看了官方的文档没有解释手势事件。只有一些方法,所以列举出来方便大家使用:

@click 组件被点击  
@longpress 长按(手指触摸超过350ms)  
@longtap 长按  
@tap 点击  
@touchcancel 手指触摸被打断,如来电提醒,弹窗  
@touchend 手指触摸动作结束,如松开按钮  
@touchmove 手指触摸后移动  
@touchstart 手指触摸动作开始
收起阅读 »

分享一下进入当前页面如何让页面、滚动条自动滑动到顶部,类似于iOS端点击顶部状态栏效果

onshow 经验分享 Android iOS scroll uniapp 双击顶部滚到顶 滑动

最近做项目,刚好遇到这个问题,就拿来分享一下,希望对大家有帮助!

首先在data里面设置一个参数 scrollTop: 0


然后在onshow里加上这段代码
其中duration参数是滑动速度,基础单位1000为1s

最后加上这段onPageScroll函数代码

完结~

继续阅读 »

最近做项目,刚好遇到这个问题,就拿来分享一下,希望对大家有帮助!

首先在data里面设置一个参数 scrollTop: 0


然后在onshow里加上这段代码
其中duration参数是滑动速度,基础单位1000为1s

最后加上这段onPageScroll函数代码

完结~

收起阅读 »

基于uniapp开发的一款淘宝客,成功上架IOS应用商店

上架

基于uniappnvue开发的一款淘宝客软件,一次过审IOS(其实拒绝了一次,但是拒绝原因是我自己的,因为IOS审核那天 刚好是我的HTTPS证书到期,然后他拒绝了 说我服务器没返回数据啥的,我改了后重新提交 就没问题了 直接过 .... ),前期工作一定要做好,比如有微信登录 那么就乖乖的加上apple登录,现在苹果推荐暗黑,那就乖乖在配置文件中配置上暗黑,只要应用质量没问题 很容易过。 体验地址,欢迎大家吐槽:https://m3w.cn/cst

继续阅读 »

基于uniappnvue开发的一款淘宝客软件,一次过审IOS(其实拒绝了一次,但是拒绝原因是我自己的,因为IOS审核那天 刚好是我的HTTPS证书到期,然后他拒绝了 说我服务器没返回数据啥的,我改了后重新提交 就没问题了 直接过 .... ),前期工作一定要做好,比如有微信登录 那么就乖乖的加上apple登录,现在苹果推荐暗黑,那就乖乖在配置文件中配置上暗黑,只要应用质量没问题 很容易过。 体验地址,欢迎大家吐槽:https://m3w.cn/cst

收起阅读 »

uniapp点击发送按钮键盘不自动隐藏(input不失去焦点),就是不让键盘隐藏

其实这个问题很简单,网上我也找了很久但是废话,没有本质的解决,
首先这个问题的本质是input在点击是获取焦点,那么系统就会自动拉起键盘,然鹅,在我们点击发送按钮的时候,(我这个实在聊天发送消息场景中的),这个input的焦点就会失去,那么伴随着的键盘也会隐藏下去,那么这里有两种解决方案
1.让input一直保持获取焦点状态
2.点击按钮后从新使input获取焦点
3.直接在按钮的事件上这么写就完事了@touchend.prevent="submit" 百试百灵

继续阅读 »

其实这个问题很简单,网上我也找了很久但是废话,没有本质的解决,
首先这个问题的本质是input在点击是获取焦点,那么系统就会自动拉起键盘,然鹅,在我们点击发送按钮的时候,(我这个实在聊天发送消息场景中的),这个input的焦点就会失去,那么伴随着的键盘也会隐藏下去,那么这里有两种解决方案
1.让input一直保持获取焦点状态
2.点击按钮后从新使input获取焦点
3.直接在按钮的事件上这么写就完事了@touchend.prevent="submit" 百试百灵

收起阅读 »

你可能不知道的hx的n个技巧

HBuilderX

技巧:本地历史记录

HBuilderX,文件修改、保存时在本地进行备份,防止意外丢失。可通过 “本地历史记录”查看备份文件
在编辑器打开的文件上,点击右键菜单,点击【本地历史记录】

技巧: 同步断点到内置浏览器

备注:同步断点到内置浏览器,仅支持可以运行到内置浏览器的项目

技巧:代码地图的开启与关闭

快捷键:alt + o

技巧:查找索引符号

HBuilderX支持对当前文件,按索引符号查找。菜单【查找】【查找索引符号】

技巧:按tab键插入代码助手选中项

技巧:多光标的使用

技巧:文件对比

项目管理器,选中两个要对比的文件,右键菜单,点击【对比选中文件】

技巧:使用内部资源管理器

传统开发工具,仅仅依靠左侧的项目树来管理资源文件,便利性和效率是远远不够的。
HBuilderX内置的资源管理器,给你一个更大的资源管理界面,大幅提高文件的管理效率。
更多见:https://ask.dcloud.net.cn/article/36828

技巧:使用外部命令

外部命令可以让您在HBuilderX中通过菜单、快捷键等方式调用外部程序或命令行。

比如压缩文件等。

更详细的教程见:HBuilderX技巧:利用外部命令,可以做哪些事?

技巧:HX内查看文件属性

项目管理器,选中文件,右键菜单,可以更快捷的查看文件属性。

技巧:快捷键切换

HBuilderX,支持市场上主流编辑器的快捷键方案,包含vscode、sublime Text、Eclipse、WebStorm

如需切换,请点击菜单【工具】【快捷键方案切换】

技巧:单项目窗体

HBuilderX, 项目管理器,默认可以显示多个项目列表。同时也支持单项目窗体(即项目管理器,只显示一个项目)。

在主窗体上,点击菜单【视图】【新建HBuilder窗体】,就可以新建一个单项目窗体。

在主窗体上,选中某个项目,右键菜单,点击【在新窗体中打开】,即可将项目在单项目窗体中打开。

继续阅读 »

技巧:本地历史记录

HBuilderX,文件修改、保存时在本地进行备份,防止意外丢失。可通过 “本地历史记录”查看备份文件
在编辑器打开的文件上,点击右键菜单,点击【本地历史记录】

技巧: 同步断点到内置浏览器

备注:同步断点到内置浏览器,仅支持可以运行到内置浏览器的项目

技巧:代码地图的开启与关闭

快捷键:alt + o

技巧:查找索引符号

HBuilderX支持对当前文件,按索引符号查找。菜单【查找】【查找索引符号】

技巧:按tab键插入代码助手选中项

技巧:多光标的使用

技巧:文件对比

项目管理器,选中两个要对比的文件,右键菜单,点击【对比选中文件】

技巧:使用内部资源管理器

传统开发工具,仅仅依靠左侧的项目树来管理资源文件,便利性和效率是远远不够的。
HBuilderX内置的资源管理器,给你一个更大的资源管理界面,大幅提高文件的管理效率。
更多见:https://ask.dcloud.net.cn/article/36828

技巧:使用外部命令

外部命令可以让您在HBuilderX中通过菜单、快捷键等方式调用外部程序或命令行。

比如压缩文件等。

更详细的教程见:HBuilderX技巧:利用外部命令,可以做哪些事?

技巧:HX内查看文件属性

项目管理器,选中文件,右键菜单,可以更快捷的查看文件属性。

技巧:快捷键切换

HBuilderX,支持市场上主流编辑器的快捷键方案,包含vscode、sublime Text、Eclipse、WebStorm

如需切换,请点击菜单【工具】【快捷键方案切换】

技巧:单项目窗体

HBuilderX, 项目管理器,默认可以显示多个项目列表。同时也支持单项目窗体(即项目管理器,只显示一个项目)。

在主窗体上,点击菜单【视图】【新建HBuilder窗体】,就可以新建一个单项目窗体。

在主窗体上,选中某个项目,右键菜单,点击【在新窗体中打开】,即可将项目在单项目窗体中打开。

收起阅读 »

招聘 uni-app开发工程师 (北京)

uniapp

招聘 uni app开发工程师
工作地点:北京 上地
学历:大专及以上
薪资范围:12K~20K 五险一金
职责描述:
1、负责基于H5、uni-App的手机APP 、小程序的设计与开发;
2、负责公司现有APP的开发、重构与优化;
3、参与公司级APP的发展方向的规划与设计;
4、参与APP研发技术的积累、学习、实践工作;
5、参与公司其他前端技术支持工作。
任职要求:
1、专科及以上学历,计算机、软件、设计等相关专业;
2、3年或以上手机端相关开发经验,一个以上项目跨平台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框架完成移动端及小程序开发;
8、注重用户体验,具有快速迭代和敏捷开发思维,具备快速学习能力;
9、良好沟通能力、团队合作精神,积极主动、服从安排,能承受较大压力,责任心和学习能力强,能独立分析问题及解决问题;
10、对IOS,Android 原生有实际开发经验的加分;
11、对后台开发(PHP、Node.js)有了解的加分;

简历请投递:chenzhe@emsys.cn

继续阅读 »

招聘 uni app开发工程师
工作地点:北京 上地
学历:大专及以上
薪资范围:12K~20K 五险一金
职责描述:
1、负责基于H5、uni-App的手机APP 、小程序的设计与开发;
2、负责公司现有APP的开发、重构与优化;
3、参与公司级APP的发展方向的规划与设计;
4、参与APP研发技术的积累、学习、实践工作;
5、参与公司其他前端技术支持工作。
任职要求:
1、专科及以上学历,计算机、软件、设计等相关专业;
2、3年或以上手机端相关开发经验,一个以上项目跨平台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框架完成移动端及小程序开发;
8、注重用户体验,具有快速迭代和敏捷开发思维,具备快速学习能力;
9、良好沟通能力、团队合作精神,积极主动、服从安排,能承受较大压力,责任心和学习能力强,能独立分析问题及解决问题;
10、对IOS,Android 原生有实际开发经验的加分;
11、对后台开发(PHP、Node.js)有了解的加分;

简历请投递:chenzhe@emsys.cn

收起阅读 »

uni-app返回页面不触发页面刷新问题 A页面到B页面B页面返回A页面刷新数问题

uni-app返回页面不触发页面刷新问题 A页面到B页面B页面返回A页面刷新数问题

A页面加入

onHide(){  
            console.log('this.ifOnShow=true')  
            this.ifOnShow=true  
        },  

onShow(){  
            if(this.ifOnShow){  
              //这是要刷新的数据  
                this.getUserRoleId()  
                this.getWorkDetails(this.orderDetails)  
                console.log('工单详情',this.orderDetails)  
            }  
        },  

data() {  
            return {  
              ifOnShow:false,  

    }  

} 

最后解决

我们在用 uni-app 开发前端时,有时在返回上一页后要刷新上一页的数据,如登录后返回上一页刷新登录状态。我们可以通过 uni.navigateBack 的成功回调函数来实现。具体实现方式如下:

要打开登录页面的主页面中的主要代码如下

<template>  
    <view>  
        <button class="cu-btn" @tap="toView('login/login')">登录</button>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            toView(page) {  
                uni.navigateTo({  
                    url: `/pages/${page}`  
                })  
            }  
        },  
        onLoad(option) {  
            console.info('调用了 onLoad:' + option)  
        }  
    }  
</script>  
登录页面主要代码如下  

<template>  
    <view>  
        <button class="cu-btn" @tap="handleLogin">立即登录</button>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleLogin() {  
                const delta = 1 // 返回的页面数  
                uni.navigateBack({  
                    delta: delta,  
                    success: () => {  
                        const pages = getCurrentPages() // 获取当前页面栈数组,第一个元素为首页,最后一个元素为当前页面  
                        let page = pages[Math.max(pages.length - 1 - delta, 0)] // 要返回到的页面,超过页面栈,则为首页  
                        page.onLoad(page.options) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据  
                    }  
                })  
            }  
        }  
    }  
</script>  
继续阅读 »

uni-app返回页面不触发页面刷新问题 A页面到B页面B页面返回A页面刷新数问题

A页面加入

onHide(){  
            console.log('this.ifOnShow=true')  
            this.ifOnShow=true  
        },  

onShow(){  
            if(this.ifOnShow){  
              //这是要刷新的数据  
                this.getUserRoleId()  
                this.getWorkDetails(this.orderDetails)  
                console.log('工单详情',this.orderDetails)  
            }  
        },  

data() {  
            return {  
              ifOnShow:false,  

    }  

} 

最后解决

我们在用 uni-app 开发前端时,有时在返回上一页后要刷新上一页的数据,如登录后返回上一页刷新登录状态。我们可以通过 uni.navigateBack 的成功回调函数来实现。具体实现方式如下:

要打开登录页面的主页面中的主要代码如下

<template>  
    <view>  
        <button class="cu-btn" @tap="toView('login/login')">登录</button>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            toView(page) {  
                uni.navigateTo({  
                    url: `/pages/${page}`  
                })  
            }  
        },  
        onLoad(option) {  
            console.info('调用了 onLoad:' + option)  
        }  
    }  
</script>  
登录页面主要代码如下  

<template>  
    <view>  
        <button class="cu-btn" @tap="handleLogin">立即登录</button>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleLogin() {  
                const delta = 1 // 返回的页面数  
                uni.navigateBack({  
                    delta: delta,  
                    success: () => {  
                        const pages = getCurrentPages() // 获取当前页面栈数组,第一个元素为首页,最后一个元素为当前页面  
                        let page = pages[Math.max(pages.length - 1 - delta, 0)] // 要返回到的页面,超过页面栈,则为首页  
                        page.onLoad(page.options) // 通过调用页面的 onLoad 里面的处理逻辑实现刷新数据  
                    }  
                })  
            }  
        }  
    }  
</script>  
收起阅读 »