uniapp适配pc_uni-app⽀持PC版真正的⼀统天下来了全端⽀
持不是梦
现在，uni-app终于官⽅⽀持PC宽屏！⼀套代码多端运⾏，这个多端真正做到了跨平台，Android，IOS，web，都⽀持了，这样下去会不会也⽀持桌⾯应⽤了？
可以看出⼀个uni-app是中⼼，其他所有的都是围绕着这个产品，那么这样的⼀门语⾔到底受不受欢迎？官⽅数据显⽰。DCloud公司拥有500万开发者⽤户，⼏⼗万应⽤案例、10亿⼿机端⽉活⽤户，数千款uni-app插件、70+/qq。阿⾥⼩程序⼯具官⽅内置uni-app(详见)，腾讯课堂官⽅为uni-app录制培训课程(详见)，开发者可以放⼼选择。
打⼼底说这个uni-app是我们国产的⼀款神器，我相信⼤多创业公司早期的想法实现是可以⽤该语⾔来写的，作者也是⼀个uni-app的爱好者，⼀直都在⽤该语⾔开发产品。
uni-app宽屏适配⽅案包括：页⾯窗体级适配⽅案：leftWindow、rightWindow、topWindow
组件级适配⽅案：match-media组件
内容缩放拉伸的处理及rpx的控制策略
hbuilder手机版
通过各种强⼤、灵活的屏幕适配⼯具，开发者可以极快的完成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组件的优势包括：开发者能够更⽅便、显式地使⽤ Media Query 能⼒，⽽不是耦合在 CSS ⽂件中，难以复⽤。
能够在模板中结合数据绑定动态地使⽤，不仅能做到组件的显⽰或隐藏，在过程式 API 中可塑性更⾼，例如能够根据尺⼨变化动态地添加class 类名，改变样式。
能够嵌套式地使⽤ Media Query 组件，即能够满⾜局部组件布局样式的改变。
组件化之后，封装性更强，能够隔离样式、模版以及绑定在模版上的交互事件，还能够提供更⾼的可复⽤性。
我相信这个是⼀个好的开端，只要坚持下去uni-app会越来越强⼤，感兴趣的朋友动起⼿来⼀起开发⾃⼰喜欢的⽹页程序吧。
帮忙点个赞，转发⼀下，关注⼀波是对我最⼤的⽀持谢谢了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。