fusion app登錄註冊示例

来源:https://www.cnblogs.com/bushrose/archive/2023/02/12/17113690.html
-Advertisement-
Play Games

一、前言 在常見的app中，需要用戶登錄後才能使用app，本節我們使用fusion app製作一個登錄頁面，登錄成功之後再跳轉到app主頁。 二、準備工作 下載水仙app和fusion app重製版，在後臺回覆【水仙】和【fa】即可獲取下載鏈接。 二、工程配置 2.1.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";
      id="登錄頁面";
      layout_width="match_parent";
      {
        RelativeLayout;
        layout_height="match_parent";
        padding="20dp";
        layout_width="match_parent";
        {
          CardView;
          layout_height="45dp";
          id="卡片1";
          radius="10dp";
          backgroundColor="#DCDCDC";
          layout_width="match_parent";
          {
            EditText;
            textColor="0xFF000000";
            hintTextColor="0xFF585858";
            backgroundColor="0x00ffffff";
            InputType='number';
            hint="請輸入賬號";
            id="user";
            layout_width="match_parent";
          };
        };
        {
          CardView;
          layout_height="45dp";
          id="卡片2";
          layout_below="卡片1";
          layout_marginTop="20dp";
          radius="10dp";
          backgroundColor="#DCDCDC";
          layout_width="match_parent";
          {
            EditText;
            textColor="0xFF000000";
            hintTextColor="0xFF585858";
            backgroundColor="0x00ffffff";
            id="pass";
            hint="請輸入密碼";
            password="true";
            layout_width="match_parent";
          };
        };
        {
          CardView;
          layout_height="45dp";
          id="卡片3";
          layout_below="卡片2";
          layout_marginTop="20dp";
          radius="10dp";
          backgroundColor="0xFF000000";
          layout_width="match_parent";
          {
            TextView;
            layout_height="match_parent";
            textColor="0xFFFFFFFF";
            id="logod";
            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";
      id="註冊頁面";
      layout_width="match_parent";
      {
        RelativeLayout;
        layout_height="match_parent";
        padding="20dp";
        layout_width="match_parent";
        {
          CardView;
          layout_height="45dp";
          id="卡片4";
          radius="10dp";
          backgroundColor="#DCDCDC";
          layout_width="match_parent";
          {
            EditText;
            textColor="0xFF000000";
            hintTextColor="0xFF585858";
            backgroundColor="0x00ffffff";
            id="user1";
            hint="請輸入賬號(5到12位數字)";
            InputType='number';
            layout_width="match_parent";
          };
        };
        {
          CardView;
          layout_height="45dp";
          id="卡片5";
          layout_below="卡片4";
          layout_marginTop="20dp";
          radius="10dp";
          backgroundColor="#DCDCDC";
          layout_width="match_parent";
          {
            EditText;
            textColor="0xFF000000";
            hintTextColor="0xFF585858";
            backgroundColor="0x00ffffff";
            id="pass1";
            hint="請輸入密碼";
            layout_width="match_parent";
          };
        };
        {
          CardView;
          layout_height="45dp";
          id="卡片6";
          layout_below="卡片5";
          layout_marginTop="20dp";
          radius="10dp";
          backgroundColor="#DCDCDC";
          layout_width="match_parent";
          {
            EditText;
            textColor="0xFF000000";
            hintTextColor="0xFF585858";
            backgroundColor="0x00ffffff";
            hint="請輸入用戶名";
            id="name1";
            layout_width="match_parent";
          };
        };
        {
          CardView;
          layout_height="45dp";
          id="卡片7";
          layout_below="卡片6";
          layout_marginTop="20dp";
          radius="10dp";
          backgroundColor="0xFF000000";
          layout_width="match_parent";
          {
            TextView;
            layout_height="match_parent";
            textColor="0xFFFFFFFF";
            text="註冊";
            id="註冊ID";
            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配置

  • 打開登錄開關和註冊開關

水仙app主頁，點擊我的後臺-->用戶系統-->右上鍵三個點-->修改配置。

-- 獲取管理員賬號和key

管理員賬號就是註冊水仙app的qq號，在我的頁面可以查看，如下圖：

key獲取方式：水仙app主頁，點擊我的後臺-->右上角三個點-->修改配置。請將2.1代碼中admin和key替換為自己的水仙後臺賬號和key，替換後再運行。

三、成果展示

  • 註冊頁面

  • 登錄頁面

  • 登錄後的首頁

如果還不知道怎麼操作，可以下在我的工程文件，下載完導入即可：

下載鏈接：

鏈接:https://pan.baidu.com/s/1dF06LxuySdBYjs45Qodejw

提取碼:okhz

四、總結

本文主要使用了fa的子頁面跳轉，及自定義頁面功能，需要一點編程基礎，可以先學習下lua的基礎課程。歡迎大家點贊加關註，將持續更新fa的相關內容。

本文由【產品經理不是經理】gzh同步發佈，歡迎關註


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • go Grpc初體驗
    雪花演算法的原理 第一位符號位固定為0，41位時間戳，10位workld，12位序列號，位數可以有不同實現優點: 每個毫秒值包含的ID值很多，不夠可以變動位數來增加，性能佳 (依賴workld的實現)。.時間戳值在高位，中間是固定的機器碼，自增的序列在低位，整個ID是趨勢遞增的。0能夠根據業務場景數據 ...
  • QA 不講武德！線上 1 億+ 數據亂分頁，讓我搞到半夜。。
    作者：翁智華 出處：https://www.cnblogs.com/wzh2010/ 背景 一天晚上10點半，下班後愉快的坐在在回家的地鐵上，心裡想著周末的生活怎麼安排。 突然電話響了起來，一看是我們的一個開發同學，頓時緊張了起來，本周的版本已經發佈過了，這時候打電話一般來說是線上出問題了。 果然， ...
  • Python 類型註解
    Python類型註解僅在語法展示層面支持，對代碼的運行沒有任何影響，Python 解釋器在運行代碼的時候會忽略類型提示，Python的類型註解極大的提升了代碼可讀性，一定程度上緩解"動態語言一時爽，代碼重構火葬場"的尷尬。 ...
  • Maven基礎學習
    Maven Maven是專門用於管理和構建Java項目的工具，它的主要功能有： 提供了一套標準化的項目結構 提供了一套標準化的構建流程（編譯，測試，打包，發佈……） 提供了一套依賴管理機制 依賴管理 依賴管理其實就是管理你項目所依賴的第三方資源 (jar包、插件…) Apache Maven 是一個 ...
  • C++右值引用與移動語義
    一文看懂C++右值引用和移動語義 目錄 背景 什麼是右值引用 為什麼需要右值引用 移動構造 move的原理 move的應用場景 右值引用註意事項 總結 背景 C++11引入了右值引用，它也是C++11最重要的新特性之一。原因在於它解決了C++的一大歷史遺留問題，即消除了很多場景下的不必要的額外開銷。 ...
  • 11-verilog-有限狀態機
    有限狀態機 寫RTL的時候,實現一個功能的時候有很多種方法 將系統劃分為多個狀態,狀態之間有狀態的轉移,第一步,第二步,,,,形成有限狀態機 流水線技術設計,從輸入到輸出有多個步驟 有限狀態機,狀態是有限的,比如8個狀態,16個狀態等,在進行設計的時候,狀態機的狀態不要太多,狀態超過10個,就會造成 ...
  • 使用PostgreSQL保存二進位的Protobuf
    Ribbon 是Netflix公司提供的負載均衡客戶端,一般應用於服務的消費方法；Ribbon 可以解決基於負載均衡策略進行服務調用, 所有策略都會實現IRule介面；Ribbon 內置的負載策略有8種,可以通過查看IRule介面的實現類進行分析；@LoadBalanced的作用是描述RestTem... ...
  • 2018至2023我的開源項目分享
    本文主要針對博主2018畢業至2023參與軟體開發4年多以來自建的三個開源項目進行介紹與分享，希望對看到本文的新入行的初中級開發者或者未畢業想入行的學生們能夠起到幫助。下麵是項目介紹 一、newbee-mall-pro newbee-mall-pro 是博主在2019年想要自建PC商城項目時，在 n ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類