HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

解决uni-app的pages.json的模块化及模块热重载的问题

uni-pages-hot-modules

uni-app的pages.json的模块化及模块热重载

解决uni-app的pages.json无法模块化的问题,并且解决模块热重载和缓存的问题

WOW!

0.1.0版本之后,直接可以使用require达到热更新,只需要引入高阶函数hot即可
废弃hotRequire方法,但是您仍可以使用,使用方式可以查看之前版本的说明

安装

npm i uni-pages-hot-modules -S

pages.json模块化及使用了uni-pages-hot-modules进行模块热重载的uni-app示例项目

注意!

  • 发现uni-app每次更新对pages.js的支持度会不同,比如某个版本竟然注释掉了对pages.js的热重载依赖,这里做了兼容。只要uni-app不推翻自己的设计,此功能长久有效
  • 使用uni-pages-hot-modules引入模块必须输入全的文件名包括后缀,否则将不会进行热重载

uni-pages-hot-modules做了什么

// 做了非常轻便的事情,相当于  
loader.addDependency(modulePath)  
delete require.cache[modulePath]  
require(modulePath)

uni-app的“彩蛋”

uni-app自带一个webpack loader钩子文件pages.js,在项目src目录下建立pages.js(与pages.json同级)即可生效(pages.json仍然需要存在,作为初始值,建议存放一些和路由无关的配置)。
pages.js要求CommonJS规范,直接通过module.exports输出一个钩子函数。

pages.js输出的函数参数

pagesJson < Object >

pages.json的解析内容

pages.js的模块化

由于是js,就可以实现模块的依赖,如果不考虑模块的热重载问题,可以不使用hot高阶函数
但是大多数情况下,需要依赖的模块也可以通过热重载更新pages.js,由于不是webpack的标准运行依赖,所以需要手动添加依赖项(使用addDependency),并且需要每次清除模块的缓存,因此uni-pages-hot-modules就诞生了

pages.js示例

const { hot } = require('uni-pages-hot-modules')  
module.exports = hot((pagesJson) => {  
    let basePages = []  
    let baseSubPackages = []  

    return {  
        // 合并pages.json的内容  
        ...pagesJson,  
        pages:[  
            ...basePages,  
            ...require('./page_modules/tabbar.js'),  
            ...require('./page_modules/component.js'),  
            ...require('./page_modules/appPlus.js'),  
            ...require('./page_modules/module1.js')  
        ],  
        subPackages:[  
            ...baseSubPackages,  
            ...require('./subpackage_modules/api.js'),  
            ...require('./subpackage_modules/extUI.js'),  
            ...require('./subpackage_modules/template.js')  
        ]  
    }  
})  

模块的规范

被加载的模块也是CommonJS规范,通过module.exports输出

module1.js示例

module.exports=[  
   {  
       "path": "pages/sub/sub",  
       "style": {  
           "navigationBarTitleText": "sub"  
       }  
   },  
   // 在模块里继续引入其他子模块  
   ...require('./some-sub-module1.js')  
]

API

context {function}

模拟webpack的require.context
与webpack不同的地方是不会将调用此方法的模块输出,没有id属性,resolve方法返回绝对路径

const files = require.context('.', true, /\.js$/)  
const modules = []  
files.keys().forEach(key => {  
    if (key === './index.js') return  
    const item = files(key)  
    modules.push(...item)  
})  
module.exports = modules

缺陷:require.context是模拟的,所以在支持热更新时也有一定缺陷,就是新创建的文件不支持热更新,需要重新编译即可(或者手动触发一次调用require.context的文件的更新也可以达到对新文件的热更新激活),删除和修改原有文件可以很好的支持热更新

其他

不支持条件编译,需要自己通过process.env.VUE_APP_PLATFORM来判断(不建议使用process.env.UNI_PLATFORM,因为在webpack客户端包里无法读取此环境变量,除非设置DefinePlugin),自定义环境的需要自己添加env变量来判断

继续阅读 »

uni-pages-hot-modules

uni-app的pages.json的模块化及模块热重载

解决uni-app的pages.json无法模块化的问题,并且解决模块热重载和缓存的问题

WOW!

0.1.0版本之后,直接可以使用require达到热更新,只需要引入高阶函数hot即可
废弃hotRequire方法,但是您仍可以使用,使用方式可以查看之前版本的说明

安装

npm i uni-pages-hot-modules -S

pages.json模块化及使用了uni-pages-hot-modules进行模块热重载的uni-app示例项目

注意!

  • 发现uni-app每次更新对pages.js的支持度会不同,比如某个版本竟然注释掉了对pages.js的热重载依赖,这里做了兼容。只要uni-app不推翻自己的设计,此功能长久有效
  • 使用uni-pages-hot-modules引入模块必须输入全的文件名包括后缀,否则将不会进行热重载

uni-pages-hot-modules做了什么

// 做了非常轻便的事情,相当于  
loader.addDependency(modulePath)  
delete require.cache[modulePath]  
require(modulePath)

uni-app的“彩蛋”

uni-app自带一个webpack loader钩子文件pages.js,在项目src目录下建立pages.js(与pages.json同级)即可生效(pages.json仍然需要存在,作为初始值,建议存放一些和路由无关的配置)。
pages.js要求CommonJS规范,直接通过module.exports输出一个钩子函数。

pages.js输出的函数参数

pagesJson < Object >

pages.json的解析内容

pages.js的模块化

由于是js,就可以实现模块的依赖,如果不考虑模块的热重载问题,可以不使用hot高阶函数
但是大多数情况下,需要依赖的模块也可以通过热重载更新pages.js,由于不是webpack的标准运行依赖,所以需要手动添加依赖项(使用addDependency),并且需要每次清除模块的缓存,因此uni-pages-hot-modules就诞生了

pages.js示例

const { hot } = require('uni-pages-hot-modules')  
module.exports = hot((pagesJson) => {  
    let basePages = []  
    let baseSubPackages = []  

    return {  
        // 合并pages.json的内容  
        ...pagesJson,  
        pages:[  
            ...basePages,  
            ...require('./page_modules/tabbar.js'),  
            ...require('./page_modules/component.js'),  
            ...require('./page_modules/appPlus.js'),  
            ...require('./page_modules/module1.js')  
        ],  
        subPackages:[  
            ...baseSubPackages,  
            ...require('./subpackage_modules/api.js'),  
            ...require('./subpackage_modules/extUI.js'),  
            ...require('./subpackage_modules/template.js')  
        ]  
    }  
})  

模块的规范

被加载的模块也是CommonJS规范,通过module.exports输出

module1.js示例

module.exports=[  
   {  
       "path": "pages/sub/sub",  
       "style": {  
           "navigationBarTitleText": "sub"  
       }  
   },  
   // 在模块里继续引入其他子模块  
   ...require('./some-sub-module1.js')  
]

API

context {function}

模拟webpack的require.context
与webpack不同的地方是不会将调用此方法的模块输出,没有id属性,resolve方法返回绝对路径

const files = require.context('.', true, /\.js$/)  
const modules = []  
files.keys().forEach(key => {  
    if (key === './index.js') return  
    const item = files(key)  
    modules.push(...item)  
})  
module.exports = modules

缺陷:require.context是模拟的,所以在支持热更新时也有一定缺陷,就是新创建的文件不支持热更新,需要重新编译即可(或者手动触发一次调用require.context的文件的更新也可以达到对新文件的热更新激活),删除和修改原有文件可以很好的支持热更新

其他

不支持条件编译,需要自己通过process.env.VUE_APP_PLATFORM来判断(不建议使用process.env.UNI_PLATFORM,因为在webpack客户端包里无法读取此环境变量,除非设置DefinePlugin),自定义环境的需要自己添加env变量来判断

收起阅读 »

[uView UI重磅推出,完全免费开源] uView UI,是uniapp生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水

ui框架 UI

重大更新【文档支持在线预览示例】

抢先预览: https://www.uviewui.com

概览

历时数月开发,uView终于迎来了要和大家第一次见面的重要时刻。
uView文档和源码完全开源免费,为uniapp生态优秀、成熟的UI框架,拥有大量的组件和JS工具库,每一个组件都经过精心打磨和推敲,外观惊艳,性能优异。
uView文档异常详细,为您想好每一处细节,提供大量示例和说明,让您轻松上手,无坑可踩。

官网

网址: https://www.uviewui.com

微信小程序演示

请用微信扫码,即可体验最新版演示

关于文档

网址: https://www.uviewui.com
uView的每一个组件和JS工具,模板等,都有详细的文档说明,并且文档完美适配移动端,让您随时随地,无忧无虑的查询文档。
uView的文档有众多的示例和说明,每一处可能会踩坑的地方,都有特别说明,让您上手简单,使用无忧。

关于组件

uView为您考虑到了开发的整个生命周期,众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用:
[ Color 色彩 ] · [ Icon 图标 ] · [ Button 按钮 ] · [ Layout 布局 ] · [ Cell 单元格 ] · [ Badge 徽标数 ] · [ Tag 标签 ] · [ Keyboard 键盘 ] · [ Picker 选择器 ] · [ Rate 评分 ] · [ Search 搜索 ] · [ NumberBox 步进器 ] · [ Upload 上传 ] · [ VerificationCode 验证码倒计时 ] · [ Field 输入框 ] · [ checkbox 复选框 ] · [ Radio 单选框 ] · [ Switch 开关选择器 ] · [ Progress 进度条 ] · [ Table 表格 ] · [ CountDown 倒计时 ] · [ CountTo 数字滚动 ] · [ ActionSheet 操作菜单 ] · [ AlertTips 警告提示 ] · [ Toast 消息提示 ] · [ NoticeBar 滚动通知 ] · [ TopTips 顶部提示 ] · [ SwipeAction 滑动单元格 ] · [ Collapse 折叠面板 ] · [ Popup 弹出层 ] · [ Mask 遮罩层 ] · [ NoNetwork 无网络提示 ] · [ Grid 宫格布局 ] · [ Swiper 轮播图 ] · [ TimeLine 时间轴 ] · [ Skeleton 骨架屏 ] · [ Sticky 吸顶 ] · [ Waterfall 瀑布流 ] · [ Tabs 标签 ] · [ IndexList 索引列表 ] · [ Subsection 分段器 ] · [ Steps 步骤条 ] · [ Empty 内容为空 ] · [ Section 查看更多 ] · [ MessageInput 验证码输入 ] · [ AvatarCropper 头像裁剪 ] · [ Loadmore 加载更多 ] · [ ReadMore 展开阅读更多 ] · [ LazyLoad 懒加载 ] · [ Gap 间隔槽 ] · [ Avatar 头像 ] · [ Link 超链接 ] · [ loading 加载动画 ]

关于JS工具

uView有众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨:
[ Http 请求 ] · [ globalVariable 全局变量 ] · [ TimeFormat 时间格式化 ] · [ Route 路由跳转 ] · [ RandomArray 数组乱序 ] · [ ColorSwitch 颜色转换 ] · [ Color 颜色值 ] · [ QueryParams 对象转URL参数 ] · [ Test 规则校验 ] · [ Md5 md5加密 ] · [ Random 随机数值 ] · [ Trim 去除空格 ] · [ getRect 节点信息 ] · [ MpShare 小程序分享 ]

关于模板

uView目前已有数量众多的优秀模板,众多的模板正在陆续加入中……

开源免费

uView采用MIT许可证,您可以免费自由使用,文档和源码开源免费,不收任何费用!

继续阅读 »

重大更新【文档支持在线预览示例】

抢先预览: https://www.uviewui.com

概览

历时数月开发,uView终于迎来了要和大家第一次见面的重要时刻。
uView文档和源码完全开源免费,为uniapp生态优秀、成熟的UI框架,拥有大量的组件和JS工具库,每一个组件都经过精心打磨和推敲,外观惊艳,性能优异。
uView文档异常详细,为您想好每一处细节,提供大量示例和说明,让您轻松上手,无坑可踩。

官网

网址: https://www.uviewui.com

微信小程序演示

请用微信扫码,即可体验最新版演示

关于文档

网址: https://www.uviewui.com
uView的每一个组件和JS工具,模板等,都有详细的文档说明,并且文档完美适配移动端,让您随时随地,无忧无虑的查询文档。
uView的文档有众多的示例和说明,每一处可能会踩坑的地方,都有特别说明,让您上手简单,使用无忧。

关于组件

uView为您考虑到了开发的整个生命周期,众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用:
[ Color 色彩 ] · [ Icon 图标 ] · [ Button 按钮 ] · [ Layout 布局 ] · [ Cell 单元格 ] · [ Badge 徽标数 ] · [ Tag 标签 ] · [ Keyboard 键盘 ] · [ Picker 选择器 ] · [ Rate 评分 ] · [ Search 搜索 ] · [ NumberBox 步进器 ] · [ Upload 上传 ] · [ VerificationCode 验证码倒计时 ] · [ Field 输入框 ] · [ checkbox 复选框 ] · [ Radio 单选框 ] · [ Switch 开关选择器 ] · [ Progress 进度条 ] · [ Table 表格 ] · [ CountDown 倒计时 ] · [ CountTo 数字滚动 ] · [ ActionSheet 操作菜单 ] · [ AlertTips 警告提示 ] · [ Toast 消息提示 ] · [ NoticeBar 滚动通知 ] · [ TopTips 顶部提示 ] · [ SwipeAction 滑动单元格 ] · [ Collapse 折叠面板 ] · [ Popup 弹出层 ] · [ Mask 遮罩层 ] · [ NoNetwork 无网络提示 ] · [ Grid 宫格布局 ] · [ Swiper 轮播图 ] · [ TimeLine 时间轴 ] · [ Skeleton 骨架屏 ] · [ Sticky 吸顶 ] · [ Waterfall 瀑布流 ] · [ Tabs 标签 ] · [ IndexList 索引列表 ] · [ Subsection 分段器 ] · [ Steps 步骤条 ] · [ Empty 内容为空 ] · [ Section 查看更多 ] · [ MessageInput 验证码输入 ] · [ AvatarCropper 头像裁剪 ] · [ Loadmore 加载更多 ] · [ ReadMore 展开阅读更多 ] · [ LazyLoad 懒加载 ] · [ Gap 间隔槽 ] · [ Avatar 头像 ] · [ Link 超链接 ] · [ loading 加载动画 ]

关于JS工具

uView有众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨:
[ Http 请求 ] · [ globalVariable 全局变量 ] · [ TimeFormat 时间格式化 ] · [ Route 路由跳转 ] · [ RandomArray 数组乱序 ] · [ ColorSwitch 颜色转换 ] · [ Color 颜色值 ] · [ QueryParams 对象转URL参数 ] · [ Test 规则校验 ] · [ Md5 md5加密 ] · [ Random 随机数值 ] · [ Trim 去除空格 ] · [ getRect 节点信息 ] · [ MpShare 小程序分享 ]

关于模板

uView目前已有数量众多的优秀模板,众多的模板正在陆续加入中……

开源免费

uView采用MIT许可证,您可以免费自由使用,文档和源码开源免费,不收任何费用!

收起阅读 »

unicloud中require('@alicloud/pop-core');是不需要npm install

uniCloud

发现在unicloud的云函数中使用require('@alicloud/pop-core');是可以直接使用。 不需要npm install

发现在unicloud的云函数中使用require('@alicloud/pop-core');是可以直接使用。 不需要npm install

关于input的开发(仅安卓,ios)

input

input上推通过设置adjust-position来是否上推页面。
为true时,上推input框和背景。为false时,不上推input框和背景。

那么需要上推input,不上推背景时改如何处理?

比如存在自定义导航栏时,不想其被上推。
可以使用subNvue+input的方式去处理。

相当于将input存在的subNvue页面上推,而不影响背景页面。

一些兼容处理方案:
上推时input组件软键盘和光标之间的距离。通过设置padding
苹果存在tabbar时会多推出高度。通过设置cursor-spacing

相关示例

继续阅读 »

input上推通过设置adjust-position来是否上推页面。
为true时,上推input框和背景。为false时,不上推input框和背景。

那么需要上推input,不上推背景时改如何处理?

比如存在自定义导航栏时,不想其被上推。
可以使用subNvue+input的方式去处理。

相当于将input存在的subNvue页面上推,而不影响背景页面。

一些兼容处理方案:
上推时input组件软键盘和光标之间的距离。通过设置padding
苹果存在tabbar时会多推出高度。通过设置cursor-spacing

相关示例

收起阅读 »

video用着真难受

VideoPlayer m3u8 video

真的官方的video太难用了,不能自己定制皮肤,花了几天时间自己重做了套皮肤,唯一的败笔就是加载的时候那个绿色的圆圈加载条格格不入,使用m3u8格式播放的时候,不论是覆盖,还是阻止事件冒泡, 还是关闭手势控制,只要进行了手势操作,过几秒视频都会卡在加载状态。

使用webview来做吧,也是各种问题,很难解决,按照文档把html文件放在 hybrid\html 目录下昨天刚开始的时候打开webview就是找不到本地HTML文件,后面不知怎么就正常了,然而今天编译打开过后又找不到html文件了,找到文件全靠运气,在App中网页能跟App通信,App不能给网页发送消息,唯一的方法就是通过webview中的方法在网页中运行js来进行app跟普通HTML通信, 而且在H5中不支持通信,又得用其他方案来进行通信,简直难受,真的无力吐槽,希望官方能够重视下这块,在项目开发中99%的问题都能找到其他方案解决,就视频这块真的费尽心思都没能够解决一直卡着

继续阅读 »

真的官方的video太难用了,不能自己定制皮肤,花了几天时间自己重做了套皮肤,唯一的败笔就是加载的时候那个绿色的圆圈加载条格格不入,使用m3u8格式播放的时候,不论是覆盖,还是阻止事件冒泡, 还是关闭手势控制,只要进行了手势操作,过几秒视频都会卡在加载状态。

使用webview来做吧,也是各种问题,很难解决,按照文档把html文件放在 hybrid\html 目录下昨天刚开始的时候打开webview就是找不到本地HTML文件,后面不知怎么就正常了,然而今天编译打开过后又找不到html文件了,找到文件全靠运气,在App中网页能跟App通信,App不能给网页发送消息,唯一的方法就是通过webview中的方法在网页中运行js来进行app跟普通HTML通信, 而且在H5中不支持通信,又得用其他方案来进行通信,简直难受,真的无力吐槽,希望官方能够重视下这块,在项目开发中99%的问题都能找到其他方案解决,就视频这块真的费尽心思都没能够解决一直卡着

收起阅读 »

uni-app真机运行iOS 出现无法验证app解决方法

真机运行

第一步:断开网络连接
第二步:第二步,打开设置,找到Safari浏览器(苹果自带浏览器)
第三步:清理历史记录和网站数据
第四步:回到桌面打开应用,应用会闪退一下
第五步:打开网络,重新打开app。
如果不行就多重复操作几次

第一步:断开网络连接
第二步:第二步,打开设置,找到Safari浏览器(苹果自带浏览器)
第三步:清理历史记录和网站数据
第四步:回到桌面打开应用,应用会闪退一下
第五步:打开网络,重新打开app。
如果不行就多重复操作几次

uni-app打开微信扫一扫

Native.JS 扫一扫

uni-app打开微信扫一扫

            if (plus.os.name == "iOS") {  
                plus.runtime.openURL("weixin://scanqrcode")  

            } else if (plus.os.name == "andriod") {  
                var Intent = plus.android.importClass("android.content.Intent");  
                var ComponentName = plus.android.importClass('android.content.ComponentName')  
                var intent = new Intent();  
                intent.setComponent(new ComponentName("com.tencent.mm", "com.tencent.mm.ui.LauncherUI"));  
                intent.putExtra("LauncherUI.From.Scaner.Shortcut", true);  
                intent.setFlags(335544320);  
                intent.setAction("android.intent.action.VIEW");  
                var main = plus.android.runtimeMainActivity();  
                main.startActivity(intent);  
            }  
继续阅读 »

uni-app打开微信扫一扫

            if (plus.os.name == "iOS") {  
                plus.runtime.openURL("weixin://scanqrcode")  

            } else if (plus.os.name == "andriod") {  
                var Intent = plus.android.importClass("android.content.Intent");  
                var ComponentName = plus.android.importClass('android.content.ComponentName')  
                var intent = new Intent();  
                intent.setComponent(new ComponentName("com.tencent.mm", "com.tencent.mm.ui.LauncherUI"));  
                intent.putExtra("LauncherUI.From.Scaner.Shortcut", true);  
                intent.setFlags(335544320);  
                intent.setAction("android.intent.action.VIEW");  
                var main = plus.android.runtimeMainActivity();  
                main.startActivity(intent);  
            }  
收起阅读 »

mui上传头像带裁剪压缩

头像裁剪 图片上传

> 根据 https://ask.dcloud.net.cn/article/id-754 项目进行优化修改

项目引用:
jquery.min.js
mui.js
mui.css

优化内容:
修复了原贴的一些BUG
新增拖动放大选框功能

源码下载:
见附件

继续阅读 »

> 根据 https://ask.dcloud.net.cn/article/id-754 项目进行优化修改

项目引用:
jquery.min.js
mui.js
mui.css

优化内容:
修复了原贴的一些BUG
新增拖动放大选框功能

源码下载:
见附件

收起阅读 »

uni-app开发的真是心累

HBuilder X uniapp

开发的真是心累 升级一个版本就开始担心报错

开发的真是心累 升级一个版本就开始担心报错

uni-app获取视频缩略图封面插件

uni-app获取视频缩略图封面插件:https://ext.dcloud.net.cn/plugin?id=1577

uni-app获取视频缩略图封面插件:https://ext.dcloud.net.cn/plugin?id=1577

webview通过uni.postMessage传值提示UniPlusBridge is not defined

Webview

我是vue打包成html嵌套到web-view 本人试了好多次

 文档  https://ask.dcloud.net.cn/article/35083  给的js不好使  
  <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  

 

解决方案:
更换js 就ok了

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>  

希望能帮助到大家

继续阅读 »

我是vue打包成html嵌套到web-view 本人试了好多次

 文档  https://ask.dcloud.net.cn/article/35083  给的js不好使  
  <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>  

 

解决方案:
更换js 就ok了

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>  

希望能帮助到大家

收起阅读 »

有没有想把uni-app微信项目打包后作为一个目录或者分包用于其他的小程序项目?我有个方案

可以用uniapp2wxpack,在原有的uni-app项目上安装就行

uniapp2wxpack npm包

演示项目

开发模式下,可能会出现没有读写权限或者有些文件没有构建出来的情况,如果出现这种情况就关掉微信开发者工具,dev任务处于监听状态后,再打开微信开发者工具预览

继续阅读 »

可以用uniapp2wxpack,在原有的uni-app项目上安装就行

uniapp2wxpack npm包

演示项目

开发模式下,可能会出现没有读写权限或者有些文件没有构建出来的情况,如果出现这种情况就关掉微信开发者工具,dev任务处于监听状态后,再打开微信开发者工具预览

收起阅读 »