2 Star 13 Fork 7

放羊娃 / android-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

android-vue

效果图

介绍

用vue来创建界面,使用webview承载页面,通过反射实现请求数据

软件架构

软件架构说明,使用android webview 承载vue页面,在vue页面请求通过webView调用js方法,通过反射执行请求,并返回结果。

安装教程

  1. 复制或下载项目
  2. 使用android studio打开项目
  3. 使用命令行运行vue项目项目
  4. 修改使用参数查看结果
  5. 修改配置参数打包vue项目打包成apk

使用说明

  1. 下载项目
  2. 打开项目的vue目录,使用命令执行行 npm i 命令初始化vue项目
  3. 在android stuido 中打开项目
  4. com.panvan.app.Config类中修改配置参数
  5. 当使用运行调试时,将APK=false;当打包时反之(打包前请先使用npm run build打包vue项目,之后在打包APK
  6. 在修改APK之后修改getWebIndexUrl()方法中的返回值,根据实际情况进行修改。如果使用手机调试请修改成http://ip地址:端口号,如果使用androi stuido 自带模拟器则需要修改成对应的ip(10.0.2.2根据实际情况修改);
  7. 显示标题栏和显示状态栏,通过showTitleshowStatusBar进行控制
  8. 如果修改整改项目的包名称,则一定需要修改basePackages参数

整个项目包主要结构

|android-studio-app //存放android app基座的android studio 代码
	|-app
		|--src
			|--main
				|--assets //存放web页面
					|++client.html  //用来进行链接上线后的vue 页面,里边使用iframe src 进行链接
				|--java
					|--com.panvan.app  //项目包
						|--annotation 	//反射所需要的注解类
						|--controller	 //(包名不可更改)请求控制类
						|--entity     	//实体类
						|--response   	//请求相应类
						|--services   	//服务类
				|--res
|vue-page //存放需要显示的vue web页面 。可使用不同的vue版本
	|--public
	|--src
		|--api
		|--assets
		|--server
		|--components
		|--layout
		|--route
		|--server
			|++android-proxy.js //关键脚本,用来支持通过webview 调用android 方法
			...
		|--store
		|--utils
		|--views
		|++App.vue
		|++android-vue.js  //关键脚本,通过vue的注册方式进行注册,后只需要在main.js进行引入,即可使用相关android调用
		|++defaultImportComp.js 
		|++main.js

请求说明

1.请求支持类型 (更多的类型转换需要你的支持
范围 类型
基本类型 String,Boolean,Integer,Double,Float,Long,Byte,Short,Character,Date(Date的各种格式支持需要在Config类中添加支持,可以将使用频率高的格式配置在数组最开始位置)
数组和集合 数组如Article [](实体类数组) ,String [] 字符串数组等其他类型;集合List<?>ArrayList<?>
2.请求参数说明

目前的项目中有请求相关的示例

2.1 测试请求类型
package com.panvan.app.controller;

import com.panvan.app.annotation.AppAutowired;
import com.panvan.app.annotation.AppController;
import com.panvan.app.annotation.AppRequestMapper;
import com.panvan.app.annotation.AppRequestMethod;
import com.panvan.app.entity.Article;
import com.panvan.app.services.TestServices;

import java.util.Date;
import java.util.List;

@AppController(path = "test")
public class TestController {

		/**
		 * 单字符串
		 */
    @AppRequestMapper(path = "/get6", method = AppRequestMethod.GET)
    public String getTest6(String str) {
        return str;
    }
		
		/**
		 * 多个参数
		 */
    @AppRequestMapper(path = "/get", method = AppRequestMethod.GET)
    public String getTest(String str, int str2) {
        return "这是修改后的字符串" + str + "," + str2;
    }
		
		/**
		 * 多个字符串返回数组
		 */
    @AppRequestMapper(path = "/get2", method = AppRequestMethod.GET)
    public String[] getTest2(String str, int str2) {
        return new String[]{"这是修改后的字符串", str, str2 + ""};
    }

		/**
		 * 多个参数和数组
		 */
    @AppRequestMapper(path = "/get3", method = AppRequestMethod.GET)
    public String[] getTest3(String[] str, int str2) {
        return new String[]{"这是修改后的字符串", "数组长度是:" + str.length, str2 + ""};
    }
		
		/**
		 * 实体类
		 */
    @AppRequestMapper(path = "/get4", method = AppRequestMethod.GET)
    public Article getTest4(Article article) {
        article.setUpdatedTime(new Date());
        return article;
    }

		/**
		 * 集合,泛型为实体类 List<Article>
		 */
    @AppRequestMapper(path = "/get5", method = AppRequestMethod.GET)
    public List<Article> getTest5(List<Article> articles) {
        return articles;
    }

		/**
		 * 自动注入调用时实例化
		 */
    @AppAutowired
    private TestServices testServices;
		
		/**
		 * 测试自动注入实例化对象
		 */
    @AppRequestMapper(path = "/get7", method = AppRequestMethod.GET)
    public String getTest7() {
        return testServices.getString();
    }

}
2.2各方法对应的vue请求示例

在请求方法中对请求类型和请求参数做了默认值处理,当method为假值时,默认请求为GET,当请求参数为params假值时,默认做''处理

	/**
	 * 单字符串。当有且仅有一个参数时,直接是参数值
	 */			
	let res=this.$ano.requestSync('test/get6','get','张三');
	
	/**
	 * 多个参数
	 */
	let res=this.$ano.requestSync('test/get','get',{str2: '2',str: 'html'});
	
	/**
	 *  多个字符串返回数组
	 */
	let res=this.$ano.requestSync('test/get2','get',{str2: '2',str: 'html'});	
	
	/**
	 *  多个参数和数组
	 */
	let res=this.$ano.requestSync('test/get3','get',{
			str2: '2',
			str: ['html', '张某某']
		});
						
	/**
	 *  实体类
	 */
	let res=this.$ano.requestSync('test/get4','get', {
			content: '这是文章内容',
			id: '123',
			image: 'imagess',
			isDelete: '0',
			createdBy: '1',
			createdTime: new Date(),
			updatedTime: '2014年02月08日',
			title: '这是标题'
		});
         
	 /**
		*  集合,泛型为实体类 List<Article>
		*/
  let res=this.$ano.requestSync('test/get5','get', [{
			content: '这是文章内容1',
			id: '123',
			image: 'imagess1',
			isDelete: '0',
			createdBy: '1',
			createdTime: new Date(),
			updatedTime: '2014年02月08日',
			title: '这是标题'
		}, {
			content: '这是文章内容2',
			id: '123',
			image: 'imagess2',
			isDelete: '1',
			createdBy: '2',
			createdTime: new Date(),
			updatedTime: '2023年02月08日',
			title: '这是标题3'
		}]);
		
	/**
	 *   测试自动注入实例化对象
	 */
	let res=this.$ano.requestSync('test/get7');
2.3注解使
  • @AppController 添加到controller包下的上的注解
    • path表示请求路径

package com.panvan.app.controller;

@AppController(path = "test")
public class TestController {
	
}
  • @AppRequestMapper 添加到controller保险类的方法上的注解
    • path表示请求路径 ;method表示请求方式

package com.panvan.app.controller;

@AppController(path = "test")
public class TestController {

		/**
		 * 单字符串
		 */
		@AppRequestMapper(path = "/get6", method = AppRequestMethod.GET)
		public String getTest6(String str) {
		    return str;
		}
}
  • @AppAutowiredcontroller包下的申明变量时,有需要实例化的对象变量

package com.panvan.app.controller;

@AppController(path = "test")
public class TestController {
    
   	 /**
   		* 自动注入调用时实例化
   		*/
   	 @AppAutowired
   	 private TestServices testServices;

}

参与贡献

特技

空文件

简介

用vue来创建界面,使用webview承载页面,通过反射实现请求数据 用vue来创建界面,使用webview承载页面,通过反射实现请求数据, 【当前已不再推荐使用】,建议直接上手这个项目Android-proxy (https://gitee.com/jpw_code/android-proxy) 展开 收起
Android 等 5 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
Android
1
https://gitee.com/jpw_code/android-vue.git
git@gitee.com:jpw_code/android-vue.git
jpw_code
android-vue
android-vue
master

搜索帮助