HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

使用uniapp有感而发,并提出建议

我认为uniapp应该舍弃小程序兼容,全部精力做vue-native。我相信用不了多长时间uniapp绝对可以与react-native,flutter形成三足鼎立的态势,形成强大的vue-native生态。

我认为uniapp应该舍弃小程序兼容,全部精力做vue-native。我相信用不了多长时间uniapp绝对可以与react-native,flutter形成三足鼎立的态势,形成强大的vue-native生态。

easemob-websdk 不能使用

uni_app 环信 IM

通过 1。npm init -y

2.npm install easemob-websdk --save

引用时:import websdk from 'easemob-websdk'

报错如下 但是再vue-cli 项目里面不报错

通过 1。npm init -y

2.npm install easemob-websdk --save

引用时:import websdk from 'easemob-websdk'

报错如下 但是再vue-cli 项目里面不报错

求购买一款小说app 参考全民小说那种,可以换源

服务器不存小说数据,相当于一个小说搜索引擎。带广告位。参考 全民小说那种 带价来 q1258968020

服务器不存小说数据,相当于一个小说搜索引擎。带广告位。参考 全民小说那种 带价来 q1258968020

ios分享反复跳转及transport交付提示90046错误com.apple.developer.associated-domains

uniapp

这个东西花费了我一天时间
如果UniversalLinks没有配置对的话,微信会直接提示你错误,
可以分享微信,而且会反复跳转,基本上是manifest.json文件配置错误了,而且这个时候在Safari上是无法用UniversalLinks打开App的
一般情况都是com.apple.developer.associated-domains配置错误,我遇到的问题都是这个配置错误。
错误配置有很多,我贴个参考

"ios" : {  
                "privacyDescription" : {  
                    "NSPhotoLibraryUsageDescription" : "获取相册信息用于用户选择头像",  
                    "NSCameraUsageDescription" : "调用摄像头用于网页端登录"  
                },  
                "capabilities" : {  
                    "entitlements" : {  
                        "com.apple.developer.associated-domains" : [ "https://xxxx.xxxx.cn/" ]  
                    }  
                }  
            },

正确配置

"ios" : {  
                "privacyDescription" : {  
                    "NSPhotoLibraryUsageDescription" : "获取相册信息用于用户选择头像",  
                    "NSCameraUsageDescription" : "调用摄像头用于网页端登录"  
                },  
                "capabilities" : {  
                    "entitlements" : {  
                        "com.apple.developer.associated-domains" : [ "applinks:xxxx.xxxx.cn" ]  
                    }  
                }  
            },  

其中很容易多写“/”,“https://”等,这个改正之后,我这两个问题就解决了,并且用Safari可以打开app。
当然如果不用分享功能,直接关掉Associated Domains,并把manifest.json里面的capabilities去掉就行了

同时这个分享的问题在官方的示例APP:Hello uni-app里面也是存在的,官方的示例也是多次反复跳转,我一直也为uni-app开发就是这种情况,但是我用了MobLink的示例APP之后才发现只有第一次会反复跳转,之后再分享就不会出现反复跳转的问题了。

继续阅读 »

这个东西花费了我一天时间
如果UniversalLinks没有配置对的话,微信会直接提示你错误,
可以分享微信,而且会反复跳转,基本上是manifest.json文件配置错误了,而且这个时候在Safari上是无法用UniversalLinks打开App的
一般情况都是com.apple.developer.associated-domains配置错误,我遇到的问题都是这个配置错误。
错误配置有很多,我贴个参考

"ios" : {  
                "privacyDescription" : {  
                    "NSPhotoLibraryUsageDescription" : "获取相册信息用于用户选择头像",  
                    "NSCameraUsageDescription" : "调用摄像头用于网页端登录"  
                },  
                "capabilities" : {  
                    "entitlements" : {  
                        "com.apple.developer.associated-domains" : [ "https://xxxx.xxxx.cn/" ]  
                    }  
                }  
            },

正确配置

"ios" : {  
                "privacyDescription" : {  
                    "NSPhotoLibraryUsageDescription" : "获取相册信息用于用户选择头像",  
                    "NSCameraUsageDescription" : "调用摄像头用于网页端登录"  
                },  
                "capabilities" : {  
                    "entitlements" : {  
                        "com.apple.developer.associated-domains" : [ "applinks:xxxx.xxxx.cn" ]  
                    }  
                }  
            },  

其中很容易多写“/”,“https://”等,这个改正之后,我这两个问题就解决了,并且用Safari可以打开app。
当然如果不用分享功能,直接关掉Associated Domains,并把manifest.json里面的capabilities去掉就行了

同时这个分享的问题在官方的示例APP:Hello uni-app里面也是存在的,官方的示例也是多次反复跳转,我一直也为uni-app开发就是这种情况,但是我用了MobLink的示例APP之后才发现只有第一次会反复跳转,之后再分享就不会出现反复跳转的问题了。

收起阅读 »

【uniapp差量更新、热加载、热更新、热修复】uniapp增量更新解决方案~

热更新 差量更新

前言

各位D友大家好,调皮的杨大宝又回来了,虽然很久没在这里出现了,但是我一直在关注uniapp的成长。真的是越来越强大了。自从uniapp出生时分享过几次经验之后由于项目完结所以uniapp的使用暂时告一段落。偶尔回来一看之前的文章确实帮助了不少的D友获得很多肯定,顿感心头一暖。所以这次我决定又来搞事情啦~O(∩_∩)O哈哈~
差量更新h5+是支持的,之所以uniapp没有支持不是因为底层技术问题而是uniapp自身结构问题。我们知道uniapp是经过打包编译后运行的,h5+没有经过编译,所以文件、目录结构是稳定的,所以可以直接替换文件。uniapp只能编译后进行差量更新,即便你编译后也要必须保证编译配置(pages_path,和小程序一样需要在pages里注册页面路由)的完整。这个就比较费劲了。个人猜测官方没出uniapp差量更新方案估计是这个原因。既然找到原因那么就从这里出发开始搞吧。

第一步(变换开发模式)

把原有的单文件路由模式改成组件模式这样我们就不用考虑编译配置了。
目录结构


入口文件代码

<template>  
    <component :is="pageId" :options="options"></component>  
</template>  

<script>  
    //这里只是一个入口文件,不建议写业务代码.真正的页面代码以组件的形式引入便于管理和升级  

    //开始批量加载页面  
    const modulesFiles = require.context('@/pages/home/pages', true, /\.nvue$/);  
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {  
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')  
      const value = modulesFiles(modulePath)  
      modules[moduleName] = value.default  
      return modules  
    }, {})  
    export default {  
        components:modules,  
        data() {  
            return {  
                options:{},  
                name:'home',  
                pageId: 'index',  
                version:'1.0.0',  
            }  
        },  
        onLoad(options) {  
            console.log(options)  
            this.options = options;  
            this.pageId = options.pageId?options.pageId:'index';  
            //开始检查版本更新  
            uni.$emit('checkUpdateModule',{name:this.name,version:this.version})  
        },  
        methods: {  

        }  
    }  
</script>  

checkUpdateModule方法我写在了app.vue里面,代码如下

<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            // #ifdef APP-PLUS    
            let CheckedModuleArr = [];  
            uni.$on('checkUpdateModule',function(data){  
                if(!CheckedModuleArr.includes(data.name)){  
                    CheckedModuleArr.push(data.name)  
                    //plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {    
                        uni.request({    
                            url: 'http://192.168.1.144/',    
                            data: {    
                                version: data.version,    
                                name: data.name    
                            },    
                            success: (result) => {  
                                var data = result.data;    
                                if (data.update && data.wgtUrl) {    
                                    console.log(data);  
                                    uni.downloadFile({    
                                        url: data.wgtUrl,  
                                        success: (downloadResult) => {    
                                            if (downloadResult.statusCode === 200) {    
                                                plus.runtime.install(downloadResult.tempFilePath, {    
                                                    force: true   
                                                }, function() {    
                                                    console.log('install success...');    
                                                    //plus.runtime.restart();    
//有意思的是这种方式热加载热更新居然不用重启局生效,具体可自己把握  
                                                }, function(e) {    
                                                    console.error(e);   
                                                });    
                                            }else{  
                                                console.error('download fail...');  
                                            }    
                                        }    
                                    });    
                                }    
                            }    
                        });    
                    //});    
                }  
            })  
            // #endif  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>

第二步(制作wgtu包)

首先我们要先编译运行一下然后根据下图目录找到编译后的文件
以更新test模块为例

制作步骤参考 https://ask.dcloud.net.cn/article/199

注意

这样的话就可以进行差量更新了。
这里要注意的是 pages里面只需要注册每个模块的入口文件就可以了跳转也只需要跳转入口文件目录然后根据options参数进行动态加载组件方法参考:

//pageId 为组件名称(即文件名)。这里注意文件名不要和原有组件冲突  
uni.navigateTo({  
                    url:'/pages/home/index?pageId=page2'  
                })

ps

至此就结束了,个人测试没有问题,但是这种方法可能会带来性能上的损耗,自己看着办吧。

值得一提的是这种方式似乎更新完无需重启应用,真正达到无感升级。(具体各位自己再测吧)

其他功能插件:
1、uniapp图片裁剪插件
2、swiper + scroll-view 实现下拉刷新
3、单击back隐藏到后台
4、【插件、图表】7种图表漂亮丰富
5、小程序转uni-app、小程序移植uniapp经验分享~ 这个官方现在有更好的解决方案了,仅供参考

继续阅读 »

前言

各位D友大家好,调皮的杨大宝又回来了,虽然很久没在这里出现了,但是我一直在关注uniapp的成长。真的是越来越强大了。自从uniapp出生时分享过几次经验之后由于项目完结所以uniapp的使用暂时告一段落。偶尔回来一看之前的文章确实帮助了不少的D友获得很多肯定,顿感心头一暖。所以这次我决定又来搞事情啦~O(∩_∩)O哈哈~
差量更新h5+是支持的,之所以uniapp没有支持不是因为底层技术问题而是uniapp自身结构问题。我们知道uniapp是经过打包编译后运行的,h5+没有经过编译,所以文件、目录结构是稳定的,所以可以直接替换文件。uniapp只能编译后进行差量更新,即便你编译后也要必须保证编译配置(pages_path,和小程序一样需要在pages里注册页面路由)的完整。这个就比较费劲了。个人猜测官方没出uniapp差量更新方案估计是这个原因。既然找到原因那么就从这里出发开始搞吧。

第一步(变换开发模式)

把原有的单文件路由模式改成组件模式这样我们就不用考虑编译配置了。
目录结构


入口文件代码

<template>  
    <component :is="pageId" :options="options"></component>  
</template>  

<script>  
    //这里只是一个入口文件,不建议写业务代码.真正的页面代码以组件的形式引入便于管理和升级  

    //开始批量加载页面  
    const modulesFiles = require.context('@/pages/home/pages', true, /\.nvue$/);  
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {  
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')  
      const value = modulesFiles(modulePath)  
      modules[moduleName] = value.default  
      return modules  
    }, {})  
    export default {  
        components:modules,  
        data() {  
            return {  
                options:{},  
                name:'home',  
                pageId: 'index',  
                version:'1.0.0',  
            }  
        },  
        onLoad(options) {  
            console.log(options)  
            this.options = options;  
            this.pageId = options.pageId?options.pageId:'index';  
            //开始检查版本更新  
            uni.$emit('checkUpdateModule',{name:this.name,version:this.version})  
        },  
        methods: {  

        }  
    }  
</script>  

checkUpdateModule方法我写在了app.vue里面,代码如下

<script>  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            // #ifdef APP-PLUS    
            let CheckedModuleArr = [];  
            uni.$on('checkUpdateModule',function(data){  
                if(!CheckedModuleArr.includes(data.name)){  
                    CheckedModuleArr.push(data.name)  
                    //plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {    
                        uni.request({    
                            url: 'http://192.168.1.144/',    
                            data: {    
                                version: data.version,    
                                name: data.name    
                            },    
                            success: (result) => {  
                                var data = result.data;    
                                if (data.update && data.wgtUrl) {    
                                    console.log(data);  
                                    uni.downloadFile({    
                                        url: data.wgtUrl,  
                                        success: (downloadResult) => {    
                                            if (downloadResult.statusCode === 200) {    
                                                plus.runtime.install(downloadResult.tempFilePath, {    
                                                    force: true   
                                                }, function() {    
                                                    console.log('install success...');    
                                                    //plus.runtime.restart();    
//有意思的是这种方式热加载热更新居然不用重启局生效,具体可自己把握  
                                                }, function(e) {    
                                                    console.error(e);   
                                                });    
                                            }else{  
                                                console.error('download fail...');  
                                            }    
                                        }    
                                    });    
                                }    
                            }    
                        });    
                    //});    
                }  
            })  
            // #endif  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>

第二步(制作wgtu包)

首先我们要先编译运行一下然后根据下图目录找到编译后的文件
以更新test模块为例

制作步骤参考 https://ask.dcloud.net.cn/article/199

注意

这样的话就可以进行差量更新了。
这里要注意的是 pages里面只需要注册每个模块的入口文件就可以了跳转也只需要跳转入口文件目录然后根据options参数进行动态加载组件方法参考:

//pageId 为组件名称(即文件名)。这里注意文件名不要和原有组件冲突  
uni.navigateTo({  
                    url:'/pages/home/index?pageId=page2'  
                })

ps

至此就结束了,个人测试没有问题,但是这种方法可能会带来性能上的损耗,自己看着办吧。

值得一提的是这种方式似乎更新完无需重启应用,真正达到无感升级。(具体各位自己再测吧)

其他功能插件:
1、uniapp图片裁剪插件
2、swiper + scroll-view 实现下拉刷新
3、单击back隐藏到后台
4、【插件、图表】7种图表漂亮丰富
5、小程序转uni-app、小程序移植uniapp经验分享~ 这个官方现在有更好的解决方案了,仅供参考

收起阅读 »

微信支付提示当前页面未注册

微信支付

单页应用微信浏览器不能正确的刷新当前页面的 href。

解决办法是进入支付页面后强制刷新一次当前页面。

这里需要注意的一点是,在微信支付的后台配置支付路径时,注意他要求配置的是目录!!

意思是如果你的支付页面是 /pages/pay/pay 那你应该配置的目录为 /pages/pay/ 目录末尾有斜杆!

ps:真的坑。

下面是代码:

               onLoad(options) {  
            // 1. 初始化页面数据,获取当前欠款、预付金(仅作展示用)  
            util.loading('初始化支付...');  
                        // 延迟 0.5 秒再刷新页面。不然刷新不起作用  
            setTimeout(this.reloadUrl,500);  
        },  
        methods: {  
            reloadUrl(){  
                let key = 'wxPay_flag';  
                let that = this;  
                if (!cache.get(key)) {  
                                        // 设置缓存标识  
                    cache.put(key,'flag');  
                    that.newHref = 'rm';  
                    uni.hideLoading();  
                    that.initPage();  
                    // 2. 获取 js api 签名  
                    that.getSign();  
                }else{  
                    cache.remove(key);  
                                        // 刷新页面  
                    window.location.reload();  
                }  
            },  
继续阅读 »

单页应用微信浏览器不能正确的刷新当前页面的 href。

解决办法是进入支付页面后强制刷新一次当前页面。

这里需要注意的一点是,在微信支付的后台配置支付路径时,注意他要求配置的是目录!!

意思是如果你的支付页面是 /pages/pay/pay 那你应该配置的目录为 /pages/pay/ 目录末尾有斜杆!

ps:真的坑。

下面是代码:

               onLoad(options) {  
            // 1. 初始化页面数据,获取当前欠款、预付金(仅作展示用)  
            util.loading('初始化支付...');  
                        // 延迟 0.5 秒再刷新页面。不然刷新不起作用  
            setTimeout(this.reloadUrl,500);  
        },  
        methods: {  
            reloadUrl(){  
                let key = 'wxPay_flag';  
                let that = this;  
                if (!cache.get(key)) {  
                                        // 设置缓存标识  
                    cache.put(key,'flag');  
                    that.newHref = 'rm';  
                    uni.hideLoading();  
                    that.initPage();  
                    // 2. 获取 js api 签名  
                    that.getSign();  
                }else{  
                    cache.remove(key);  
                                        // 刷新页面  
                    window.location.reload();  
                }  
            },  
收起阅读 »

长期承接uniapp前端,后端(JAVA+PHP);H5,小程序,APP 外包 uniapp

外包

只接项目或合作,一般的单个问题不接

只接项目或合作,一般的单个问题不接

video组件seek的问题

video

问题:
微信小程序pc模拟器里面,seek不会触发video组件的@play事件
真机调试会重复触发

这是我的小小经验

问题:
微信小程序pc模拟器里面,seek不会触发video组件的@play事件
真机调试会重复触发

这是我的小小经验

终于把人人商城打包好了

1、支付宝原生支付,微信原生支付
2、分享微信,QQ
3、微信登录
4、退出App
5、清理App缓存
6、个推推送(订单推送)
有需要沟通的 M我把 vx 185341954

1、支付宝原生支付,微信原生支付
2、分享微信,QQ
3、微信登录
4、退出App
5、清理App缓存
6、个推推送(订单推送)
有需要沟通的 M我把 vx 185341954

Android平台 storage性能优化说明

Storage

HBuilderX2.6.6+起,Android平台对App本地storage数据存储进行了性能优化,包括plus.storage和uni的storage相关api,主要包括以下改进:

  • 数据存储方式优化
    之前的storage数据存储到Android系统的SharedPreferences中,现在修改为存储到数据库文件中。
    SharedPreferences 是 Android 平台为应用开发者提供的一个轻量级的存储辅助类,不适合存储大量的数据,当数据量过大时会影响性能甚至引发ANR。
    数据库文件存储则可以更好的支持大量数据存储,但需要注意JS与原生通讯时传输数据时也存在性能限制,因此不要一次存储大量的数据,建议每次存储数据不要超过100K。
  • 新增异步操作接口
    原来5+ API中plus.storage只提供同步操作接口,uni-app中的异步接口在App端也是封装同步接口实现的,之前并非真正异步。
    新版本已提供异步接口读取、保存数据,避免同步接口阻塞JS。uni-app中的异步接口也调整为真正的异步操作实现。

通过对比测试,以上优化单次读取速度提升10%,并发300次读取速度提升70%

应用升级向下兼容处理

为了确保应用的新版平滑兼容,当基于新版打包的App升级覆盖老版本App时,会在应用启动时自动将原来存储在SharedPreferences中的数据迁移到数据库文件中,开发者不需要做特殊处理就可以读取到老版本保存的数据。
如果老版App在手机端已经保存了大量数据,覆盖升级新版后,第一次运行新版会因为迁移数据而导致splash界面显示时间稍微变长一些。

注意事项
SharedPreferences方式存储的数据向数据库文件存储的升级,是不可逆的过程。
举个极端例子,开发者已有app版本1.0,并且已经在手机端存储了storage数据,然后开发者使用HBuilderX2.6.6+打包生成2.0的app,新app覆盖安装1.0版后,将storage数据从SharedPreferences迁移到了数据库文件。接着开发者又回退了HBuilderX版本,使用HBuilderX2.6.6-的版本,打包生成了3.0app,那么这个3.0app覆盖安装到手机上后,使用plus.storage和uni的storage相关api将无法读取历史数据,相关api会继续操作SharedPreferences方式存储的数据。

plus.storage新增异步接口的清单如下:

uni的storage操作api无变化,见:https://uniapp.dcloud.io/api/storage/storage?id=setstorage

继续阅读 »

HBuilderX2.6.6+起,Android平台对App本地storage数据存储进行了性能优化,包括plus.storage和uni的storage相关api,主要包括以下改进:

  • 数据存储方式优化
    之前的storage数据存储到Android系统的SharedPreferences中,现在修改为存储到数据库文件中。
    SharedPreferences 是 Android 平台为应用开发者提供的一个轻量级的存储辅助类,不适合存储大量的数据,当数据量过大时会影响性能甚至引发ANR。
    数据库文件存储则可以更好的支持大量数据存储,但需要注意JS与原生通讯时传输数据时也存在性能限制,因此不要一次存储大量的数据,建议每次存储数据不要超过100K。
  • 新增异步操作接口
    原来5+ API中plus.storage只提供同步操作接口,uni-app中的异步接口在App端也是封装同步接口实现的,之前并非真正异步。
    新版本已提供异步接口读取、保存数据,避免同步接口阻塞JS。uni-app中的异步接口也调整为真正的异步操作实现。

通过对比测试,以上优化单次读取速度提升10%,并发300次读取速度提升70%

应用升级向下兼容处理

为了确保应用的新版平滑兼容,当基于新版打包的App升级覆盖老版本App时,会在应用启动时自动将原来存储在SharedPreferences中的数据迁移到数据库文件中,开发者不需要做特殊处理就可以读取到老版本保存的数据。
如果老版App在手机端已经保存了大量数据,覆盖升级新版后,第一次运行新版会因为迁移数据而导致splash界面显示时间稍微变长一些。

注意事项
SharedPreferences方式存储的数据向数据库文件存储的升级,是不可逆的过程。
举个极端例子,开发者已有app版本1.0,并且已经在手机端存储了storage数据,然后开发者使用HBuilderX2.6.6+打包生成2.0的app,新app覆盖安装1.0版后,将storage数据从SharedPreferences迁移到了数据库文件。接着开发者又回退了HBuilderX版本,使用HBuilderX2.6.6-的版本,打包生成了3.0app,那么这个3.0app覆盖安装到手机上后,使用plus.storage和uni的storage相关api将无法读取历史数据,相关api会继续操作SharedPreferences方式存储的数据。

plus.storage新增异步接口的清单如下:

uni的storage操作api无变化,见:https://uniapp.dcloud.io/api/storage/storage?id=setstorage

收起阅读 »

HBuilderX 使用eslint实时校验、自动修复代码错误(适用于HBuilderX 2.6.8+)

eslint一键修复 eslint

HBuilderX 2.6.8+版本起,新增eslint 实时校验、自动修复错误的功能。注意:此文不适用于2.6.8之前的版本

插件下载地址

eslint-js插件下载地址
eslint-vue插件下载地址


1. eslint 文件保存,实时校验、自动修复错误功能说明

  1. 使用此功能,必须安装eslint-jseslint-vue插件。(菜单【工具】【插件安装】)
  2. vue-cli项目,需要安装eslint库,并配置eslint规则.
  3. 若满足上述条件,当编写完代码,保存时,若代码中存在错误,自动修复;

2. 插件设置

2.6.11版本,支持自定义配置:保存时自动修复启用实时校验;见下图

特别说明: 实时校验功能,默认未开启,需要手动开启此功能

3. 特别说明

特别说明: eslint自动修复功能,并不能修复所有的语法错误。
比如定义了某个变量,但未使用,eslint校验保存,自动修复功能并不能修复此类错误。

4. 普通项目:eslint规则配置

点击菜单【工具】【插件配置】【eslint-js】,编辑.eslintrc.js文件

eslint规则:https://eslint.org/docs/rules/

.eslintrc.js配置文件示例

module.exports = {  
    "plugins": [  
        "html"  
    ],  
    "parserOptions": {  
        "ecmaVersion": 2018,  
        "sourceType": "module",  
        "ecmaFeatures": {  
            "jsx": true  
        },  
        "allowImportExportEverywhere": false  
    },  
    rules: {  
        "no-alert": 0,  
        "semi": [2, "always"],  
        "no-multi-spaces": "error",  
       "quotes": ["error", "single"]  
    }  
}

示例:使用eslint, 删除多余的空格

5. vue-cli项目:eslint安装、配置

$ npm install --save eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

安装完成后,在vue-cli项目根目录,创建.eslintrc.js文件

备注:(注意:项目下eslint规则会覆盖HBuilderX编辑器eslint插件中的规则

eslint-plugin-vue配置文件与规则:eslint-plugin-vue官方教程

.eslintrc.js配置文件示例

module.exports = {  
    extends: [  
        'plugin:vue/recommended'  
    ],  
    rules: {  
        "no-alert": 0,  
        "no-multi-spaces": "error", // 禁止多个空格   
        "semi": [2, "always"] ,// 自动补充分号  
       "quotes": ["error", "single"] // 使用单引号  
    }  
}

示例:使用eslint, 自动补充分号

6. 以uni-app项目为例,配置eslint规则,校验vue文件

特别说明:

  • vue文件,校验规则,需要从eslint-vue插件中配置。
  • 菜单【工具】【插件配置】【eslint-vue】【.eslintrc.js】,编辑.eslintrc.js文件

7. vue-cli 项目demo

附件中的zip包,为vue-cli项目demo。因为node_modules太大,所以未包含node_modules。解压zip后,请执行npm install安装node_modules

继续阅读 »

HBuilderX 2.6.8+版本起,新增eslint 实时校验、自动修复错误的功能。注意:此文不适用于2.6.8之前的版本

插件下载地址

eslint-js插件下载地址
eslint-vue插件下载地址


1. eslint 文件保存,实时校验、自动修复错误功能说明

  1. 使用此功能,必须安装eslint-jseslint-vue插件。(菜单【工具】【插件安装】)
  2. vue-cli项目,需要安装eslint库,并配置eslint规则.
  3. 若满足上述条件,当编写完代码,保存时,若代码中存在错误,自动修复;

2. 插件设置

2.6.11版本,支持自定义配置:保存时自动修复启用实时校验;见下图

特别说明: 实时校验功能,默认未开启,需要手动开启此功能

3. 特别说明

特别说明: eslint自动修复功能,并不能修复所有的语法错误。
比如定义了某个变量,但未使用,eslint校验保存,自动修复功能并不能修复此类错误。

4. 普通项目:eslint规则配置

点击菜单【工具】【插件配置】【eslint-js】,编辑.eslintrc.js文件

eslint规则:https://eslint.org/docs/rules/

.eslintrc.js配置文件示例

module.exports = {  
    "plugins": [  
        "html"  
    ],  
    "parserOptions": {  
        "ecmaVersion": 2018,  
        "sourceType": "module",  
        "ecmaFeatures": {  
            "jsx": true  
        },  
        "allowImportExportEverywhere": false  
    },  
    rules: {  
        "no-alert": 0,  
        "semi": [2, "always"],  
        "no-multi-spaces": "error",  
       "quotes": ["error", "single"]  
    }  
}

示例:使用eslint, 删除多余的空格

5. vue-cli项目:eslint安装、配置

$ npm install --save eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

安装完成后,在vue-cli项目根目录,创建.eslintrc.js文件

备注:(注意:项目下eslint规则会覆盖HBuilderX编辑器eslint插件中的规则

eslint-plugin-vue配置文件与规则:eslint-plugin-vue官方教程

.eslintrc.js配置文件示例

module.exports = {  
    extends: [  
        'plugin:vue/recommended'  
    ],  
    rules: {  
        "no-alert": 0,  
        "no-multi-spaces": "error", // 禁止多个空格   
        "semi": [2, "always"] ,// 自动补充分号  
       "quotes": ["error", "single"] // 使用单引号  
    }  
}

示例:使用eslint, 自动补充分号

6. 以uni-app项目为例,配置eslint规则,校验vue文件

特别说明:

  • vue文件,校验规则,需要从eslint-vue插件中配置。
  • 菜单【工具】【插件配置】【eslint-vue】【.eslintrc.js】,编辑.eslintrc.js文件

7. vue-cli 项目demo

附件中的zip包,为vue-cli项目demo。因为node_modules太大,所以未包含node_modules。解压zip后,请执行npm install安装node_modules

收起阅读 »

Android原生蓝牙插件(module)相关项目

uniapp原生插件 离线打包 蓝牙

只提供插件,联系:1701119520

只提供插件,联系:1701119520