最近在開發小程序的過程中，發現使用外網的css文件可以大大提升項目的開發效率，讓我們不必重復寫一些基礎樣式的代碼。那么，在小程序中如何引入外網的css呢？下面我們來詳細介紹一下。

首先，我們需要在小程序的app.json文件中配置一下我們所需要的網絡權限，如下所示：

{
"pages": [
"pages/index/index"
],
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序+使用外網css",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "小程序獲取位置信息"
},
"scope.userInfo": {
"desc": "小程序獲取用戶信息"
},
"scope.address": {
"desc": "小程序獲取通訊地址"
}
},
"networkTimeout": {
"request": 10000
},"requiredBackgroundModes": ["audio"],"debug": true}

其中，我們需要添加兩個字段：requiredBackgroundModes和debug。requiredBackgroundModes是必須的，它表示小程序需要在后臺運行某些模塊（比如音頻播放），如果不添加就會報錯；debug是可選的，它用于開啟小程序的調試模式，方便我們進行開發和調試。

接下來，在我們需要使用css的頁面的json文件中，我們需要引入外部樣式表，如下所示：

{
"usingComponents": {},"style": "https://cdn.jsdelivr.net/gh/twbs/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"}

這里我們以Bootstrap為例，使用cdn.jsdelivr.net提供的資源鏈接引入其5.0.0-beta1版本的css文件。

最后，我們在需要使用樣式的wxml文件中，直接使用外部樣式即可，如下所示：

<view class="container">
<view class="row">
<view class="col">1 of 2</view>
<view class="col">2 of 2</view>
</view>
<view class="row">
<view class="col">1 of 3</view>
<view class="col">2 of 3</view>
<view class="col">3 of 3</view>
</view>
</view>

這里我們使用了Bootstrap的網格系統，將容器分成了兩行三列的六個格子。

以上就是在小程序中使用外部css的方法，嘗試一下吧！