微信小程式的簡單頁面設計(不涉及後端)

2021-10-04 16:51:57 字數 1122 閱讀 2737

大一萌新在朋友推薦下嘗試寫部落格記錄下自己的學習經歷

首先

第二點

在b站**完每乙個頁面的**後,自己動手敲出**,只有效果實在不理想並且無法完成時才會倒回去抄**並記錄(這點我還是很欣慰的,嘿嘿)

其中值得記錄的點:

//底部選單欄的引用。

****
可以將底部選單欄固定在需要的頁面,不用在頁面重複編寫**。//相應的樣式引入@import

@import "/pages/bottom_menu/bottom_menu";
接下來正規表示式的使用

在這次學習目標中,註冊是的**號碼需要用正規表示式來判斷是否合理

var myreg = /^(((13[0-9])|(15[0-9])|(17[0-9])]|(18[0-9]))+\d)$/;
用來檢驗是否為13,15,17,18開頭且位數為11的手機號

最後一點:

在不同頁面的.js檔案的中完成墨刀模型中的狀態改變

通過給view**繫結style,但是不同頁面的.js 給予不同的資料定義

例如本次學習目標:

現在bottom_menu頁面中進行

我的

廣場

下面是mine.js中的資料定義

cos: "#000000",

com: "#979797",

下面是square.js的資料定義

cos: "#000000",

com: "#979797",

藉此來完成mine和square頁面跳轉時底部選單欄的狀態改變

小程式 微信小程式登入 註冊頁面設計

介面設計 頁面引用了youzan元件進行設計,包括icon,button,tag,toast以及布局 實現的功能 1.對使用者輸入的手機號碼進行驗證,利用正規表示式 var reg 1 3 4 5 7 8 0 9 驗證函式 使用者輸入錯誤的手機號碼時將會呼叫toast元件提示使用者 getverif...

微信小程式頁面布局

3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮,向左,向右,向下,向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...

微信小程式頁面布局

1.flex布局,是w3c在2009年提出的一種新的方案,可以簡便,完整,響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...