Ionic + Vue 在使用目錄時的狀況

使用的 Framework 是Ionic + Vue 3.5

我有兩個頁面，原本的 code 如下

<!-- 第一頁 -->

<template>
	<ion-page>
		<ion-header  >
			<ion-toolbar>
				<ion-title><h1>Foo</h1></ion-title>				
			</ion-toolbar>
		</ion-header>
		<ion-content>
			<!-- 中略 -->
		</ion-content>
	</ion-page>
</template>

<!-- 第二頁 -->

<template>
	<ion-menu content-id="main-content">
		<ion-header >
			<ion-toolbar color="tertiary">
				<ion-title>Menu Content</ion-title>
			</ion-toolbar>
			<ion-menu-toggle slot="end">
				<ion-button>Close</ion-button>
			</ion-menu-toggle>
		</ion-header>
		<ion-content class="ion-padding">
			<!-- 中略 -->
		</ion-content>
	</ion-menu>
	<ion-page id="main-content">
		<ion-header>
			<ion-toolbar>
				<ion-buttons slot="start">
					<ion-menu-button></ion-menu-button>
				</ion-buttons>
				<ion-title> BAR </ion-title>
			</ion-toolbar>
		</ion-header> 
		<ion-content class="ion-padding">
			<!-- 中略 -->
		</ion-content>
	</ion-page>
</template>

兩頁的差別在於，第二頁有 <ion-menu/>；第一頁沒有。

這樣的 code ，從第一頁切換到第二頁是正常的

但從第二頁切換回第一頁時，會出現以下錯誤：

1. <ion-header> 顯示的是第二頁的標題
2. 第一頁不存在的<ion-menu>依舊存在

紀錄一下自己接手一個 android app 時遇到的問題

我接手一個 android app，他有使用一個 lib：PageIndicatorview

dependencies {
        implementation 'com.romandanylyk:pageindicatorview:1.0.2'
}

執行 gradlew.bat assembleDebug --warning-mode all 後，會回復以下 2 個錯誤訊息

The RepositoryHandler.jcenter() method has been deprecated. This is scheduled to be removed in Gradle 9.0. JFrog announced JCenter's sunset in February 2021. Use mavenCentral() instead. Consult the upgrading guide for further information: https://docs.gradle.org/8.10.2/userguide/upgrading_version_6.html#jcenter_deprecation
        at build_c0uup8fmroz422c6id7ruwe51$_run_closure1$_closure2.doCall$original(D:\workspace\app\build.gradle:4)
        (Run with --stacktrace to get the full stack trace of this deprecation warning.)
        at build_c0uup8fmroz422c6id7ruwe51$_run_closure1.doCall$original(D:\workspace\app\build.gradle:2)
        (Run with --stacktrace to get the full stack trace of this deprecation warning.)
WARNING: The option setting 'android.defaults.buildfeatures.buildconfig=true' is deprecated.
The current default is 'false'.
It will be removed in version 9.0 of the Android Gradle plugin.
To keep using this feature, add the following to your module-level build.gradle files:
    android.buildFeatures.buildConfig = true
or from Android Studio, click: `Refactor` > `Migrate BuildConfig to Gradle Build Files`.

> Task :app:checkDebugAarMetadata FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.romandanylyk:pageindicatorview:1.0.2.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/com/github/romandanylyk/PageIndicatorView/v1.0.2/PageIndicatorView-v1.0.2.pom
       - https://repo.maven.apache.org/maven2/com/github/romandanylyk/PageIndicatorView/v1.0.2/PageIndicatorView-v1.0.2.pom
       - https://jitpack.io/com/github/romandanylyk/PageIndicatorView/v1.0.2/PageIndicatorView-v1.0.2.pom
     Required by:
         project :app

Javascript 使用 atob() 解密 base64 字串遇到的問題

這裡記錄我在使用 js 的 base64 解密功能時，因為 UTF-8 編碼與 base64 格式，會遇到的問題

Ionic 專案，無法切換頁面

我的 Ionic 專案有以下兩個 .vue 檔案（這邊僅列<template> tag 的 code）

<template>
	<ion-page>
		<ion-content class="ion-padding">
			<h1>登入</h1>
			<form ref="login-form" @submit="login">
				<ion-item>
					<ion-input name="mobile" label="手機號碼" placeholder="e.g. 0912345678" required/>
				</ion-item>

				<ion-item>
					<ion-input name="password" label="密碼" type="password" required/>
				</ion-item>
				<ion-button expand="full" class="ion-margin-top" type="submit">
					登入
				</ion-button>
			</form>
		</ion-content>
	</ion-page>

	 <ion-alert :is-open="alertButtonShow"
		header="登入失敗"
		message="帳號或密碼錯誤，請再試一次。"
		:buttons="[{
				text: 'OK',
				role: 'confirm',
				handler: () => {
					alertButtonShow = false
				},
			}
		]" />
</template>

<template>
	<ion-page>
		<ion-content >
			<ion-header :translucent="true" >
				<ion-toolbar>
					<ion-title>登入成功！</ion-title>
				</ion-toolbar>
			</ion-header>

			<ion-button @click="logout">
				登出
			</ion-button>
		</ion-content>
	</ion-page>
</template>

理想狀況下，當我點下第一個畫面的登入按鈕，會跳到第二頁；第二頁的登出按鈕會跳回第一頁

但實際情況卻是前半段可以成功，但第二頁的登出按鈕一直沒有作用

Ionic 的筆記：Ionic 要連線 Web Request

本文內容都是以 Ionic + Vue 為前題撰寫

CSS / JS 的圖形矩陣處理

眾所周知，CSS 的 transform 或是 SVG 的 transform 可以使用 translateX、rotateX、scale……等 transform functions。而裡面最為複雜的就是 matrix

參閱 MDN 的說明， matrix 有 6 個參數：matrix(a, b, c, d, tx, ty) ，以投影座標（因為我常用的 GIMP 、我當初學的都是使用投影坐標（projective coordinates），我這篇也都使用投影座標來講）來表示的話，就是：

$\left(\begin{array}{ccc}\mathrm{a}& \mathrm{c}& \mathrm{tx}\\ \mathrm{b}& \mathrm{d}& \mathrm{ty}\\ 0& 0& 1\end{array}\right)$

如果今天我 CSS 是 translateX(100px)，那相當於matrix(1, 0, 0, 1, 100, 0)，即： $\left(\begin{array}{ccc}1& 0& 1\\ 0& 100& 0\\ 0& 0& 1\end{array}\right)$

紀錄：deno 與 npm 的對應

紀錄：常用指令：查找大量有指定內容的檔案

Bash script

例如我現在要查 tomcat 的 log，查找說在 2020-01-10 ~ 2020-01-25 之間，連線 /api/foo/bar 這條 request 的資訊。

就能以以下指令來處理

$ cd {log 資料夾}
$ for i in {10..25} ; do sudo cat "localhost_access_log.2020-01-$i.txt" | grep "/api/foo/bar" ; done

$ cd {log 資料夾}
for /L %%i in (10, 1, 25) do (
	type "localhost_access_log.2020-01-%%i.txt" | findstr "/api/foo/bar"
)

git 無法刪除分支

這邊先提一下我的環境：

使用 OS 是 Windows 11

有安裝以下軟體：

• Git，版本是 git version 2.36.0.windows.1
• TortoiseGit v2.13.0
• VS Code

今天遇到的問題是，有些分支我要刪除時，跳出以下錯誤視窗

Could not delete reference
libgit2 returned: entry is not unique due to being a multivar

使用指令編譯 Android

紀錄一下如何純粹使用終端機指令，編譯 android APK

事前準備

1. Java，儘量使用最新版的 Java
2. Android SDK
   • 如果已經安裝 Android Studio，那就不用另外安裝
   • 如果不想安裝 Android Studio，那可以到Android Studio 下載頁下方的《僅限指令列工具》那可以下載。但使用這方法，要另行設 ANDROID_HOME 的環境變數
   • 如果是用 CI/CD， Github Action 已經有人寫好了：android-actions/setup-android
   • 使用 Docker ，可以使用thyrlian/android-sdk

Ionic 筆記：建立專案、編譯成 APK

最近試著玩玩看幾個跨平台框架，其中之一就是 Ionic

以下是我自己在編譯 Ionic 的筆記

Vue.js 狀況：onMount 更新變數後，畫面沒有進行變動

狀況

以下是我的 Vue code

<script setup>
let menuTabs = ref([
	{name: "會員", checked: false},
	{name: "客戶", checked: false},
	{name: "站點", checked: false},
])



let selectedMember = ref({name: null, id: null})
let selectedCustomer = ref({name: null, id: null})
let selectedStation = ref({name: null, id: null})

/** 根據當前選擇的 tab 來決定顯示的內容 */
let selectedData = computed(function(){
	if(menuTabs.value[0].checked){
		return selectedMember.value
	}
	if(menuTabs.value[1].checked){
		return selectedCustomer.value
	}
	if(menuTabs.value[2].checked){
		return selectedStation.value
	}
	return {name: null, id: null}
})

/** 切換 menu tab */
function changeMenuTab(index){
	for(let i = 0; i < menuTabs.value.length; i++){
		menuTabs.value[i].checked = i == index
	}
}

</script>
<template>
	<div class="tabs">
  		<div role="tablist" aria-label="Sample Tabs">
			<button v-for = "(tab, index) in menuTabs"
				role="tab"
				:aria-selected="tab.checked"
				:aria-controls="`panel-${index}`"
				:id="`tab-${index}`"
				:tabindex="tab.checked ? 0 : -1" 
				@click="changeMenuTab(index)"
				v-text="tab.name"/>
		</div>
	</div>


	<div class="tab-content">
		<div>
			{{selectedData.name}}
			<template v-if="!!selectedData.id">
				（{{selectedData.id}}）
			</template>
		</div>


		<div v-for = "(tab, index) in menuTabs"
			role="tabpanel"
			:aria-labelledby="`tab-${index}`"
			:id="`panel-${index}`"
			:aria-hidden="!tab.checked"
			:tabindex="0"
			:hidden="!tab.checked">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus, congue vel laoreet ac, dictum vitae odio.
		</div>
	</div>
</template>

練習：建立一個使用 GZ 壓縮的頁面