package.md 3.5 KB
Newer Older
1 2
通过在`package.json`文件中增加`uni-app`扩展节点,可实现自定义条件编译平台(如钉钉小程序、微信服务号等平台)。

W
wanganxp 已提交
3
package.json扩展配置用法(拷贝代码记得去掉注释!):
4 5 6 7 8 9 10 11 12

```json
{
    /**
     package.json其它原有配置 
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置,可通过cli方式调用
hbcui1984's avatar
hbcui1984 已提交
13 14
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "BROWSER":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
15 16 17 18
                "env": {//环境变量
                    "UNI_PLATFORM": ""  //基准平台 
                 },
                "define": { //自定义条件编译
19
                    "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
20 21 22 23 24 25 26 27 28 29 30 31
                }
            }
        }    
    }
}


```

Tips:

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

hbcui1984's avatar
hbcui1984 已提交
36
#### 示例:钉钉小程序
37 38

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

40 41 42
```json
"uni-app": {
	"scripts": {
43 44 45 46
		"mp-dingtalk": { 
            "title":"钉钉小程序", 
			"env": { 
				"UNI_PLATFORM": "mp-alipay" 
47
			},
48 49
			"define": { 
				"MP-DINGTALK": true 
50 51 52 53 54 55
			}
		}
	}
}
```

hbcui1984's avatar
hbcui1984 已提交
56
**在代码中使用自定义平台**
57

hbcui1984's avatar
hbcui1984 已提交
58
开发者可在代码中使用`MP-DINGTALK`进行条件编译,如下:
59 60 61 62 63 64
```javascript
// #ifdef MP-DINGTALK
钉钉平台特有代码
// #endif
```

hbcui1984's avatar
hbcui1984 已提交
65
**运行及发布项目**
66

67
`vue-cli`开发者可通过如下命令,启动钉钉小程序平台的编译:
68 69 70 71 72
```
npm run dev:custom mp-dingtalk 
npm run build:custom mp-dingtalk
```

73 74 75 76
`HBuilderX`会根据`package.json`的扩展配置,在`运行``发行`菜单下,生成自定义菜单(钉钉小程序),开发者点击对应菜单编译运行即可,如下图:

![](https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/package-dingding.png)

77 78
Tips:钉钉小程序编译目录依然是`mp-alipay`,需通过支付宝开发者工具,选择“钉钉小程序”,然后打开该目录进行预览及发布。

hbcui1984's avatar
hbcui1984 已提交
79
#### 示例:微信服务号
80 81 82 83 84 85

如下是一个自定义微信服务号平台(H5-WEIXIN)的示例配置:
 
```json
"uni-app": {
    "scripts": {
86
        "h5-weixin": { 
hbcui1984's avatar
hbcui1984 已提交
87
            "title":"微信服务号",
88 89 90
            "BROWSER":"Chrome",  
            "env": {
                "UNI_PLATFORM": "h5"  
91
             },
92 93
            "define": { 
                "H5-WEIXIN": true 
94 95 96 97 98 99 100 101 102 103 104 105 106 107
            }
        }
    }    
}
```

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

```
// #ifdef H5-WEIXIN
微信服务号特有代码
// #endif
```

108
`vue-cli`开发者可通过如下命令,启动微信服务号平台(H5-WEIXIN)平台的编译:
109 110 111 112
```
npm run dev:custom h5-weixin 
npm run build:custom h5-weixin
```
113 114 115 116

`HBuilderX`会根据`package.json`的扩展配置,在`运行``发行`菜单下,生成自定义菜单(微信服务号),开发者点击对应菜单编译运行即可,如下图:

![](https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/package-h5-weixin.png)