同开发普通的小程序不同,开发第三方平台小程序具有一定的复杂性,首先需要确认三个概念
因为以上的这些不同,第三方平台相关的小程序开发需要做一些特殊的处理
最新版本的开发工具支持第三方平台小程序的开发和预览。
与开发普通小程序一致,第三方平台开发者填入相关的 3rdminiprogramappid ,设定项目名称和选择项目目录即可创建项目。
对于第三方平台小程序,可以在项目页卡查看到相关的 open3rd 信息以及当前的第三方的 3rdminiprogramappid ,如若项目配置了相关的 extappid ,那么项目页卡中也会有相关信息。
与开发普通小程序一致,开发者在开发工具上开发好相关的业务逻辑之后,在项目页卡中提交预览既可以在微信中查看小程序的真实表现,
有所不同的是,第三方平台小程序的提交上传是上传至该第三方平台的 open 帐号下的模板草稿箱中,该平台的管理员需要自行对该模板进行相应的设置,更多请参考 open平台的文档 。
为了方便第三方平台的开发者引入 extappid 的开发调试工作,需要引入ext.json
的概念。
ext.json
是一个配置文件,放置在小程序项目的根目录下。
以下是一个包含了所有配置选项的ext.json
:
{
"extenable": true,
"extappid": "wxf9c4501a76931b33",
"ext": {
"name": "wechat",
"attr": {
"host": "open.weixin.qq.com",
"users": [
"user_1",
"user_2"
]
}
},
"extpages": {
"pages/logs/logs": {
"navigationbartitletext": "logs"
}
},
"window":{
"backgroundtextstyle":"light",
"navigationbarbackgroundcolor": "#fff",
"navigationbartitletext": "demo",
"navigationbartextstyle":"black"
},
"tabbar": {
"list": [{
"pagepath": "pages/index/index",
"text": "首页"
}, {
"pagepath": "pages/logs/logs",
"text": "日志"
}]
},
"networktimeout": {
"request": 10000,
"downloadfile": 10000
}
}
ext.json
中的配置字段分为两种
app.json
相同的字段属性 | 类型 | 必填 | 描述 |
---|---|---|---|
extenable | boolean | 是 | 配置 ext.json 是否生效 |
extappid | string | 是 | 配置 extappid |
ext | object | 否 | 开发自定义的数据字段 |
extpages | string array | 否 | 单独设置每个页面的 json |
extenable
extenable
是一个boolean
类型的字段,用于规定当前的ext.json
文件是否生效,开发者可以通过修改这个字段来开启和关闭 extappid 的结合开发。
extappid
extappid
是授权调试的appid
,例如开发者在此处填写的是wxf9c4501a76931b33
那么在extenable
为真的情况下,后续的开发逻辑都会基于wxf9c4501a76931b33
来运行。
ext
ext
字段是开发自定义的数据字段,在小程序中可以通过 wx.getextconfigsync 或者 wx.getextconfig 获取到这些配置信息。
例如上面的例子中,通过wx.getextconfigsync
就可以获得ext
字段的所有配置
{
"name": "wechat",
"attr": {
"host": "open.weixin.qq.com",
"users": [
"user_1",
"user_2"
]
}
}
extpages
extpages
是一个对象,对象中的每个key
应该是该小程序模板app.json
中定义的页面,每个key
对应的value
是 page.json 中所规定的各项配置。
当开发者设置这个配置以后,小程序框架会对应的修改相对应的page
的配置信息。
app.json
相同的字段当ext.json
中的字段同app.json
中一致时,ext.json
的字段会覆盖app.json
中的对应字段,例如以下的ext.json
{
········
"window":{
"backgroundtextstyle":"light",
"navigationbarbackgroundcolor": "#fff",
"navigationbartitletext": "ext navigationbartitletext",
"navigationbartextstyle":"black"
}
}
那么该小程序最终的navigationbartitletext
应该是ext navigationbartitletext
。