Skip to content
本页目录

路由

项目路由配置存放于 主目录/package.json ,通过在package.json文件中增加uni-app扩展节点,可实现自定义条件编译平台(如钉钉小程序、微信服务号等平台)

注意事项

  • UNI_PLATFORM仅支持填写uni-app默认支持的基准平台,目前仅限如下枚举值:h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
  • BROWSER 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值:Chrome、Firefox、IE、Edge、Safari、HBuilderX
  • package.json文件中不允许出现注释,否则扩展配置无效
  • vue-cli需更新到最新版,HBuilderX需升级到 2.1.6+ 版本

示例

示例:初始项目

package.json扩展配置用法(拷贝代码记得去掉注释!):

js
{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置,可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
                }
            }
        }    
    }
}

示例:钉钉小程序

如下是一个自定义钉钉小程序(MP-DINGTALK)的package.json示例配置(拷贝代码记得去掉注释):

js
"uni-app": {
    "scripts": {
        "mp-dingtalk": { 
        "title":"钉钉小程序", 
            "env": { 
                "UNI_PLATFORM": "mp-alipay" 
            },
            "define": { 
                "MP-DINGTALK": true 
            }
        }
    }
}

在代码中使用自定义平台

开发者可在代码中使用MP-DINGTALK进行条件编译,如下:

js
// #ifdef MP
小程序平台通用代码(含钉钉)
// #endif
// #ifdef MP-ALIPAY
支付宝平台通用代码(含钉钉)
// #endif
// #ifdef MP-DINGTALK
钉钉平台特有代码
// #endif

示例:微信服务号

如下是一个自定义微信服务号平台(H5-WEIXIN)的示例配置:

js
"uni-app": {
    "scripts": {
        "h5-weixin": { 
            "title":"微信服务号",
            "BROWSER":"Chrome",  
            "env": {
                "UNI_PLATFORM": "h5"  
             },
            "define": { 
                "H5-WEIXIN": true 
            }
        }
    }    
}

开发者可在代码块中使用H5-WEIXIN变量,如下:

// #ifdef H5
H5平台通用代码(含微信服务号)
// #endif
// #ifdef H5-WEIXIN
微信服务号特有代码
// #endif

示例:前端铺子完整示例

小程序项目打包有大小限制(2M),故项目中做了分包处理(subPackages[{}]):

js
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/tabbar",
			"style": {
				"navigationBarTitleText": "宅家学IT",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/me/salary",
			"style": {
				"navigationBarTitleText": "薪资排行",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/me/aboutMe",
			"style": {
				"navigationBarTitleText": "关于作者",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/me/mentalTest/list",
			"style": {
				"navigationBarTitleText": "答题测试",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/me/mentalTest/index",
			"style": {
				"navigationBarTitleText": "答题测试",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/me/mentalTest/explain",
			"style": {
				"navigationBarTitleText": "答题规则说明"
			}
		},
		{
			"path": "pages/news/news",
			"style": {
				"navigationBarTitleText": "资讯详情"
			}
		},
		{
			"path": "pages/video",
			"style": {
				"navigationBarTitleText": "视频播放",
				"usingComponents": {
					// #ifdef  MP-WEIXIN 
					"txv-video": "plugin://tencentvideo/video"
					// #endif
				}
			}
		},
		{
			"path": "pages/project/list",
			"style": {
				"navigationBarTitleText": "项目展示",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/project/project",
			"style": {
				"navigationBarTitleText": "项目展示",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/timeline",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/design",
			"style": {
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/main/customCamera",
			"style": {
				"navigationBarTitleText": "自定义相机/图片编辑器"
			}
		}
	],
	"subPackages": [{
		"root": "tn_components",
		"pages": [{
				"path": "pano",
				"style": {}
			}, {
				"path": "bggrad",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "bgcolor",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "ancube",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "anloading",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "mimicry",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "mapLocus",
				"style": {
					"navigationStyle": "custom"
				}
			},
			{
				"path": "charts",
				"style": {
					"navigationBarTitleText": "图表展示"
				}
			},
			{
				"path": "poster",
				"style": {
					"navigationStyle": "custom"
				}
			},
			{
				"path": "discern",
				"style": {
					"navigationStyle": "custom"
				}
			}, {
				"path": "sign",
				"style": {
					"navigationBarTitleText": "电子签名"
				}
			}, {
				"path": "district",
				"style": {
					"navigationBarTitleText": "行政区图"
				}
			},
			{
				"path": "search",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "便捷查询"
				}
			},
			{
				"path": "salary",
				"style": {
					"navigationBarTitleText": "排行榜",
					"navigationStyle": "custom"
				}
			},
			{
				"path": "course",
				"style": {
					"navigationBarTitleText": "班级课程",
					"navigationStyle": "custom"
				}
			},
			{
				"path": "openDocument",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "文档预览"
				}
			},
			{
				"path": "company",
				"style": {
					"navigationBarTitleText": "自定义相机"
				}
			},
			{
				"path": "timeline",
				"style": {
					"navigationBarTitleText": "时间轴"
				}
			},
			{
				"path": "guide",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "引导页面"
				}
			},
			{
				"path": "request",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "模拟数据加载"
				}
			},
			{
				"path": "keyboard",
				"style": {
					"navigationStyle": "custom"
				}
			},
			{
				"path": "drag_demo/index",
				"style": {
					"navigationBarTitleText": "悬浮球"
				}
			},
			{
				"path": "timetables",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "课程表"
				}
			},
			{
				"path": "imageEditor",
				"style": {
					"navigationBarTitleText": "图片编辑器"
				}
			},
			{
				"path": "clock",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "每日签到"
				}
			},
			{
				"path": "medal",
				"style": {
					"navigationStyle": "custom",
					"navigationBarTitleText": "权益页面"
				}
			}
		]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}