组件是近代工业发展的产物,兴起于20世纪初,目的是功能模块化,前提是接口标准化,好处是构成产品的各个功能组件,由更专业的厂商生产,提高了质量,降低了成本。而生产组件的厂商,同样的组件,可应用于多类产品和多个领域,极大地扩展了市场范围。
组件是提供某一完整功能的模块,如:编辑器组件,QQ空间提供的关注组件 等。
而插件更倾向封闭某一功能方法的函数。
这两者的区别在 Javascript 里区别很小,组件这个名词用得不多,一般统称插件。
众所周知,小程序是由HTML标签来开发原生组件,那么首先需要将HTML做解析,这里我们将HTML通过node脚本解析成JSON字符串,再用Dart来解析JSON,映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果,后续再详细介绍。
为了高效解析,直接用flutter的组件名在HTML文件上开发
直接使用flutter的组件
模仿微信小程序的Api,cc对应是微信小程序的wx
以上HTML中的例子
《使用Flutter + V8/JsCore开发小程序引擎(二)》
《使用Flutter + V8/JsCore开发小程序引擎(三)》
参考如下内容:首先在Android中嵌入ReactNative:每一个AndroidStudioproject下包含多个module,所以,从命令行进入到module根目录,运行:[plain]viewplaincopy$npminit$npminstall--savereact-native$curl-o.flowconfig/facebook/react-native/master/.flowconfig上述命令会创建一些react-native依赖的一些模块,在package.json文件的scripts属性中添加:[javascript]viewplaincopy"start":"nodenode_modules/react-native/local-cli/cli.jsstart"注:如果scripts中存在其他键值对,则以逗号为分隔符。在module的根目录创建index.android.js文件,并将一下内容下入index.android.js文件:[javascript]viewplaincopy'usestrict'importReactfrom'react'import{AppRegistry,StyleSheet,Text,View}from'react-native'classHelloWorldextendsReact.Component{render(){return(Hello,World)}}varstyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},hello:{fontSize:20,textAlign:'center',margin:10,},})AppRegistry.registerComponent('HelloWorld',()=>HelloWorld)在AndroidStudio中,在moudle的build.gradle文件中添加一下内容:[javascript]viewplaincopyallprojects{repositories{maven{//AllofReactNative(JS,Androidbinaries)isinstalledfromnpmurl"$rootDir/node_modules/react-native/android"}}}在AndroidManifest.xml文件中添加网络访问权限(仅在开发或调试中需要该权限):