Repository: incubator-weex-site Updated Branches: refs/heads/master 0c10fd3e3 -> 262c556f1
[WEEX-86][doc] Adds a guide on how to create a plugin (#8) + [guide] create a plugin Update how to create a plugin according to latest developments in the plugin generator. Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/262c556f Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/262c556f Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/262c556f Branch: refs/heads/master Commit: 262c556f127767a4c5ceae7e968ca74fb98744f6 Parents: 0c10fd3 Author: Tiago Alves <tral...@gmail.com> Authored: Sun Nov 5 12:22:08 2017 -0200 Committer: Hanks <zhanghan...@gmail.com> Committed: Tue Nov 14 23:30:08 2017 +0800 ---------------------------------------------------------------------- source/guide/create-a-plugin.md | 131 +++++++++++++++++++++++++++++++ source/guide/extend-android.md | 2 +- source/guide/extend-ios.md | 2 +- source/guide/extend-js-framework.md | 2 +- source/guide/extend-web-render.md | 2 +- 5 files changed, 135 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/262c556f/source/guide/create-a-plugin.md ---------------------------------------------------------------------- diff --git a/source/guide/create-a-plugin.md b/source/guide/create-a-plugin.md new file mode 100644 index 0000000..8f57ab9 --- /dev/null +++ b/source/guide/create-a-plugin.md @@ -0,0 +1,131 @@ +--- +title: Create a plugin +type: guide +group: Extend +order: 6.1 +version: 2.1 +--- + +The weex plugin development kit is designed to help developers build weex plugins quickly and easily, allowing them to integrate native functionality without changing business code. + +The plugin abstracts a functionality and/or component to the rest of the app by including the specific implementation for each target platform ([Web](#web), [Android](#android) and [iOS](#ios)) and exposing it through a common API. + +## Getting started + +Create a weex plugin with weexpack: +``` +weex plugin create weex-my-plugin +``` +This will create a project structure similar to this: +``` + âââ android (Android native code project) + â âââ ... + âââ ios (iOS native code project) + â âââ ... + âââ js (html5 project) + â âââ ... + âââ examples (sample app) + â âââ index.vue + âââ playground (sample projects to test the plugin) + â âââ android + â âââ browser + â âââ ios + âââ WeexMyPlugin.podspec (iOS .podspec) + âââ package.json + âââ README.md + ``` + +The `examples` directory contains a weex app that you can use to test your plugin. This test app will be loaded from the playground apps that are installed in the `playground` folder. + +## Web + +### Developing and testing with the playground app +1. Build the example weex app in `examples/index.vue`: + ``` + npm run start:web + ``` + Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you. The app will be served in the port 12580 (e.g. http://localhost:12580). + +2. Edit the plugin JavaScript/HTML/CSS code under the `js` folder. Refresh the test app to update the plugin in the playground app. + +### Extending Web functionality +See [Extend Web Render](./extend-web-render.html). + +## Android + +### Developing and testing with the playground app +1. Build the example weex app in `examples/index.vue`: + ``` + npm run start:native + ``` + Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you. + +2. Open the android project under `playground/android` with Android Studio. + + The native plugin code will be linked as a gradle dependency. You can develop and test the plugin directly from Android Studio. You can also use `weex debug` to debug the playground app. + +### Extending native functionality +See [Extend Android](./extend-android.html). + +## iOS + +### Developing and testing with the playground app +1. Build the example weex app in `examples/index.vue`: + ``` + npm run start:native + ``` + Webpack will be listening for changes in `examples/index.vue` and re-build the example app for you. + +2. Open the iOS playground app and install the dependencies: + ``` + cd playground/ios + pod install + ``` +3. Open `WeexDemo.xcworkspace` in Xcode. + + The native plugin code will be linked as cocoa pod. You can develop and test the plugin directly from Xcode. You can also use `weex debug` to debug the playground app. + +### Extending native functionality +See [Extend iOS](./extend-ios.html). + +### Publishing a plugin to the cocapods repository +1. Edit the `*.podspec` generated in the root of the plugin project. +2. Check the correctness of the iOS plugin: + ``` + pod spec lint --allow-warnings + ``` +3. Publish to cocoapods repository: + ``` + pod trunk push --allow-warnings + ``` + +## Publish the plugin in the weex market +You can publish to the [Weex Market](../tools/market.html) with the simple command: +``` +weex plugin publish +``` + +## How to use the plugin in another project + +### Using `weexpack`: +``` +weex plugin add weex-kdp +``` + +### Manual integration: +#### iOS: +``` +pod 'WeexMyPlugin' +``` + +#### Android: +Add the following line to the dependencies list in the build.gradle file for the corresponding project. +``` + compile '${groupId}:weexkdp:{$version}' +``` +> Note: You need to specify the groupId and $version of the project. + +#### Web integration +``` + npm install weexkdp +``` http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/262c556f/source/guide/extend-android.md ---------------------------------------------------------------------- diff --git a/source/guide/extend-android.md b/source/guide/extend-android.md index 52c8849..5eb0cbd 100644 --- a/source/guide/extend-android.md +++ b/source/guide/extend-android.md @@ -2,7 +2,7 @@ title: Extend Android type: guide group: Extend -order: 6.2 +order: 6.3 version: 2.1 --- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/262c556f/source/guide/extend-ios.md ---------------------------------------------------------------------- diff --git a/source/guide/extend-ios.md b/source/guide/extend-ios.md index 83a297c..50a3223 100644 --- a/source/guide/extend-ios.md +++ b/source/guide/extend-ios.md @@ -2,7 +2,7 @@ title: Extend iOS type: guide group: Extend -order: 6.3 +order: 6.4 version: 2.1 --- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/262c556f/source/guide/extend-js-framework.md ---------------------------------------------------------------------- diff --git a/source/guide/extend-js-framework.md b/source/guide/extend-js-framework.md index d7fcf6d..eebf325 100644 --- a/source/guide/extend-js-framework.md +++ b/source/guide/extend-js-framework.md @@ -2,7 +2,7 @@ title: Extend JS framework type: guide group: Extend -order: 6.4 +order: 6.5 version: 2.1 --- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/262c556f/source/guide/extend-web-render.md ---------------------------------------------------------------------- diff --git a/source/guide/extend-web-render.md b/source/guide/extend-web-render.md index 7fa09ba..b21ea45 100644 --- a/source/guide/extend-web-render.md +++ b/source/guide/extend-web-render.md @@ -2,7 +2,7 @@ title: Extend Web Render type: guide group: Extend -order: 6.1 +order: 6.2 version: 2.1 ---
