fusion app登录注册示例

一、前言

在常见的app中，需要用户登录后才能使用app，本节我们使用fusion app制作一个登录页面，登录成功之后再跳转到app主页。

二、准备工作

下载水仙app和fusion app重制版，在后台回复【水仙】和【fa】即可获取下载链接。

二、工程配置2.1.fusion app配置

新建工程

在主页点击加号新建工程–>选择空白模板，再点击创建，创建完成按如下配置：

增加子页面

在子页面，点击+号，选择底栏模板，页面名称“哔哩哔哩”。注意这里的页面名称需要和代码中进入子页面("哔哩哔哩")中的文字匹配，这也是fa实现子页面跳转的关键。

再点击刚建好的子页面，在程序启动事件中增加如下代码：

加载网页("https://m.bilibili.com/index.html")

增加程序启动事件

在主页面（左上角显示为工程编辑的是主页面）自定义事件–>程序启动中，增加如下代码：

layout={  LinearLayout;  layout_height="fill";  layout_width="fill";  orientation="vertical";  {    LinearLayout;    layout_height="30%h";    layout_width="match_parent";    {      RelativeLayout;      layout_height="match_parent";      layout_width="match_parent";      {        TextView;        layout_height="wrap_content";        textSize="20sp";        text=[==[Hello,欢迎来到 我的视频站]==];        layout_marginLeft="20dp";        textColor="0xFF000000";        layout_marginTop="70dp";        layout_width="wrap_content";      };    };  };  {    LinearLayout;    layout_height="45%h";    layout_width="match_parent";    orientation="vertical";    {      CardView;      layout_height="match_parent";     ;      layout_width="match_parent";      {        RelativeLayout;        layout_height="match_parent";        padding="20dp";        layout_width="match_parent";        {          CardView;          layout_height="45dp";         ;          radius="10dp";          backgroundColor="#DCDCDC";          layout_width="match_parent";          {            EditText;            textColor="0xFF000000";            hintTextColor="0xFF585858";            backgroundColor="0x00ffffff";            InputType='number';            hint="请输入账号";           ;            layout_width="match_parent";          };        };        {          CardView;          layout_height="45dp";         ;          layout_below="卡片1";          layout_marginTop="20dp";          radius="10dp";          backgroundColor="#DCDCDC";          layout_width="match_parent";          {            EditText;            textColor="0xFF000000";            hintTextColor="0xFF585858";            backgroundColor="0x00ffffff";           ;            hint="请输入密码";            password="true";            layout_width="match_parent";          };        };        {          CardView;          layout_height="45dp";         ;          layout_below="卡片2";          layout_marginTop="20dp";          radius="10dp";          backgroundColor="0xFF000000";          layout_width="match_parent";          {            TextView;            layout_height="match_parent";            textColor="0xFFFFFFFF";           ;            text="登录";            gravity="center";            layout_width="match_parent";          };        };        {          TextView;          layout_alignParentRight="true";          textColor="#ff757575";          text="还没有账号?立刻注册";          onClick=function()            注册页面.setVisibility(View.VISIBLE)            登录页面.setVisibility(View.GONE)          end;          layout_marginTop="20dp";          layout_below="卡片3";        };      };    };    {      CardView;      layout_height="match_parent";     ;      layout_width="match_parent";      {        RelativeLayout;        layout_height="match_parent";        padding="20dp";        layout_width="match_parent";        {          CardView;          layout_height="45dp";         ;          radius="10dp";          backgroundColor="#DCDCDC";          layout_width="match_parent";          {            EditText;            textColor="0xFF000000";            hintTextColor="0xFF585858";            backgroundColor="0x00ffffff";           ;            hint="请输入账号(5到12位数字)";            InputType='number';            layout_width="match_parent";          };        };        {          CardView;          layout_height="45dp";         ;          layout_below="卡片4";          layout_marginTop="20dp";          radius="10dp";          backgroundColor="#DCDCDC";          layout_width="match_parent";          {            EditText;            textColor="0xFF000000";            hintTextColor="0xFF585858";            backgroundColor="0x00ffffff";           ;            hint="请输入密码";            layout_width="match_parent";          };        };        {          CardView;          layout_height="45dp";         ;          layout_below="卡片5";          layout_marginTop="20dp";          radius="10dp";          backgroundColor="#DCDCDC";          layout_width="match_parent";          {            EditText;            textColor="0xFF000000";            hintTextColor="0xFF585858";            backgroundColor="0x00ffffff";            hint="请输入用户名";           ;            layout_width="match_parent";          };        };        {          CardView;          layout_height="45dp";         ;          layout_below="卡片6";          layout_marginTop="20dp";          radius="10dp";          backgroundColor="0xFF000000";          layout_width="match_parent";          {            TextView;            layout_height="match_parent";            textColor="0xFFFFFFFF";            text="注册";           ;            gravity="center";            layout_width="match_parent";          };        };        {          TextView;          layout_alignParentRight="true";          textColor="#ff757575";          text="已有账号?立刻登录";          onClick=function()            登录页面.setVisibility(View.VISIBLE)            注册页面.setVisibility(View.GONE)          end;          layout_marginTop="20dp";          layout_below="卡片7";        };      };    };  };  {    LinearLayout;    layout_height="match_parent";    layout_width="match_parent";  };};activity.setContentView(loadlayout(layout))-- 上面为布局代码，以下为登录注册的核心代码local cjson=import "cjson"admin="512357657"   -- 替换为自己水仙后台的账号，也就是qq号key="9a712a0c17d598d38bdc"     -- 替换为自己水仙后台的key,水仙app主页，点击我的后台-->右上角三个点-->修改配置-- 注册注册ID.onClick=function()  local url="http://shuixian.ltd/main/api/user/register.php"  -- 请将下面admin和key等于号的内容替换成自己的水仙后台  data="admin="..admin.."&user="..tostring(user1.getText()).."&password="..tostring(pass1.getText()).."&name="..tostring(name1.getText()).."&key="..key  网络模块.提交(url,data,nil,"utf-8",nil,function(code,content,cookie,header)    if code==200 and content then--成功      local JSON=cjson.decode(content)      if JSON.code==1 then        print("注册成功,请在登录页面登录")        登录页面.setVisibility(View.VISIBLE)        注册页面.setVisibility(View.GONE)      else        print("注册失败"..JSON.msg)      end    else      print('网络错误或参数错误')    end  end)end-- 登录logod.onClick=function()  local url="http://shuixian.ltd/main/api/user/login.php"  local data="admin="..admin.."&user="..tostring(user.getText()).."&password="..tostring(pass.getText()).."&key="..key  网络模块.提交(url,data,nil,"utf-8",nil,function(code,content,cookie,header)    if code==200 and content then--成功      local JSON=cjson.decode(content)      if JSON.code==1 then        进入子页面("哔哩哔哩")      else        print("登录失败"..JSON.msg)      end    else      print('网络错误或参数错误')    end  end)end

2.2. 水仙app配置