分享

uni-app支持PC版真正的一统天下来了全端支持不是梦

 当生如夏花 2020-10-19

现在,uni-app终于官方支持PC宽屏!一套代码多端运行,这个多端真正做到了跨平台,Android,IOS,web,都支持了,这样下去会不会也支持桌面应用了?

uni-app支持PC版真正的一统天下来了全端支持不是梦

可以看出一个uni-app是中心,其他所有的都是围绕着这个产品,那么这样的一门语言到底受不受欢迎?官方数据显示。

DCloud公司拥有500万开发者用户,几十万应用案例、10亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。

打心底说这个uni-app是我们国产的一款神器,我相信大多创业公司早期的想法实现是可以用该语言来写的,作者也是一个uni-app的爱好者,一直都在用该语言开发产品。

uni-app宽屏适配方案包括:

  1. 页面窗体级适配方案:leftWindow、rightWindow、topWindow
  2. 组件级适配方案:match-media组件
  3. 内容缩放拉伸的处理及rpx的控制策略

通过各种强大、灵活的屏幕适配工具,开发者可以极快的完成PC版和手机版的适配。

以DCloud提供的新闻模板示例为例,把for手机的应用适配为PC版,工作量不到半天

并且后续维护升级,不需要手机和PC分版本升级,复用的业务只需单点更新。省心!

在适配PC时,可以适配为普通PC页面,还可以快捷的适配为左右分栏的页面,即在左边点列表,右边展现内容详情。这种应用更加像一个应用而不是网页,给予用户更好的使用体验。

来吧,以后不管做什么应用,uni-app一把梭!

友情提示一下,大家在体验的时候需要把HBuilder X升级到2.9.3.20201014

代码还是那套代码,大家按照要求配置一下pages.json

{ 'globalStyle': { }, 'topWindow': { 'path': 'responsive/top-window.vue', // 指定 topWindow 页面文件 'style': { 'height': '44px' } }, 'leftWindow': { 'path': 'responsive/left-window.vue', // 指定 leftWindow 页面文件 'style': { 'width': 300 } }, 'rightWindow': { 'path': 'responsive/right-window.vue', // 指定 rightWindow 页面文件 'style': { 'width': 'calc(100vw - 400px)' // 页面宽度 }, 'matchMedia': { 'minWidth': 768 //生效条件,当窗口宽度大于768px时显示 } }}

配置完毕后然后再用组件级适配方案:match-media组件来开发

match-media组件的优势包括:

  1. 开发者能够更方便、显式地使用 Media Query 能力,而不是耦合在 CSS 文件中,难以复用。
  2. 能够在模板中结合数据绑定动态地使用,不仅能做到组件的显示或隐藏,在过程式 API 中可塑性更高,例如能够根据尺寸变化动态地添加 class 类名,改变样式。
  3. 能够嵌套式地使用 Media Query 组件,即能够满足局部组件布局样式的改变。
  4. 组件化之后,封装性更强,能够隔离样式、模版以及绑定在模版上的交互事件,还能够提供更高的可复用性。

我相信这个是一个好的开端,只要坚持下去uni-app会越来越强大,感兴趣的朋友动起手来一起开发自己喜欢的网页程序吧。

帮忙点个赞,转发一下,关注一波是对我最大的支持谢谢了。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多