android 仿微信小demo（实现移动端，服务端）

Posted 2021-06-25 你要永远相信光z

文章目录

• android studio创建移动端项目
• 微信启动界面
• • 显示页面延迟activity
  • 启动页activity
  • 测试
• 注册功能
• • 移动端注册相关功能实现
  • • 注册activity
    • 测试
  • 服务端功能实现
  • • idea创建服务端项目
    • 配置tomcat服务器
    • 启动项目测试服务器
    • 创建web层和客户端完成数据交互
    • 创建service层处理业务逻辑功能
    • 创建dao层去操作数据库
    • 通过JDBC工具类访问数据库
    • 通过navicat可视化工具创建数据库和表
  • 测试注册功能
• 登录功能
• • 移动端登录相关功能实现
  • • 登录activity
    • 测试
  • 服务端功能实现
  • • 创建web层和客户端完成数据交互
    • 在service层中添加处理业务逻辑功能
    • 在dao层添加操作数据库的功能
  • 测试登录功能
• 微信四个页面实现
• • 微信四个页面框架
  • • 测试效果

仿微信UI设计，移动端用android studio写，服务端用idea。
主要功能包括注册登录，微信登录成功后显示微信首页（四个页面），所有功能数据处理都是在服务器中处理，数据也是从服务器获得（图片，文字）

android studio创建移动端项目

微信启动界面

我们启动微信页面时会看到有页面延迟后才跳转到启动页面，所以创建的两个activity要实现这个功能。

显示页面延迟activity

创建AppStart.java activity，用于显示页面延迟跳转到启动页功能

AppStart.java代码如下

package com.example.wxchatdemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class AppStart extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_start); //设置布局

        //延迟页面跳转
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                /*页面延迟1秒跳转到微信启动页面*/
                Intent intent = new Intent(com.example.wxchatdemo.AppStart.this, com.example.wxchatdemo.Welcome.class);
                startActivity(intent);
                com.example.wxchatdemo.AppStart.this.finish(); //结束当前activity
            }
        }, 1000);
    }
}

创建对应的布局app_start.xml文件

app_start.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/welcome" >
</LinearLayout>

启动页activity

创建上面AppStart跳转的activity Welcome.java，显示app启动页面及跳转到两个页面（登录，注册）的功能
代码如下

package com.example.wxchatdemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class Welcome extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome); //设置布局
    }

    //登录按钮点击事件处理方法
    public void welcome_login(View v) {
        Intent intent = new Intent();
       /* 页面跳转到登录界面*/
        intent.setClass(com.example.wxchatdemo.Welcome.this, Login.class);
        startActivity(intent);
        this.finish(); //结束当前activity
    }

    //注册按钮点击事件处理方法
    public void welcome_register(View v) {
        Intent intent = new Intent();
        /*页面跳转到注册界面*/
        intent.setClass(com.example.wxchatdemo.Welcome.this, com.example.wxchatdemo.Register.class);
        startActivity(intent);
        this.finish(); //结束当前activity
    }

}

对应的布局welcome.xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#eee"
    android:gravity="center"
    android:orientation="vertical">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:scaleType="fitXY"
            android:src="@drawable/wx_login_reigister" />

        <Button
            android:id="@+id/main_login_btn"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_alignLeft="@id/photoImageView"
            android:layout_alignBottom="@id/photoImageView"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/btn_style_green"
            android:onClick="welcome_login"
            android:text="登录"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <Button
            android:id="@+id/main_regist_btn"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_alignRight="@id/photoImageView"
            android:layout_alignBottom="@id/photoImageView"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/btn_style_white"
            android:onClick="welcome_register"
            android:text="注册"
            android:textColor="#00FF00"
            android:textSize="18sp" />
    </RelativeLayout>

</LinearLayout>

创建两个selector选择器btn_style_green.xml，btn_style_white.xml文件，用于控制上面welcome.xml布局按钮的不同状态

btn_style_green.xml代码如下

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_style_one_pressed" android:state_focused="false" android:state_pressed="true" />
    <item android:drawable="@drawable/btn_style_one_normal" android:state_focused="false" />
</selector>

btn_style_white.xml代码如下

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_style_two_pressed" android:state_focused="false" android:state_pressed="true" />
    <item android:drawable="@drawable/btn_style_two_normal" android:state_focused="false" />
</selector>

在AndroidMainfest.xml文件中声明创建的activity

测试

可以把welcome.java中的跳转页面注释掉，然后启动项目测试效果，如下所示

注册功能

注册功能主要包括移动端的注册相关功能(比如界面，向服务器发送http请求）和服务端的表单处理功能，而且服务器的表单验证的数据要从mysql中获取

移动端注册相关功能实现

移动端注册功能主要包括界面的实现，以及向服务器发送请求，请求成功后跳转到登录界面

注册activity

实现的功能很多,这里例举几个(如按钮是否可点击，校验手机号，改变按钮的状态需要借助下面要说明的工具类和shape文件），其他的可以自己运行体会，注释都有说明。
创建注册Register.java activity，代码如下

package com.example.wxchatdemo;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class Register extends AppCompatActivity {
    //声明组件
    private EditText username;
    private EditText phone;
    private EditText password;
    private Button button;
    //自定义一个UI修改机制
    private MyHander myhander = new MyHander();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.register); //设置布局
        /* 隐藏自带标题*/
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN //全屏显示
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR; //因为背景为浅色所以将状态栏字体设置为黑色
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }
        initViews();  // 初始化布局元素
        // 设置注册按钮是否可点击
        if (username.getText() + "" == "" || phone.getText() + "" == "" || password.getText() + "" == "") {
            button.setEnabled(false);
        } else {
            button.setEnabled(true);
        }
        inputFocus(); //监听EditView变色
        buttonChangeColor(); //登录按钮变色
        //button的点击事件事件
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*判断输入的手机号格式对不对，对的话开一个线程完成网络请求操作*/
                Pattern pattern = Pattern
                        .compile("^(13[0-9]|15[0-9]|153|15[6-9]|180|18[23]|18[5-9])\\\\d{8}$");
                Matcher matcher = pattern.matcher(phone.getText());
                if (matcher.matches()) {
                    // 开一个线程完成网络请求操作
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            httpUrlConnPost(Register.this.username.getText() + "",
                                    phone.getText() + "", password.getText() + "");
                        }
                    }).start();
                } else {
                    Toast.makeText(getApplicationContext(), "手机格式错误", Toast.LENGTH_LONG).show();
                }
            }
        });
    }

    /*在这里面获取到每个需要用到的控件的实例*/
    @SuppressLint("NewApi")
    public void initViews() {
        // 得到所有的组件
        username = (EditText) this.findViewById(R.id.reg_name);
        phone = (EditText) this.findViewById(R.id.reg_phone);
        password = (EditText) this.findViewById(R.id.reg_passwd);
        button = (Button) this.findViewById(R.idandroid 仿微信demo————微信通讯录界面功能实现（移动端，服务端）

 android 仿微信demo————注册功能实现（移动端）
 android 仿微信demo————登录功能实现（移动端）
 android 仿微信demo————微信消息界面实现（移动端）
 android 仿微信demo————微信消息界面实现（移动端）
 android 仿微信demo————登录功能实现（服务端）