uni-app已經支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字節跳動小程序、QQ小程序、快應用、360小程序。

現在，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的控制策略

通過各種強大、靈活的屏幕適配工具，開發者可以極快的完成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會越來越強大，感興趣的朋友動起手來一起開發自己喜歡的網頁程序吧。

總結

以上是生活随笔為你收集整理的开发pc页面_uniapp支持PC版真正的一统天下来了全端支持不是梦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。