增加一个原生页面调用taro组件的demo

package.json

@@ -1,47 +1,48 @@
 {
-	"name": "taro-sample-weapp",
-	"version": "1.0.0",
-	"private": true,
-	"description": "与小程序原生融合的示例项目",
-	"main": "index.js",
-	"scripts": {
-		"build:weapp": "taro build --type weapp",
-		"build:h5": "taro build --type h5",
-		"build:rn": "taro build --type rn",
-		"dev:weapp": "npm run build:weapp -- --watch",
-		"dev:h5": "npm run build:h5 -- --watch",
-		"dev:rn": "npm run build:rn -- --watch",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"author": "",
-	"license": "MIT",
-	"dependencies": {
-		"@tarojs/components": "1.3.9",
-		"@tarojs/router": "1.3.9",
-		"@tarojs/taro": "1.3.9",
-		"@tarojs/taro-h5": "1.3.9",
-		"@tarojs/taro-weapp": "1.3.9",
-		"nervjs": "^1.4.3",
-		"taro-ui": "^1.1.5"
-	},
-	"devDependencies": {
-		"@tarojs/plugin-babel": "1.3.9",
-		"@tarojs/plugin-csso": "1.3.9",
-		"@tarojs/plugin-sass": "1.3.9",
-		"@tarojs/plugin-uglifyjs": "1.3.9",
-		"@tarojs/webpack-runner": "1.3.9",
-		"@types/react": "16.3.14",
-		"@types/webpack-env": "^1.13.6",
-		"babel-eslint": "^8.2.3",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"babel-plugin-transform-decorators-legacy": "^1.3.4",
-		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.6.1",
-		"eslint": "^4.19.1",
-		"eslint-config-taro": "1.3.9",
-		"eslint-plugin-import": "^2.12.0",
-		"eslint-plugin-react": "^7.8.2",
-		"eslint-plugin-taro": "1.3.9"
-	}
+  "name": "taro-sample-weapp",
+  "version": "1.0.0",
+  "private": true,
+  "description": "与小程序原生融合的示例项目",
+  "main": "index.js",
+  "scripts": {
+    "build:weapp": "taro build --type weapp",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@tarojs/components": "1.3.9",
+    "@tarojs/router": "1.3.9",
+    "@tarojs/taro": "1.3.9",
+    "@tarojs/taro-h5": "1.3.9",
+    "@tarojs/taro-weapp": "1.3.9",
+    "nervjs": "^1.4.3",
+    "taro-ui": "^1.1.5",
+    "@tarojs/with-weapp": "1.3.9"
+  },
+  "devDependencies": {
+    "@tarojs/plugin-babel": "1.3.9",
+    "@tarojs/plugin-csso": "1.3.9",
+    "@tarojs/plugin-sass": "1.3.9",
+    "@tarojs/plugin-uglifyjs": "1.3.9",
+    "@tarojs/webpack-runner": "1.3.9",
+    "@types/react": "16.3.14",
+    "@types/webpack-env": "^1.13.6",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "eslint": "^4.19.1",
+    "eslint-config-taro": "1.3.9",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-taro": "1.3.9"
+  }
 }

src/components/tab/tab.wxss

@@ -0,0 +1 @@
+.tab {}

src/components/tabTaro/tabTaro.js

@@ -0,0 +1,73 @@
+/*
+ * @Description: Please Edit Description Info
+ * @Author: chenfx
+ * @Date: 2019-08-09 16:38:44
+ * @LastEditTime: 2019-08-09 17:10:05
+ */
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import withWeapp from '@tarojs/with-weapp'
+import './tabTaro.scss'
+
+@withWeapp('Component')
+class _C extends Taro.Component {
+  static defaultProps = {
+    myProperty: ''
+  }
+  behaviors = []
+  _observeProps = [
+    {
+      name: 'myProperty',
+      observer: function (newVal, oldVal, changedPath) {
+        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
+        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
+      }
+    }
+  ]
+  state = {}
+  attached = () => { }
+  moved = () => { }
+  detached = () => { }
+  componentWillMount = () => {
+    console.log('----taro component will mount')
+  }
+  componentDidMount = () => {
+    console.log('----taro component did mount')
+  }
+  componentDidShow = () => {
+    console.log('----taro component did show myProperty data:', this.props.myProperty)
+  }
+  onMyButtonTap = () => {
+    this.setData({
+      // 更新属性和数据的方法与更新页面数据的方法类似
+    })
+  }
+  _myPrivateMethod = () => {
+    // 这里将 data.A[0].B 设为 'myPrivateData'
+    this.setData({
+      'A[0].B': 'myPrivateData'
+    })
+  }
+  _propertyChange = (newVal, oldVal) => { }
+  clickHandler = () => {
+    debugger;
+    console.log('sdsd')
+    this.triggerEvent('myevent', { f: 1 })
+    // !!this.props.onMyevent && this.props.onMyevent({ f: 1 })
+  }
+  config = {
+    component: true
+  }
+
+  render() {
+    const { myProperty: myProperty, myProperty2: myProperty2 } = this.props
+    const { } = this.state
+    return (
+      <View className='tab' onClick={this.clickHandler}>
+        {myProperty}
+      </View>
+    )
+  }
+}
+
+export default _C

src/components/tabTaro/tabTaro.scss

@@ -0,0 +1 @@
+.tab {}

src/pages/native/native.js

@@ -1,29 +1,46 @@
+/*
+ * @Description: Please Edit Description Info
+ * @Author: chenfx
+ * @Date: 2019-08-09 16:37:43
+ * @LastEditTime: 2019-08-09 17:02:17
+ */
 const { add } = require('../../utils/util')
 
 Page({
   data: {
     text: 'This is page data.',
-    x: add(1, 2)
+    x: add(1, 2),
+    taroText: 'This is taro component data......'
   },
-  created (options) {
+  created(options) {
     console.log(options)
     // Do some initialize when page load.
   },
-  onReady () {
+  onReady() {
     // console.log(this.selectComponent())
     // Do something when page ready.
   },
   // Event handler.
-  viewTap () {
+  // viewTap() {
+  //   debugger;
+  //   this.setData({
+  //     text: 'Set some data for updating view.'
+  //   }, function () {
+  //     // this is setData callback
+  //   })
+  // },
+
+  handler(e) {
+    console.log(e)
     this.setData({
       text: 'Set some data for updating view.'
-    }, function() {
-      // this is setData callback
     })
   },
-
-  handler (e) {
-    console.log(e)
+  taroHandler(e) {
+    console.log('---taro component trigger', e)
+    this.setData({
+      text: 'taro components click handle change text.....'
+    })
   },
   customData: {
     hi: 'MINA'

src/pages/native/native.json

@@ -5,6 +5,7 @@
   "backgroundColor": "#eeeeee",
   "backgroundTextStyle": "light",
   "usingComponents": {
-    "tab": "../../components/tab/tab"
+    "tab": "../../components/tab/tab",
+    "tabNative": "../../components/tabTaro/tabTaro"
   }
 }

src/pages/native/native.wxml

@@ -1,4 +1,10 @@
 <view class="native" bindtap="viewTap">
+  <text>这里是页面调用 原生 组件</text>
   <text>{{text}}{{x}}</text>
-  <tab myProperty="kkl" bindmyevent="handler" />
-</view>
+  <tab myProperty="---------------------native component" bindmyevent="handler" />
+  <view class='taro-component'>
+    <text>这里是原生页面调用 taro 组件</text>
+    <text>{{taroText}}</text>
+    <tabNative myProperty="+++++++++++++++++++taro component" bindmyevent="taroHandler"></tabNative>
+  </view>
+</view>

src/pages/native/native.wxss

@@ -1,3 +1,9 @@
 .native {
   color: red;
 }
+
+.taro-component {
+  display: block;
+  color: #333;
+  margin-top: 20px;
+}