feat: 自定义组件参数定义

config/index.ts

@@ -1,3 +1,5 @@
+const path = require('path')
+
 const config = {
   projectName: 'mxplugin',
   date: '2023-11-13',
@@ -16,6 +18,9 @@ const config = {
     options: {
     }
   },
+  alias: {
+    '@': path.resolve(__dirname, '..', 'src'),
+  },
   framework: 'react',
   compiler: 'webpack5',
   cache: {

package.json

@@ -9,15 +9,8 @@
     "css": "less"
   },
   "scripts": {
-    "build:weapp": "taro build --plugin weapp",
-    "dev": "npm run build:weapp -- --watch",
-    "dev:swan": "npm run build:swan -- --watch",
-    "dev:alipay": "npm run build:alipay -- --watch",
-    "dev:tt": "npm run build:tt -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch",
-    "dev:rn": "npm run build:rn -- --watch",
-    "dev:qq": "npm run build:qq -- --watch",
-    "dev:quickapp": "npm run build:quickapp -- --watch"
+    "build": "taro build --plugin weapp",
+    "dev": "npm run build -- --watch"
   },
   "author": "",
   "license": "MIT",

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "miniprogram/",
   "pluginRoot": "plugin/",
   "compileType": "plugin",
-  "appid": "wx58cb402db1e94bb7",
+  "appid": "wxf7261ed54f2e450e",
   "projectname": "wx-custom-plugin",
   "description": "",
   "setting": {
@@ -21,7 +21,7 @@
     },
     "condition": false
   },
-  "pluginAppid": "wx58cb402db1e94bb7",
+  "pluginAppid": "wxf7261ed54f2e450e",
   "libVersion": "3.2.0",
   "srcMiniprogramRoot": "miniprogram/",
   "packOptions": {

src/app.config.ts

@@ -14,7 +14,7 @@ export default {
   plugins: {
     myPlugin: {
       version: 'dev',
-      provider: 'wx58cb402db1e94bb7'
+      provider: 'wxf7261ed54f2e450e'
     }
   }
 }

src/pages/components/demo/index.tsx

@@ -0,0 +1,15 @@
+import { View } from "@tarojs/components"
+import React from 'react'
+ 
+const Demo: React.FC = (props) => {
+  function demoClick() {
+    console.log(props)
+  }
+
+
+  return (
+    <View onClick={demoClick}>123</View>
+  )
+}
+
+export default Demo

src/pages/index/index.tsx

@@ -1,8 +1,12 @@
 import Taro, { useLoad } from '@tarojs/taro'
 import React from 'react'
 import { View } from '@tarojs/components'
+import Demo from '@/pages/components/demo/index'
 import './index.less'
 
+// console.log(Demo)
+// debugger
+
 const myPluginInterface = Taro.requirePlugin('myPlugin')
 
 const Index: React.FC = () => {
@@ -12,9 +16,14 @@ const Index: React.FC = () => {
     console.log('answer: ', answer)
   })
 
+  function hasCllick() {
+    console.log('hasCllick')
+  }
+
   return (
     <View className='index'>
-      <custom />
+      {/* <Demo width="123"></Demo> */}
+      <custom width="1000" props={{width: "300"}} onClick={hasCllick}/>
     </View>
   )
 }

src/plugin/components/custom/index.less

@@ -1,3 +0,0 @@
-view {
-  width: 100vw;
-}

src/plugin/components/custom/index.tsx

@@ -3,12 +3,15 @@ import { View, Video, Navigator, Button, FunctionalPageNavigator } from '@tarojs
 import React from 'react'
 import './index.less'
 
-const Custom: React.FC = () => {
+const Custom: React.FC = (props) => {
   function clickCustom() {
-
+    console.log(props)
   }
 
+  const customWidth = props.width || 100
+
   useReady(async () => {
+    // console.log(ctx.$scope.data.props)
     // Taro.getSetting({
     //   success(res) {
     //     console.log('getSetting', res)
@@ -25,8 +28,8 @@ const Custom: React.FC = () => {
     //   }
     // })
 
-    const systemInfo = await Taro.getNetworkType()
-    console.log(systemInfo)
+    // const systemInfo = await Taro.getNetworkType()
+    // console.log(systemInfo)
 
     // Taro.login({
     //   success(res) {
@@ -62,22 +65,24 @@ const Custom: React.FC = () => {
 
   return (
     <View onClick={clickCustom}>
-      <Navigator url='plugin-private://wx58cb402db1e94bb7/pages/h5/index'>
+      <View>{customWidth}</View>
+      <View>123</View>
+      {/*a <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/h5/index'>
         <Button>H5</Button>
       </Navigator>
 
-      <Navigator url='plugin-private://wx58cb402db1e94bb7/pages/miniWeb/index'>
+      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/miniWeb/index'>
         <Button>半屏</Button>
       </Navigator>
 
-      <Navigator url='plugin-private://wx58cb402db1e94bb7/pages/webview/index'>
+      <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/webview/index'>
         <Button>全屏</Button>
-      </Navigator>
+      </Navigator> */}
 
-      {/* <Navigator url='plugin-private://wx58cb402db1e94bb7/pages/webview/index'>
+      {/* <Navigator url='plugin-private://wxf7261ed54f2e450e/pages/webview/index'>
         <Video autoplay controls={false} loop src='https://xycdn.yishihui.com/ad/prod/video/material_AD_1700025739_1700025739924.mp4' />
       </Navigator> */}
-      <Button onClick={clickPayment}>支付</Button>
+      {/* <Button onClick={clickPayment}>支付</Button> */}
       {/* <FunctionalPageNavigator
         name="loginAndGetUserInfo"
         version="develop"

src/plugin/doc/README.md

@@ -1,4 +1,4 @@
-# 插件文档标题
+# 老好看插件文档
 
 ## 二级标题
 
@@ -6,6 +6,4 @@
 
 这个文件用于书写插件文档，引用图片时必须以**相对路径**引用 ***doc*** 目录下的本地图片，不能使用网络图片或非 ***doc*** 目录下的图片。以下是相对路径的引用示例：
 
-![链接](./example.jpeg)
-
 使用编辑器下方的上传按钮可以上传插件文档，上传的内容包括 doc 目录下的 README.md 和图片。

tsconfig.json

@@ -18,7 +18,10 @@
     "jsx": "react-jsx",
     "allowJs": true,
     "resolveJsonModule": true,
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["node_modules/@types"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
   },
   "include": ["src", "types"],
   "compileOnSave": false

types/global.d.ts

@@ -19,7 +19,7 @@ declare namespace NodeJS {
 
 declare namespace JSX {
   interface IntrinsicElements {
-    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+    custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { width: string }
   }
 }