feat: 广告组件

src/app.ts

@@ -1,18 +1,8 @@
-import { Component, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import './app.less'
 
-class App extends Component<PropsWithChildren> {
-
-  componentDidMount () {}
-
-  componentDidShow () {}
-
-  componentDidHide () {}
-
-  // this.props.children 是将要会渲染的页面
-  render () {
-    return this.props.children
-  }
+function App({ children }: PropsWithChildren) {
+  return children
 }
 
 export default App

src/pages/index/index.config.ts

@@ -1,6 +1,6 @@
 export default {
   navigationBarTitleText: '首页',
   usingComponents: {
-    'avatar': 'plugin://myPlugin/avatar'
+    'custom': 'plugin://myPlugin/custom'
   }
 }

src/pages/index/index.tsx

@@ -1,32 +1,22 @@
-import Taro from '@tarojs/taro'
-import React, { Component, PropsWithChildren } from 'react'
-import { View, Text, Navigator } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import React from 'react'
+import { View, Text } from '@tarojs/components'
 import './index.less'
 
 const myPluginInterface = Taro.requirePlugin('myPlugin')
 
-export default class Index extends Component<PropsWithChildren> {
-  componentDidMount () {
+const Index: React.FC = () => {
+  useLoad(() => {
     myPluginInterface.sayHello()
     const answer = myPluginInterface.answer
     console.log('answer: ', answer)
-  }
+  })
 
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!11111</Text>
-        <avatar />
-        <Navigator url='plugin://myPlugin/list'>
-          Go to pages/list!
-        </Navigator>
-      </View>
-    )
-  }
+  return (
+    <View className='index'>
+      <custom />
+    </View>
+  )
 }
+
+export default Index

src/plugin/components/avatar/avatar.tsx

@@ -1,13 +0,0 @@
-import { Component, PropsWithChildren } from 'react'
-import { View, Image } from '@tarojs/components'
-import './avatar.less'
-
-export default class Avatar extends Component<PropsWithChildren> {
-  render () {
-    return (
-      <View>
-        <Image src='http://storage.360buyimg.com/taro-static/static/images/logo.png' />
-      </View>
-    )
-  }
-}

src/plugin/components/avatar/avatar.config.ts → src/plugin/components/custom/index.config.ts

@@ -1,3 +1,3 @@
 export default {
 
-}
+}

src/plugin/components/custom/index.tsx

@@ -0,0 +1,11 @@
+import { View } from '@tarojs/components'
+import React from 'react'
+import './index.less'
+
+const Custom: React.FC = () => {
+  return (
+    <View>Custom</View>
+  )
+}
+
+export default Custom

src/plugin/components/listItem/listItem.config.ts

@@ -1,3 +0,0 @@
-export default {
-
-}

src/plugin/components/listItem/listItem.tsx

@@ -1,20 +0,0 @@
-import { Component, PropsWithChildren } from 'react'
-import { View } from '@tarojs/components'
-import './listItem.less'
-
-interface IListItem {
-  name: string,
-  value: string
-}
-
-export default class ListItem extends Component<IListItem, any> {
-  render () {
-    const { name, value } = this.props
-    return (
-      <View>
-        <View>name: {name}</View>
-        <View>value: {value}</View>
-      </View>
-    )
-  }
-}

src/plugin/pages/list/list.tsx

@@ -1,29 +0,0 @@
-import { Component, PropsWithChildren } from 'react'
-import { View } from '@tarojs/components'
-import ListItem from '../../components/listItem/listItem'
-import './list.less'
-
-export default class Index extends Component<PropsWithChildren> {
-  state = {
-    list: [{
-      name: 'A',
-      value: '1'
-    }, {
-      name: 'B',
-      value: '2'
-    }, {
-      name: 'C',
-      value: '3'
-    }]
-  }
-
-  render () {
-    return (
-      <View>
-        {this.state.list.map(item => {
-          return <ListItem name={item.name} value={item.value} key={item.name} />
-        })}
-      </View>
-    )
-  }
-}

src/plugin/pages/list/list.config.ts → src/plugin/pages/webview/index.config.ts

@@ -1,3 +1,3 @@
 export default {
 
-}
+}

src/plugin/pages/webview/index.tsx

@@ -0,0 +1,11 @@
+import { View } from '@tarojs/components'
+import React from 'react'
+import './index.less'
+
+const Webview: React.FC = () => {
+  return (
+    <View>Webview</View>
+  )
+}
+
+export default Webview

src/plugin/plugin.json

@@ -1,9 +1,9 @@
 {
   "publicComponents": {
-    "avatar": "components/avatar/avatar"
+    "custom": "components/custom/index"
   },
   "pages": {
-    "list": "pages/list/list"
+    "webview": "pages/webview/index"
   },
     "main": "index.ts"
   }

tsconfig.ts

@@ -1,28 +1,28 @@
 export default {
-  "compilerOptions": {
-    "target": "es2017",
-    "module": "commonjs",
-    "removeComments": false,
-    "preserveConstEnums": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "noImplicitAny": false,
-    "allowSyntheticDefaultImports": true,
-    "outDir": "lib",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "strictNullChecks": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "rootDir": ".",
-    "jsx": "react-jsx",
-    "jsxFactory": "React.createElement",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "typeRoots": [
-      "node_modules/@types"
+  compilerOptions: {
+    target: 'es2017',
+    module: 'commonjs',
+    removeComments: false,
+    preserveConstEnums: true,
+    moduleResolution: 'node',
+    experimentalDecorators: true,
+    noImplicitAny: false,
+    allowSyntheticDefaultImports: true,
+    outDir: 'lib',
+    noUnusedLocals: true,
+    noUnusedParameters: true,
+    strictNullChecks: true,
+    sourceMap: true,
+    baseUrl: '.',
+    rootDir: '.',
+    jsx: 'react-jsx',
+    jsxFactory: 'React.createElement',
+    allowJs: true,
+    resolveJsonModule: true,
+    typeRoots: [
+      'node_modules/@types'
     ]
   },
-  "include": ["./src", "./types"],
-  "compileOnSave": false
+  include: ['./src', './types'],
+  compileOnSave: false
 }

types/global.d.ts

@@ -16,4 +16,3 @@ declare namespace NodeJS {
     TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
   }
 }
-