Weex开发入门Native交互篇(安卓)

安卓接入weex的sdk

说明:接入方式网上可以找到很多,这里说的是我们真是项目的使用和交互,因为某些原因不能贴代码,此文章只能当做思路

1.接入形式

在安卓中是已lib的形式引入,build.gradle中
//weex sdk
api 'org.apache.weex:sdk:0.28.0'
//binding-x
implementation 'com.alibaba.android:bindingx-core:1.1.5'
implementation 'com.alibaba.android:bindingx_weex_plugin:1.1.4'

2.weex界面创建和在运行发布

(1)使用开发工具

webstorm(我自己用),vscode,自己选择

(2)创建界面,我们的工程中

1.src---->pages---->中创建vue文件,简单点就复制一个,删掉别人的代码,div写个title看看

2.创建界面完成后再src的index.vue中添加page = require('@/pages/你刚才创建的界面名字');

3.上面两个完成在package.json文件中加入

"你刚才创建的界面名字": "cross-env NODE_ENV=development PAGE_NAME=你刚才创建的界面名字 webpack-dev-server --progress",

接着添加pack打包

"pack:dkstockpool:axg": "cross-env NODE_ENV=common PAGE_NAME=dkstockpool BUNDLE_ID=你新建的文件名称webpack &&MINSUPP_VERSION='1.2.0' BUNDLE_ID=你新建的文件名称APP_ID=  ZIP=true BUNDLE_VERSION='' node ./deploy",

运行

npm start

发包:webstorm,直接运行

4.实现一个简单的weex界面

(1).ui部分:

(2).数据逻辑部分:

(3).样式部分:

(4).部分说明

使用:import引入,在添加components组件名称

components: {
xxx,
}

关于属性:props就是定义属性

props: ['currentItem', 'isAdd']

还有一种写法,带默认值

props: {
backgroundColor: {
  type: String,
  default: '#fff'
},
refreshEnable: { // 刷新是否可用
  type: Boolean,
  default: true
},
loadMoreEnable: { // 加载更多是否可用
  type: Boolean,
  default: true
}
......
}
没全部贴出来

有关于页面的编写的使用标签就自行百度了

(5).数据部分说明

你可能感兴趣的:(Weex开发入门Native交互篇(安卓))