Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_36567140
unidocs-zh
提交
9f273afc
U
unidocs-zh
项目概览
qq_36567140
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9f273afc
编写于
9月 27, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: 小程序插件
上级
fb1d95f6
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
160 addition
and
0 deletion
+160
-0
docs/collocation/_sidebar.md
docs/collocation/_sidebar.md
+1
-0
docs/collocation/miniprogram-plugin.md
docs/collocation/miniprogram-plugin.md
+159
-0
未找到文件。
docs/collocation/_sidebar.md
浏览文件 @
9f273afc
...
...
@@ -7,6 +7,7 @@
*
[
App.vue
](
collocation/App.md
)
*
[
main.js
](
collocation/main.md
)
*
[
env
](
collocation/env.md
)
*
[
小程序插件
](
collocation/miniprogram-plugin.md
)
*
框架接口
*
[
日志打印
](
collocation/frame/log.md
)
*
[
定时器
](
collocation/frame/timer.md
)
...
...
docs/collocation/miniprogram-plugin.md
0 → 100644
浏览文件 @
9f273afc
### 小程序插件开发
**平台差异说明**
| 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ 小程序 | 快手小程序 |
| :--------: | :----------: | :--------: | :------------: | :-------: | :--------: |
| √ | √ (
`3.2.9+`
) | x | x | x | x |
**注意**
1.
开发
`微信小程序插件`
时,基础库版本
`1.9.6`
开始支持。(如果插件包含页面,则需要基础库版本
`2.1.0`
。)
2.
开发
`支付宝小程序插件`
时,IDE 版本要求在 0.60 及以上
#### 插件目录结构
```
plugin
├── components // 插件提供的自定义组件(可以有多个)
│ ├── hello-component.js
│ ├── hello-component.json
│ ├── hello-component.wxml
│ └── hello-component.wxss
├── pages
│ ├── hello-page.js // 插件提供的页面(可以有多个)
│ ├── hello-page.json
│ ├── hello-page.wxml
│ └── hello-page.wxss
├── index.js // 插件的 js 接口
└── plugin.json // 插件配置文件
```
#### 插件配置文件
> 向第三方小程序开放的所有组件、页面和 js 接口都必须在 plugin.json 中声明
-
`mp-weixin`
```
json
{
"publicComponents"
:
{
"hello-component"
:
"components/hello-component"
},
"pages"
:
{
"hello-page"
:
"pages/hello-page"
},
"main"
:
"index.js"
}
```
每个配置的含义如下:
-
`publicComponents`
:列出所有向小程序开放的自定义组件。
-
`pages`
:列出所有向小程序开放的页面。
-
`main`
:插件面向第三方小程序的 js 接口。
-
`mp-alipay`
```
json
{
"publicComponents"
:
{
"hello-component"
:
"components/hello-component"
},
"publicPages"
:
{
"hello-pages"
:
"pages/hello-page"
},
"pages"
:
[
"pages/hello-page"
"pages/index"
],
"main"
:
"index.js"
}
```
每个配置的含义如下:
-
`publicComponents`
:列出所有向小程序开放的自定义组件。
-
`publicPages`
:列出所有向小程序开放的页面。
-
`pages`
:列出插件所有页面(包含向小程序开放的以及不向小程序开放的页面)。
-
`main`
:插件面向第三方小程序的 js 接口。
**注意**
1.
`mp-weixin`
中的
`pages`
项与
`mp-alipay`
中的
`publicPages`
项作用一致
2.
`mp-alipay`
中供外部使用的页面,需要在
`pages`
中声明,数组类型
3.
由于两端的格式不一致,可以在
`plugin.json`
中使用
[
条件编译
](
https://uniapp.dcloud.io/platform?id=preprocessor
)
处理
#### 编译步骤
-
安装 cli 最新的 alpha 版或最新的稳定版。截止文章发布时最新版本为:
`2.0.0-alpha-32120210809004`
。
-
执行命令行:
`yarn dev:mp-weixin -- --plugin test-plugin`
。
-
其中
`test-plugin`
为编译出插件包的名字。
`项目根目录\dist\dev\mp-weixin\test-plugin`
中即是可执行小程序插件代码。
-
`mp-alipay`
平台插件编译后续发布,请留意更新日志。
#### 如何在项目中使用插件
1.
宿主小程序是
`uniapp项目`
,在
`manifest.json`
中配置相关信息即可,
[
详情
](
https://uniapp.dcloud.io/component/mp-weixin-plugin?id=%e9%85%8d%e7%bd%ae%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%8f%92%e4%bb%b6
)
2.
宿主为原生小程序,在项目的
`app.json`
中配置即可:
-
[
mp-wixin 配置
](
https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html
)
-
[
mp-alipay 配置
](
https://opendocs.alipay.com/mini/plugin/plugin-development#app.json%20%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE
)
#### 在插件中使用条件编译
> 有时候项目不仅要编译到插件,也需要作为一个正常的小程序运行,但有些 api 并不适用于两端,此时可以使用自定义条件编译区分开来。
1.
自定义条件编译(
[
详情
](
https://uniapp.dcloud.io/collocation/package
)
),在
`package.json`
中添加如以下配置:
```
json
"uni-app"
:
{
"scripts"
:
{
"mp-wx-plugin"
:
{
"title"
:
"微信小程序插件"
,
"env"
:
{
"UNI_PLATFORM"
:
"mp-weixin"
},
"define"
:
{
"MP-WX-PLUGIN"
:
true
}
},
"mp-ali-plugin"
:
{
"title"
:
"阿里小程序插件"
,
"env"
:
{
"UNI_PLATFORM"
:
"mp-alipay"
},
"define"
:
{
"MP-ALI-PLUGIN"
:
true
}
},
}
}
```
2.
使用条件编译:
```
js
// #ifdef MP-WX-PLUGIN
/**
* CODE
*/
// #endif
```
3.
编译时执行命令:
`yarn dev:custom mp-wx-plugin --plugin test-plugin`
即可,可将脚本写入
`script`
中,每次执行更加简化。
```
json
{
"dev:mp-wx-plugin"
:
"yarn dev:custom mp-wx-plugin --plugin"
,
"dev:mp-ali-plugin"
:
"yarn dev:custom mp-ali-plugin --plugin"
}
```
**注意**
1.
组件在插件内部未使用,需要在宿主小程序中使用时,要在 main.js 中引入使用一下,否则编译后会丢失未使用插件。例如:
```
js
import
helloList
from
'
.../helloList
'
;
Vue
.
component
(
'
hello-list
'
,
helloList
);
```
2.
插件中所编写的页面需要在
`pages.json`
中填写。
3.
如果有多个
`uniapp`
编译的
`插件`
需要运行在同一个小程序中,
**不要重名**
。
4.
名称不要有特殊字符,比如
`\`。会用到这个名字来挂载一个方法。
5. `
-
` 已经手动替换为 `
_
` ,其他的特殊字符不要写。
6. 各家小程序插件对各 `
api
`
的支持情况不同,具体请查看小程序官方文档的相关描述
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录