我學到了在Google Play上使用NUXT構建Word Game應用程序的內容-css教學-PHP中文網

“ Quina”這個名字之所以出現，是因為它在拉丁語中的意思是“一次”（無論如何，Google告訴我）。傳統遊戲通常使用四個字母的單詞或有時四位數（或者是策劃者，四種顏色）； Quina使用沒有重複的字母的五個字母的單詞，因此遊戲應該具有根據自己的規則扮演的名稱，這很合適。（我不知道原始拉丁語是如何發音的，但是我說“ Quinn-ah”，這可能是錯誤的，但是，嘿，這是我的遊戲，對嗎？）

在大約四個月的時間裡，我晚上和周末都在建立該應用程序。我想花這篇文章來談論遊戲背後的技術，所涉及的決定以及所學到的經驗教訓，以防您有興趣自己走的道路。

選擇nuxt

我是Vue的忠實擁護者，並希望將這個項目用作擴大我對其生態系統的了解的一種方式。我考慮過使用另一個框架（我還在Svelte和React中構建了項目），但是我覺得Nuxt遇到了熟悉，易用性和成熟度的最佳位置。（順便說一句，如果您不知道或沒有猜到過：NUXT可以公平地描述為Next.js的Vue）

以前我對Nuxt並沒有太深。只有幾個非常小的應用程序。但是我知道NUXT可以編譯到靜態應用程序中，這正是我想要的 - 不擔心（節點）服務器。我還知道NUXT可以像將VUE組件放入A /頁文件夾一樣容易處理路由，這非常吸引人。

另外，儘管Vuex（Vue的官方國家管理層）本身並不是很複雜，但我讚賞Nuxt添加一點糖的方式使其變得更加簡單。（順便說一句，NUXT以多種方式使事情變得容易，例如不需要您在使用它們之前明確導入組件；您可以將它們放入標記中，而Nuxt將其弄清楚並根據需要弄清楚它並自動象徵。）

最後，我提前知道我正在構建一個漸進式網絡應用程序（PWA），因此已經有一個NUXT PWA模塊可以幫助構建所涉及的所有功能（例如已經包裝並準備就緒的離線功能的服務工作者）是一個很大的吸引力。實際上，有一個令人印象深刻的NUXT模塊可用於任何看不見的障礙。這使NUXT成為最簡單，最明顯的選擇，而我從未後悔。

我最終在進行的過程中使用了更多模塊，包括Stellar Nuxt內容模塊，該模塊可讓您在Markdown中編寫頁面內容，甚至可以混合Markdown和Vue組件的混合物。我也將該功能用於“常見問題解答”頁面和“如何播放”頁面（因為在Markdown中寫作比硬編碼HTML頁面要好得多）。

通過網絡實現本地應用感覺

奎納（Quina）最終會在Google Play商店中找到房屋，但是無論它如何玩耍，我都希望它感覺像是一開始就像一個成熟的應用程序。

首先，這意味著一個可選的黑模式，以及減少最佳可用性運動的設置，就像許多本機應用程序一樣（在減少運動的情況下，就像動畫一樣的任何東西）。

在引擎蓋下，兩個設置最終都是應用程序VUEX數據存儲中的布爾值。如果為true，則設置將在應用程序的默認佈局中呈現特定類。 NUXT佈局是“包裝”您所有內容的VUE模板，並在您的應用程序的所有頁面上呈現（通常用於共享標頭和頁腳等內容，但對全球設置也有用）：

 

  <div>
    <nuxt></nuxt>
  </div>


<script>
導入{mapgetters}從&#39;vuex&#39;

導出默認{
  計算：{
    ... mapgetters（[&#39;darkmode&#39;，&#39;reducemotion&#39;]），），
  }，，
  //此處的其他佈局組件代碼
}
</script>

登入後複製

說到設置：儘管Web應用程序分為幾個不同的頁面 - 菜單，設置，關於，播放等。

應用程序中的每個設置也都同步到LocalStorage和Vuex Store，允許在會話之間保存和加載值，除了在用戶在頁面之間導航時跟踪設置。

說到導航：在頁面之間移動是我覺得有很多機會通過添加整頁過渡來使Quina感覺像本地應用的另一個領域。

總體而言，VUE過渡非常簡單 - 您只是為“ TO”和“從”過渡狀態編寫特殊命名為CSS類 - 但是NUXT更進一步，並允許您在頁面VUE文件中僅使用一行單行設置完整頁面過渡：

 
<script>
導出默認{
  過渡：“頁面滑動”
  // ...其餘的組件屬性
}
</script>

登入後複製

該過渡屬性是強大的；它使NUXT知道我們希望每次導航到或遠離它時都將頁面滑動過渡應用於此頁面。從那裡開始，我們需要做的就是定義處理動畫的類，就像您在任何VUE過渡時一樣。這是我的頁面滑動SCSS：

 / * Assets/css/_animations.scss */

.page-slide {
  ＆-enter-Active {
    過渡：所有0.35s立方晶體（0，0，0.25，0，0.75）;
  }

  ＆ -  leave-active {
    過渡：所有0.35s立方晶體（0.75，0，1，0.75）;
  }

  ＆-進入，
  ＆ -  leave-to {
    不透明度：0;
    變換：翻譯（1REM）;

    。
      變換：無！重要；
    }
  }

  ＆ -  leave-to {
    變換：translatey（-1REM）;
  }
}

登入後複製

請注意。降低運動班；這就是我們在上面的佈局文件中談論的內容。當用戶指出他們更喜歡減少運動（通過媒體查詢或手動設置）時，它可以防止視覺運動，通過禁用任何變換屬性（似乎值得使用分裂！重要的標誌）。但是，不透明度仍然可以褪色，但是，這並不是真正的運動。

關於過渡和處理404s的旁注：當然，過渡和路由是由引擎蓋下的JavaScript處理（確切地說是Vue路由器），但是我遇到了一個令人沮喪的問題，腳本會停止在空閒頁面上運行（例如，如果用戶將應用程序在後台打開或在背景中打開時，我會停止使用）。回到這些空閒頁面並單擊鏈接時，Vue路由器將停止運行，因此該鏈接將被視為相對和404。

示例： /FAQ頁面閒置；用戶返回它，然後單擊鏈接以訪問 /選項頁面。該應用程序將嘗試轉到 /常見問題 /選項，這當然不存在。

我對此的解決方案是一個自定義錯誤。 VUE頁面（這是一個自動處理所有錯誤的NUXT頁面），我將在傳入路徑上運行驗證並將其重定向到路徑的盡頭。

 //佈局/error.vue
安裝（）{
  const lastpage ='/'this。 $ route.fullpath.split（'/'）。 pop（）
  //不要創建重定向循環
  如果（lastpage！==this。$ route.fullpath）{
    這個。 $ router.push（{{
      路徑：最後一個頁面，
    }））
  }
}

登入後複製

這適用於我的用例，因為a）我沒有任何嵌套路線； b）最後，如果路徑不有效，它仍然達到404。

振動和聲音

過渡很不錯，但我也知道Quina不會感覺像是一個本地應用，尤其是在智能手機上 - 沒有振動和聲音。

借助導航器API，如今，瀏覽器相對容易實現振動。大多數現代瀏覽器都可以允許您調用window.navigator.fibrate（）給用戶一點嗡嗡聲或一系列嗡嗡聲 - 或者，使用非常短的持續時間，一點點觸覺反饋，例如當您在智能手機鍵盤上點擊鍵時。

顯然，出於某些原因，您想謹慎使用振動。首先，因為太多很容易成為糟糕的用戶體驗；其次，因為並非所有設備/瀏覽器都支持它，因此您需要非常謹慎地謹慎使用振動（）函數，以免您導致關閉當前運行腳本的錯誤。

就個人而言，我的解決方案是設置Vuex Getter，以驗證用戶允許振動（可以從“設置”頁面禁用）；當前的上下文是客戶端，而不是服務器；最後，該功能存在於當前瀏覽器中。（ES2020可選鏈接在最後一部分也將在這里工作。）

 // store/getters.js
振動（狀態）{
  如果 （
    process.client &amp;&amp;
    state.options.振動&amp;&amp;
    typeof window.navigator.dibrate！ =='undefined'
  ）{
    返回true
  }
  返回false
}，，

登入後複製

旁注：檢查process.client在NUXT中很重要，並且許多其他可能在節點上運行的代碼的框架 - 由於窗口並不總是存在。即使您在靜態模式下使用NUXT，這也是正確的，因為組件在構建時間期間在節點中驗證。 process.client（及其相反的process.server）是僅在運行時驗證代碼當前環境的nuxt nieties，因此它們非常適合隔離瀏覽器的代碼。

聲音是應用程序用戶體驗的另一個關鍵部分。我沒有做出自己的效果（毫無疑問會在項目中增加數十個小時），而是將一些藝術家的樣本混合在一起，他們更了解他們在該領域的工作，並在網上提供一些免費的遊戲聽起來。（有關完整信息，請參見應用程序的常見問題。）

用戶可以設置他們喜歡的音量，也可以完全關閉聲音。這和振動也設置在用戶瀏覽器的LocalStorage中，並同步到Vuex商店。這種方法使我們能夠設置保存在瀏覽器中的“永久”設置，但無需在每次引用時從瀏覽器中檢索它。（例如，聽起來每次播放時都要檢查當前音量級別，並且每次發生的局部記錄呼叫等待的延遲可能足以殺死體驗。）

旁邊的聲音

事實證明，無論出於何種原因，野生動物園在聽起來時都非常卑鄙。事件發生後，所有點擊，boops和ding都將需要大量的時間，這些時間觸發了它們實際在Safari中玩耍，尤其是在iOS上。那是一個破壞交易的人，一個兔子的洞我花了很多時間絕望地隧道了。

幸運的是，我找到了一個名為howler.js的庫，可以很容易地解決跨平台聲音問題（而且還有一個有趣的小徽標）。只需將Howler作為依賴項安裝並通過它運行所有應用程序的聲音（基本上是一兩個代碼）就足以解決問題。

如果您要構建具有同步聲音的JavaScript應用程序，我強烈建議您使用Howler，因為我不知道Safari的問題是什麼或Howler如何解決它。我沒有嘗試過任何工作，所以我很高興只有很少的開銷或代碼修改即可輕鬆解決問題。

遊戲玩法，歷史和獎項

Quina可能是一個困難的遊戲，尤其是起初，因此有幾種方法可以調整遊戲難以適應您的個人喜好：

您可以選擇要獲得哪種單詞作為代碼單詞：基本（常見的英語單詞），棘手（更晦澀或更難拼寫）或隨機（兩者的加權混合）。
您可以選擇是否收到每個遊戲開始的提示，如果是，則暗示了這一點。

這些設置允許具有各種技能，年齡和/或英語能力的玩家在自己的水平上玩遊戲。（一個帶有強烈提示的基本單詞將是最簡單的；沒有提示的棘手或隨機性是最難的。）

雖然簡單地玩一系列具有可調節難度的一次性遊戲可能很有趣，但與真實的，成熟的遊戲相比，這種感覺更像是標準的Web應用程序或演示。因此，為了符合對該本地應用程序的追求，Quina跟踪您的遊戲歷史記錄，以多種不同的方式顯示您的遊戲統計信息，並為各種成就提供了多種“獎項”。

在引擎蓋下，每個遊戲都被保存為看起來像這樣的對象：

 {
  猜測：3，
  困難：“棘手”，
  贏：是的，
  提示：“無”，
}

登入後複製

該應用程序以您的遊戲播放（再次，通過Vuex State同步到LocalStorage）的形式以遊戲史的形式出現遊戲對象的形式，然後該應用程序用來顯示您的統計數據，例如您的勝利/損失率，您玩了多少游戲以及您的平均猜測，以及您對遊戲“ Achards”的進度。

對於各種Vuex Getter，它們都使用JavaScript數組方法，例如.filter（）和.Reduce（），這一切都足夠輕鬆地完成。例如，這是顯示用戶在“棘手”設置時贏得多少游戲的Getter：

 // store/getters.js
TrickyGameswon（state）{
  返回state.gamehistory.filter（
    （game）=&gt; game.win &amp;&amp; game.difficulty ==='Tricky'
  ）。長度
}，，

登入後複製

還有許多其他復雜性不同的人。（確定用戶最長的連勝紀錄的人特別粗糙。）

添加獎勵是創建一系列獎勵對象的問題，每個對像都與特定的vuex getter綁定，每個獎項都有要求。閾值財產指示何時解鎖該獎項（即，何時返回Getter的值足夠高的值）。這是一個示例：

 //資產/JS/Awards.js
導出默認[
  {
    標題：“發作”，
    要求： {
      getter：“ totalgamesplayed'，
      閾值：1，
      文字：“玩第一個Quina遊戲”，
    }
  }，，
  {
    標題：“尖銳”，
    要求： {
      getter：'trickygameswon'，
      閾值：10，
      文字：“贏得十張棘手的比賽”，
    }，，
  }，，
這是給出的

登入後複製

從那裡開始，使用其要求屬性（儘管添加了大量的數學和動畫）來填充儀表以顯示用戶在獲得獎勵方面的進步），從而使對VUE模板文件中的成就進行循環是一個非常簡單的問題以獲取最終輸出。

總共有25個獎項（與主題保持一致），包括贏得一定數量的遊戲，嘗試所有遊戲模式，甚至在前三個猜測中贏得遊戲。（那個被稱為“幸運” - 作為額外的小復活節彩蛋，每個獎項的名稱也是一個潛在的代碼單詞，即，五個沒有重複的字母。）

解鎖獎項除了賦予您吹牛的權利外，沒有任何作用，但是其中一些很難實現。（發布後幾週我花了幾週！）

這種方法的優缺點

關於“構建一次，在各處部署”策略有很多值得愛的人，但它也帶來了一些缺點：

優點

您只需要一次部署商店應用程序即可。之後，所有更新都可以是網站部署。（這比等待App Store發布要快得多。）
構建一次。這是正確的，但事實證明，由於Google的付款政策（稍後會詳細介紹），事實證明並不像我想像的那樣簡單。
一切都是瀏覽器。無論用戶是否意識到，您的應用程序始終在您使用的環境中運行。

缺點

活動處理程序可能會變得非常棘手。由於您的代碼同時在所有平台上運行，因此您必須一次預測所有類型的用戶輸入。應用程序中的某些元素可以挖掘，單擊，長期壓力，並且對各種鍵盤鍵的響應也有所不同。立即處理所有這些操作者而沒有任何處理人員踩在彼此的腳趾上，這可能很棘手。
您可能必須分裂經驗。這取決於您的應用程序在做什麼，但是我只需要在Android應用程序上的用戶和其他僅用於Web的用戶顯示一些事情。（我在下面的另一部分中詳細介紹了我如何解決此問題。）
一切都是瀏覽器。您並不擔心用戶使用哪種版本的Android，但是您擔心他們的默認瀏覽器是什麼（因為該應用程序會在幕後使用默認的瀏覽器）。通常，在Android上，這將意味著Chrome，但是您必須考慮到所有可能性。

物流：將Web應用程序變成本機應用

那裡有很多技術使“網絡構建，到處釋放”承諾 - 反應本地，科爾多瓦，離子，流星和本地錄，僅舉幾例。

通常，這些歸結為兩類：

您按照框架希望您的方式編寫代碼（不是正常的方式），並且該框架將其轉換為合法的本機應用程序；
您以通常的方式編寫代碼，而技術只是將本機“外殼”包裹在您的Web技術周圍，並從本質上掩蓋了本機應用程序。

第一種方法似乎是兩者中更理想的方法（因為在理論上，您最終都以“真實”的本機應用程序最終出現），但我也發現它帶來了最大的障礙。每個平台或產品都要求您學習其做事的方式，因此，本身必須成為整個生態系統和框架。在我的經驗中，“只寫你所知道的”的承諾是一個非常強烈的誇大。我猜想將在一兩年的時間裡解決這些問題，但是現在，您仍然會在編寫Web代碼和運送本機應用程序之間感到很大的差距。

另一方面，第二種方法是可行的，因為一種稱為“ TWA”的東西，這就是使將網站首先納入應用程序的原因。

什麼是TWA應用程序？

TWA代表可信賴的網絡活動 - 由於該答案根本不太可能有幫助，所以讓我們再分解一點，對嗎？

TWA應用程序基本上將網站（或Web應用程序，如果您想將頭髮拆開）變成本機應用程序，並在一個小UI騙局的幫助下。

您可以將TWA應用程序視為變相的瀏覽器。除Web瀏覽器外，這是一個沒有任何內部設備的Android應用程序。 TWA應用程序指向特定的Web URL，每當啟動該應用程序時，而不是執行普通的本機應用程序，它只是加載了該網站 - 全屏 - 沒有瀏覽器控件，有效地使網站看起來和表現得像是成熟的應用程序。

TWA要求

很容易看到將網站包裹在本機應用程序中的吸引力。但是，不僅有任何舊站點或URL都有資格；為了將您的網站/應用程序作為TWA本機應用程序啟動，您需要選中以下框：

您的網站/應用必須是PWA。 Google作為燈塔的一部分提供驗證檢查，或者您可以使用BubbleWrap檢查（稍後詳細介紹）。
您必須自己生成應用程序捆綁包/apk；這並不像提交進步網絡應用程序的URL並為您完成所有工作那樣容易。（不用擔心；即使您對本地應用程序開發一無所知，我們也會介紹一種方法。）
您必須在Android應用中具有匹配的安全密鑰，並在特定URL上上傳到Web應用程序。

最後一點是“值得信賴的”部分出現的地方； TWA應用程序將檢查自己的密鑰，然後驗證Web應用程序上的密鑰是否與之匹配，以確保其加載正確的站點（大概是為了防止對應用程序URL的惡意劫持）。如果密鑰不匹配或找不到，則該應用程序仍然可以正常工作，但是TWA功能將消失；它只會將網站加載到普通的瀏覽器，鉻和所有方面。因此，關鍵對於應用程序的體驗極為重要。（您可以說這是一個關鍵部分。對不起，對不起。）

構建TWA應用程序的優點和缺點

TWA應用程序的主要優點是，它根本不需要您更改代碼 - 沒有學習框架或平台；您只是構建像正常現像一樣的網站/網絡應用程序，一旦完成，您也基本上也完成了應用程序代碼。

然而，主要的缺點是（儘管有助於迎來了網絡和JavaScript的現代時代），但Apple不支持TWA應用程序。您無法在Apple App Store中列出它們。只有Google Play。

這聽起來像是打破交易的人，但要牢記一些事情：

請記住，要首先列出您的應用程序，它必須是PWA，這意味著默認情況下它是可安裝的。任何平台上的用戶仍然可以通過瀏覽器將其添加到其設備的主屏幕中。它不需要在Apple App Store中安裝在Apple設備上（儘管它肯定會錯過可發現性）。因此，您仍然可以在應用程序中構建營銷登陸頁面，並提示用戶從那里安裝它。
也沒有什麼可以阻止您使用完全不同的策略來開發本機iOS應用程序。即使您同時想要iOS和Android應用程序，只要Web應用程序也是該計劃的一部分，即使TWA有效地削減了一半的工作。
最後，儘管iOS在以英語為主的國家和日本中佔有50％的市場份額，但Android擁有超過90％的世界其他地區。因此，根據您的聽眾，在App Store上錯過您可能想像的那麼有影響力。

如何生成Android App APK

在這一點上，您可能會說，這個TWA業務聽起來不錯，但是我如何實際使用我的網站/應用程序並將其推入Android應用程序？

答案的形式為可愛的小CLI工具，稱為BubbleWrap。

您可以將BubbleWrap視為從您那裡獲取一些輸入和選項的工具，並生成一個Android應用程序（特別是APK，Google Play商店允許的文件格式之一）。

安裝BubbleWrap有點棘手，儘管使用它並不完全是插件，但對於普通的前端開發人員來說，它比我發現的任何其他可比較的選項都要多得多。 BubbleWrap的NPM頁面上的README文件介紹了詳細信息，但作為簡短概述：

通過運行NPM I -G @BubbleWrap/CLI安裝BubbleWrap（我假設您在這裡熟悉NPM並通過命令行安裝軟件包）。這將使您可以在任何地方使用BubbleWrap。

安裝後，您將運行：

 bubblewrap init-manifest https：// your-webapp-domain/manifest.json

登入後複製

注意：所有PWA都需要清單。 JSON文件，BubbleWrap需要該文件的URL，而不僅僅是您的應用程序。還要警告：根據您的清單文件的生成方式，其名稱可能是每個構建的唯一名稱。 （例如，NUXT的PWA模塊將唯一的UUID附加到文件名。）

另請注意，默認情況下，BubbleWrap將驗證您的Web應用程序是該過程的有效PWA。由於某種原因，當我經歷此過程時，儘管燈塔證實這實際上是一個功能齊全的漸進式Web應用程序，但檢查的情況一直落後。幸運的是，BubbleWrap允許您使用-skippwavalidation標誌跳過此檢查。

如果這是您第一次使用BubbleWrap，它將詢問您是否要它安裝Java開發套件（JDK）和Android軟件開發套件（SDK）。這兩個是生成Android應用所需的幕後公用事業。如果不確定，請命中“ Y”。

注意： BubbleWrap期望這兩個開發套件在非常具體的位置存在，如果它們不存在，則無法正常工作。您可以運行BubbleWrap醫生來驗證，或者查看完整的BubbleWrap CLI讀數。

安裝了所有內容後 - 假設它在提供的URL上找到了您的清單。

許多問題是偏好（例如您的應用程序的主要顏色），或者只是確認基本細節（例如應用程序的域和入口點），並且大多數將從您網站的清單文件中預先填寫。

您的清單可能已經預先解決的其他問題包括在哪裡找到您的應用程序的各種圖標（用作主屏幕圖標，狀態欄圖標等），如果您想強制肖像畫或景觀，則在應用程序打開時，濺起屏幕應為什麼顏色，以及應用程序的屏幕方向。 BubbleWrap還將詢問您是否要請求用戶的地理位置許可，以及您是否要選擇播放計費。

但是，有一些重要的問題可能有些混亂，所以讓我們在這裡介紹這些問題：

應用程序ID：這似乎是Java約定，但是每個應用程序都需要一個唯一的ID字符串，通常為2-3個點分隔的部分（例如，Collinsworth.quina.app）。這實際上並不重要。它不起作用，只是慣例。唯一重要的是您記住它，並且它是獨一無二的。但是請注意，這將成為您應用程序獨特的Google Play商店URL的一部分。（因此，您無法使用先前使用的應用程序ID上傳新捆綁包，因此請確保您對ID感到滿意。）
啟動版：目前這並不重要，但是Play商店將需要您在上傳新捆綁時增加版本，並且您無法兩次上傳同一版本。因此，我建議從0或1開始。
顯示模式：實際上，TWA應用程序可以通過幾種方式顯示您的網站。在這裡，您很可能想選擇獨立的（全屏，但頂部的本機狀態欄）或全屏（無狀態欄）。我個人選擇了默認的獨立選項，因為我沒有看到隱藏用戶狀態欄內應用程序的任何理由，但是您可能會根據應用程序的操作選擇不同。

簽名鍵

難題的最後一塊是簽名鑰匙。這是最重要的部分。該鍵是將您的漸進式Web應用程序連接到此Android應用程序的原因。如果該應用程序期望的鍵與PWA中發現的內容不匹配，則再次：您的應用程序仍然可以正常工作，但是當用戶打開它時，它看起來不會像本機應用程序；它將只是一個普通的瀏覽器窗口。

這裡有兩種方法有點複雜，無法詳細介紹，但是我會嘗試給一些指控：

生成自己的密鑰庫。您可以讓BubbleWrap執行此操作，也可以使用稱為Keytool的CLI工具（足夠適當），但是無論哪種方式：要非常小心。您需要明確跟踪密鑰庫的確切名稱和密碼，並且由於您在命令行上都創建了這兩個名稱和密碼，因此您需要非常小心可能會弄亂整個過程的特殊字符。（即使輸入作為密碼提示的一部分，特殊字符也可以在命令行上進行不同的解釋。）
允許Google處理您的密鑰。老實說，這在我的經驗中並不是很簡單，但是通過允許您進入Google Play開發人員控制台，並為應用程序下載預先生成的鍵來節省一些自己的簽名鍵的麻煩。

無論您選擇哪個選項，都有有關應用程序簽名的深入文檔（為Android應用程序編寫，但其中大多數仍然相關）。

本指南涵蓋了您將鑰匙進入個人網站的部分，以驗證Android應用鏈接。粗略總結：Google將在您網站上的那個確切路徑上查找A /.well-newone/assetlinks.json文件。該文件需要包含您的唯一密鑰哈希以及其他一些細節：

 [{{
  “關係”：[“ delegate_permission/common.handle_all_urls”]，
  “目標”：{“命名空間”：“ android_app”，“ package_name”：“ your.app.id”，
               “ SHA256_CERT_FINGERPRINTS”：[“您：唯一：哈希：在這裡”]}
]]

登入後複製

您應該了解列出應用程序的知識

在開始之前，在App Store方面也有一些障礙：

首先，您需要註冊，然後才能發佈到Google Play商店。此資格的費用為$ 25美元。
一旦獲得批准，就知道列出應用程序既不快，也不容易。這比困難或技術性更繁瑣，但是Google會在商店中查看每個應用程序並進行更新，並要求您在您甚至可以啟動審核過程之前填寫有關您自己和應用程序的大量表格和信息 - 即使您的應用程序尚未公開，這本身也可能需要很多天。（友好的頭腦：“我們的經歷比通常的評論時間更長”的警告橫幅至少六個月。）
- 在更加乏味的部分中：您必須在審核開始之前上傳應用程序中的幾張圖像。這些最終將成為商店列表中顯示的圖像 - 請記住，更改它們也將開始新的評論，因此，如果您想最大程度地減少周轉時間，請準備好桌子。
- 您還需要提供有關應用程序服務條款和隱私政策條款的鏈接（這是我的應用程序甚至擁有它們的唯一原因，因為它們幾乎毫無意義）。
- 有很多你不能撤消的事情。例如，即使尚未公開啟動和/或下載零，您也永遠無法將免費應用程序更改為付款。您還必須嚴格對上傳的版本控制和命名，因為Google不允許您覆蓋或刪除應用程序或上傳捆綁包，並且也不總是讓您在儀表板上還原其他設置。如果您有“只需跳進去，以後才能解決扭結”方法（像我一樣），您可能會發現自己至少從頭開始或兩次。
除少數例外，Google對在應用程序中收取付款具有極為限制的政策。當我建造時，所有交易收取30％的費用（從那以後，它們將其降低到15％，好，但仍然是大多數其他付款提供商收取的五倍）。 Google還強迫開發人員（除少數例外）使用自己的本機支付平台；沒有選擇正方形，條紋，貝寶等。
- 有趣的事實：這項政策已經宣布，但在我試圖釋放Quina時尚未有效，審稿人仍被違反行為標記。因此，他們肯定會非常重視這項政策。

貨幣化，可解鎖和圍繞Google獲取

雖然我對Quina的目標大多是個人的 - 挑戰自己，證明我可以，並在一個複雜的現實世界應用程序中了解有關Vue生態系統的更多信息 - 我也希望我的工作可能能夠為我和我的家人賺錢。

不多。我從來沒有幻想建立下一個糖果粉碎（也沒有設計成癮的微型交易機所需的道德空白）。但是，由於我已經將數百個小時的時間和精力投入到遊戲中，所以我希望也許我可以回報，即使這只是一點點啤酒的錢。

最初，我不喜歡試圖出售該應用程序或鎖定其內容的想法，因此我決定添加一個簡單的“如果您喜歡的話，您是否願意支持Quina？”在每次這麼多遊戲之後提示，並為支持者提供一些專門為解鎖的內容。（默認情況下，單詞集的大小受到限制，並且一些遊戲設置也最初被鎖定。）支持Quina的提示可以永久解僱Quina（我不是怪物），任何捐贈都可以解鎖所有內容；沒有分層的訪問或福利。

由於條紋即使沒有服務器，這一切都非常簡單。都是完全客戶端。我只使用NUXT的方便的頭部功能在 /支持頁面上導入一些JavaScript（將項目添加到給定頁面上的

元素）：

 //頁面/support.vue
頭（） {
  返回 {
    腳本： [
      {
        隱藏：“條紋”，
        src：'https：//js.stripe.com/v3'，
        延期：是的，
        回調：（）=&gt; {
          //將所有條紋方法添加到RedirectToCheckout（例如RedirectTo Checkout）
          this.stripe = stripe（'your_stripe_id'）
        }，，
      }，，
    ]，，
  }
}，，

登入後複製

有了這個位（以及撒上模板和邏輯），用戶可以選擇其捐贈金額 - 設置為在條紋方面的產品 - 並重定向到條紋以完成付款，然後在完成後返回。對於每個層，返回重定向URL通過查詢參數略有不同。 VUE路由器解析URL以調整用戶存儲的捐贈歷史記錄，並相應地解鎖功能。

您可能會想知道為什麼我要透露所有這些，因為它可以將系統暴露起來很容易逆轉工程。答案是：我不在乎。實際上，我自己添加了一個免費的一層，所以您甚至不必遇到麻煩。我決定，如果有人真的想要解鎖物品，但由於任何原因無法或不付款，那很好。也許他們生活在3美元的款項中。也許他們已經在一台設備上給了。也許他們會做其他好事。但老實說，即使他們的意圖不好：那呢？

我感謝支持，但這不是我的生活，也不是要建立多巴胺收費船。此外，我個人對使用一堆完全開源和/或免費軟件的道德含義（更不用說隨附的文檔，博客文章和堆棧溢出的答案）來建立一個封閉的花園以供個人利潤建立封閉的花園。

因此，如果您喜歡Quina並可以支持它：真誠，謝謝。這對我來說意味著一噸。我喜歡看到我的作品很喜歡。但是如果不是這樣，那很酷。如果您想要“免費”選項，則可以為您服務。

無論如何，當我了解Google Play的新貨幣化政策今年生效時，整個計劃都遇到了麻煩。您可以自己閱讀，但要總結：如果您通過Google Play應用程序賺錢而不是非營利組織，那麼您必須通過Google Pay並支付高額費用 - 您不允許使用任何其他付款提供商。

這意味著我什至無法列出該應用程序；僅僅是為了擁有一個“支持”頁面，並沒有通過Google進行的付款而被阻止。（我想我可能會通過註冊非營利組織來解決這個問題，但這似乎是在許多層面上進行的錯誤方法。）

我最終的解決方案是通過以2.99美元的價格列出該應用程序本身（而不是我先前計劃的“ Free”價格），並簡單地更改Android用戶的應用程序體驗。

自定義Google Play的應用程序體驗

幸運的是，Android應用程序在請求網站時，Android Apps發送了帶有該應用程序唯一ID的自定義標頭。使用此標頭，可以在網絡和實際Android應用程序中區分應用程序的體驗非常容易。

對於每個請求，應用程序檢查Android ID；如果存在，該應用將將Vuex State Boolean設置為“ isandroid”為true。該狀態在整個應用程序中級聯，努力觸發各種條件來執行諸如隱藏和顯示各種常見問題問題的事情，並且（最重要的是）在“導航”菜單中隱藏支持頁面。默認情況下，它還可以解鎖所有內容（因為用戶已經在Android上“捐贈”了Android，通過購買）。我什至做了簡單的和 vue包裝組件，以包裝內容僅適用於兩者之一。（顯然，無法訪問支持頁面的Android的用戶不應在主題上看到常見問題解答。）

 

  <div v-if="“" isandroid>
    
  </div>


<script>
導出默認{
  計算：{
    isandroid（）{
      返回此。 $ Store.state.isandroid
    }，，
  }，，
}
</script>

登入後複製

帳戶會計

在構建Quina時，我設置了登錄和存儲用戶數據的設置。我真的很喜歡允許用戶在所有設備上播放並在各處跟踪其統計數據的想法，而不是在每個設備/瀏覽器上都有單獨的歷史記錄。

最後，出於一些原因，我取消了這個想法。一個是複雜性；即使使用像Firebase這樣的不錯的系統，也不容易維護安全的帳戶系統和數據庫，而這種開銷並不是我輕輕地採用的。但主要是：該決定歸結為安全性和簡單性。

歸根結底，我不想對用戶數據負責。通過使用LocalStorage，以較小的便攜性成本來保證它們的隱私和安全性。我希望玩家不介意不時失去統計數據的可能性，如果這意味著他們沒有登錄名或數據需要擔心。（嘿，這也使他們有機會再次獲得這些獎項。）

另外，感覺很好。老實說，我的應用程序不可能損害您的安全性或數據，因為它幾乎對您一無所知。而且，我也不需要擔心合規性或餅乾警告或類似的東西。

總結

建築Quina是我迄今為止最雄心勃勃的項目，並且我看到玩家喜歡它的設計和工程非常有趣。

我希望這一旅程對您有所幫助！在Google Play商店中列出的Web應用程序有很多步驟和潛在的陷阱，但對於前端開發人員來說，它絕對可以實現。希望您以這個故事為靈感，如果您這樣做，我很高興看到您通過新發現的知識來建立什麼。

以上是我學到了在Google Play上使用NUXT構建Word Game應用程序的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

我學到了在Google Play上使用NUXT構建Word Game應用程序的內容

目錄

遊戲是什麼（那個名字）？

選擇nuxt

通過網絡實現本地應用感覺

振動和聲音

旁邊的聲音

遊戲玩法，歷史和獎項

這種方法的優缺點

優點

缺點

物流：將Web應用程序變成本機應用

什麼是TWA應用程序？

TWA要求

構建TWA應用程序的優點和缺點

如何生成Android App APK

簽名鍵

您應該了解列出應用程序的知識

貨幣化，可解鎖和圍繞Google獲取

自定義Google Play的應用程序體驗

帳戶會計

總結

熱門文章

熱門工具標籤

熱門文章

熱門文章標籤

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題