Taro开发小程序插件

Taro开发小程序插件指南

1、项目主要结构

｜-- project 
｜｜
｜｜-- config
｜｜-- src
｜｜｜-- pages
｜｜｜-- plugin （ 编写插件的内容
｜｜｜｜-- components
｜｜｜｜-- doc
｜｜｜｜-- pages
｜｜｜-- app.config.json（ 使用第三方插件需要在这里配置
｜｜-- package.json
｜｜-- project.config.json （ 本地开发插件需要在这里配置

小程序插件没办法单独预览，需要宿主小程序来引用

2、插件配置

• 小程序开发工具，需要选为 插件模式

// Path=> project.config.json 
// Todo 这俩个没配置对的话，taro编译的时候 不会报错，但是在小程序开发者工具中会报错
⬇️
{
  // "miniprogramRoot": "miniprogram/",
  "miniprogramRoot": "dist/",
  "pluginRoot": "plugin/",
}
⬆️

Error ➡️ [ app.json 文件内容错误] dist/app.json: 根据 project.config.json 中 miniprogramRoot 指定的小程序目录 dist/，app.json 未找到

// Path=> src/plugin/plugin.json
⬇️
{
  // 注册插件的组件模块
  "publicComponents": {
    "avatar": "components/avatar/avatar"
  },
  // 注册插件
  "pages": {
    "login": "pages/user-login/login"
  },
  // 入口文件
  "main": "index.ts"
}
⬆️

插件写法和普通的页面、组件是一致的。就是多了配置项和发布的流程不一致

---

3、 插件使用方式

• 小程序的插件和npm包类似，有一些插件需要申请，得到开发者授权后才能使用
• 目前小程序插件支持三种使用：
  • 组件模式： 和使用ui库差不多
  • 页面模式： 直接提供一些页面，但是有一些生命周期钩子用不了
  • 接口模式： 使用Taro.requirePlugin('myPlugin')，可以获取到插件入口文件指定的接口

1、 组件形式

• plugin://myPlugin 后面的路由就是我们定义的插件名
• 目前只能用props的方式去传参数过去，直接写自定义属性的方式，在插件中没办法直接获取到

// Path=> src/pages/index.config.ts 
⬇️
export default {
  usingComponents: {
    'userLogin': 'plugin://myPlugin/login'
  }
}
⬆️

// Path=> src/pages/index.tsx 
⬇️
const IndexA = () => {
  return <>
    <userLogin props={{
        bgImg,
        title: '123123123',
        name: '挂挂挂'
      }}
    />
</>
}
export default IndexA
⬆️

// Path=> src/plugin/pages/user-login/login.tsx
⬇️
import { View } from '@tarojs/components'
import { IPluginContext } from '@tarojs/service'
const Login = (ctx: IPluginContext) => {
  let title = ctx?.$scope?.data?.props?.title
  let name = ctx?.$scope?.data?.props?.name
  return <>
    <View>{title} - {name}</View>
  </>
}
export default Login
⬆️

---

2、页面跳转形式

• 页面跳转形式进入插件，不需要在config文件中配置引入

// Path=> src/pages/index.tsx 
⬇️
import { Navigator } from '@tarojs/components'
const IndexA = () => {
  return <>
    <Navigator url='plugin://myPlugin/login?id=123123123&op=232323232323237'>
      进入userLogin
    </Navigator>
  </>
}
export default IndexA
⬆️

// Path=> src/plugin/pages/user-login/login.tsx
⬇️
import { View } from '@tarojs/components'
import { IPluginContext } from '@tarojs/service'
import { useEffect } from 'react'
const Login = (ctx: IPluginContext) => {
  useEffect(()=>{
    console.log(ctx.$scope._optionsValue);
  }, [])
  return <>
    <View>{title} - {name}</View>
  </>
}
export default Login
⬆️

---

3、接口方式

• 如果使用该插件，仅需要一些业务接口，可以使用这种方式的插件

// Path=> src/plugin/plugin.json
⬇️
{
  // 入口文件指定接口文件
  "main": "index.ts"
}
⬆️

// Path=> src/plugin/index.ts
⬇️
// 插件暴露出去的接口，可以在宿主小程序中直接使用
export function sayHello () {
  console.log('Hello plugin!')
}
export const answer = 42
⬆️

// Path=> src/pages/index.tsx 
⬇️
import Taro from '@tarojs/taro'
const IndexA = () => {
  const myPluginInterface = Taro.requirePlugin('myPlugin')
  myPluginInterface.sayHello()
  return <>
  </>
}
export default IndexA
⬆️

---

• 编写了插件后需要，编译生成一下插件

• taro开发小程序插件，没办法使用一些生命周期钩子。使用了会出现报错

vendors.js:7094 TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_15___default.a.onAppShow is not a function

• 发布小程序插件，单个插件不能超过500k

• 小程序插件发布需要先发布一个插件文档，mac电脑在小程序开发者工具中的

  • 资源管理器 -> doc 文件夹，右键需要发布的文档，选择上传文件

• 上传文档后，需要在小程序后台发布的。如果没有发布的话，是没办法发布小程序插件的
  • “小程序插件” -> "基本设置" -> "预览文档" -> "添加插件"

如果发布的插件，设置了需要审核，要用的时候就要去搜索该插件，然后才能使用

• 如果出现这个报错，很可能是编译命令错了
  • 使用线上插件，只需要在app.config文件配置

Typeerror : Cannot read property ' pluginconfig'of undefined