uni-app 通过condition调试指定页面

迷南。 2023-03-02 10:28 41阅读 0赞

## uni-app 中的 condition 是什么？ ##

condition 是启动模式配置，它主要用于模拟直达某一个页面的常见，以方便进行开发调试。该模式还在开发期间生效。

**属性说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>current</td> 
   <td>Number</td> 
   <td>是</td> 
   <td>当前激活的模式，list节点的索引值</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>启动模式列表</td> 
  </tr> 
 </tbody> 
</table>

**list说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动模式名称</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td>是</td> 
   <td>启动页面路径</td> 
  </tr> 
  <tr> 
   <td>query</td> 
   <td>String</td> 
   <td>否</td> 
   <td>启动参数，可在页面的&nbsp;<a href="https://uniapp.dcloud.io/use?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F" rel="nofollow">onLoad</a>&nbsp;函数里获得</td> 
  </tr> 
 </tbody> 
</table>

**注意：** 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：

![format_png][]

## 怎么使用 uni-app 中 的condition 来调试指定页面？ ##

1、首先打开根目录下的 pages.json 文件，添加如下代码：

"condition": { //编译模式配置，仅开发期间生效  
    		"current": 0, //当前激活的编译模式（list 的索引项）  
    		"list": [{
                "name": "详情页面", //模式名称
                "path": "pages/details/details", //启动页面，必选
                "query": "id=1" //启动参数，在页面的onLoad函数里面得到。
            }]  
    	},

pages.json 文件全部代码如下：

{
    	"pages": [{
    		"path": "pages/index/index",
    		"style": {
    			"navigationBarTitleText": "首页"
    		}
    	},{
    		"path": "pages/details/details",
    		"style": {
    			"navigationBarTitleText": "详情"
    		}
    	}],
    	"condition": { //编译模式配置，仅开发期间生效  
    		"current": 0, //当前激活的编译模式（list 的索引项）  
    		"list": [{
                "name": "详情页面", //模式名称
                "path": "pages/details/details", //启动页面，必选
                "query": "id=1" //启动参数，在页面的onLoad函数里面得到。
            }]  
    	},
    	"globalStyle": {
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#FFFFFF"
    	}
    }

2、然后直接运行即可

[format_png]: /images/20230208/222064ebb7c24e7cb6ef19b9db523482.png