day02小程式快速入門

来源:https://www.cnblogs.com/heymar/archive/2022/08/03/16546568.html
-Advertisement-
Play Games

一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...


一.WXML模板語法

1.1 數據綁定

  • 綁定內容

跟vue差不多,在頁面的js文件定義到data裡面

image-20220726151344137

然後通過插值語法用在wxml中即可

image-20220726151429602

  • 綁定屬性

    image-20220726151726606

    直接寫上插值語法,沒有:

    image-20220726151817181

  • 三元運算

    生成一個十以內的隨機數

    image-20220726152359497

    image-20220726152502470

  • 算數運算

    image-20220726152749621

    image-20220726152826545

1.2 事件綁定

小程式常用事件

image-20220726152926481

小程式事件對象常用屬性

image-20220726153105676

target和currentTarget的區別,target是觸發事件的源頭組件,而currentTarget是當前觸發這個事件的組件

image-20220726153423316

要綁定一個事件只需要在組件上寫上事件類型以及對應的回調函數

image-20220726154317917

然後回調函數寫在對應的js文件裡面,沒有什麼包裹直接寫在外層

image-20220726154404000

1.2.1 修改data數據

這裡修改data裡面的數據,需要在函數裡面來改,而且改的方式有點不同,利用了 this.setData這個方法,裡面為一個對象可以對data裡面的一些值做一些操作,聽說這個方式是react

image-20220726155712093

image-20220726155737324

image-20220726155834800

1.2.2 事件傳參

註意小程式傳參數,不能寫在事件回調的括弧裡面,這樣寫只會被當做事件名

image-20220726160437812

要傳參的話,需要在這個組件裡面來一個自定義屬性,data-什麼的形式,其中什麼就是你的參數名,值為一個插值語法

image-20220726160643889

然後要拿參數的話就通過 e.target.dataset.參數名獲取

image-20220726160809017

1.2.3 bindinput語法格式

首先組件綁定事件

image-20220726161735967

然後註意這裡收集值,不是通過e.target而是e.detail

image-20220726161824979

1.2.4 文本框與data之間的數據同步

首先data定義數據,然後文本框綁定數據

image-20220726162337059

image-20220726162428494

然後就是修改值改到數據裡面,通過bindinput事件來修改

image-20220726162521305

image-20220726162618654

1.3 條件渲染

通過wx:if來控制,當然也有對應的elif和else

image-20220726162823644

image-20220726163857496

image-20220726163904333

1.3.1 block標簽

類似於template可以包裹一組標簽,讓他們集體顯示隱藏,而且最主要的他會不暫用空間佈局

1.3.2 hidden

可以直接用hidden控制組件顯示隱藏,註意為true是隱藏

image-20220726164739659

hidden和wxif區別:hidden就是v-show(display:block/none),wxif就是直接將元素幹掉了

1.4 列表渲染

wx:for

image-20220726181325431

image-20220726181417376

需要註意的是索引和值都通過裡面的插值語法獲得,這裡就偏向於模板引擎多一點

當然我們也可以自定義索引的名字和變數名

image-20220726184852329

wxfor也需要key,沒有id也可以直接寫index索引,註意key不用寫插值語法

image-20220726190106246

二.WXSS模板樣式

wxss和css大部分相同,主要區別是 rpx單位和@import樣式引入

2.1 rpx

小程式獨有尺寸單位,類似於rem,可以適配任意端。

是將寬度分為750份,所以所有屏幕的寬度都是750rpx,只是某些手機1rpx大一點某些手機1rpx小一點

單位換算

推薦採用iPhone6作為設計尺寸來做,因為直接px乘以2就是rpx單位

image-20220726192105249

2.2 樣式導入

image-20220726192220310

2.3 全局樣式/局部

定義在app.wxss裡面的即為全局樣式

在單獨文件裡面wxss都是局部樣式只對當前頁面生效

註意

當兩個樣式衝突時,就近原則,局部會覆蓋全局

當局部樣式權重大於或等於全局時才會覆蓋

三.全局配置

app.json就是全局配置文件

首先預設有這些設置項

image-20220726193146963

而我們小程式組成部分是

image-20220726193203278

3.1 window

首先window中比較常用的配置項

image-20220726193328344

註意導航欄背景顏色只支持#開頭的顏色

上拉觸底距離就是當我們滑動頁面下麵會刷新數據出來比如電商網站一直滑下麵,滾動條到一定距離就會刷新下麵的數據,小程式預設為50

3.1.1 tabBar

image-20220726195056004

最少兩個最多五個

頂部tabBar不會顯示icon只會顯示文本

tabBar六個組成部分:

image-20220726195254676

tabBar節點配置項:

直接添加在app.json裡面即可

image-20220726195344526

image-20220726195355043

註意

  • list為必填項

    image-20220726195537319

    每一個tab又可以寫這些配置

    image-20220726195612184

    image-20220726195913006

    image-20220726195928435

四.頁面配置

每個頁面自己的json文件

對當前頁面的視窗外觀等進行配置

頁面配置常用屬性:

image-20220726200629786

五.網路數據請求

註意:

  • 只能請求https開頭的介面
  • 必須將介面的功能變數名稱添加到信任列表中

image-20220726200854914

5.1 配置request合法功能變數名稱

image-20220726201023553

5.2 發起get請求

wx.request()

image-20220726201329924

post同理,並且參數也是data

5.3 頁面剛載入時請求數據

在js裡面找到鉤子onLoad在這類請求數據

image-20220726202337892

5.4 註意

跳過request合法校驗:

image-20220726202517646

但是僅能在開發調試階段使用,不允許上線使用!

關於跨域和ajax

由於跨域是因為瀏覽器的同源策略,而小程式宿主是微信,所以小程式不存在跨域問題

然後由於ajax是基於xhr這個瀏覽器的對象,小程式的宿主是微信,所以發起請求也不能叫做ajax請求叫做發起網路請求

六.本地生活案例

image-20220726202851104

註意:

介面返回來的數據可以通過this.setData給到我們的data數據

image-20220726204446860


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

-Advertisement-
Play Games
更多相關文章
  • Naarak Studio DirEqua mac版是Mac的高級目錄比較實用程式。它可以檢測文件夾之間最小的變化,並以清晰直觀的方式顯示結果。使用顏色和圖標突出顯示差異類型(大小,日期或項目內容),以突出顯示差異。DirEqual Mac版將比較的目錄併排顯示為可擴展樹,併為每個項目指示大小和日期 ...
  • sudo:superuser do,實現普通用戶執行root命令的授權工具。 一般用戶管理系統的方式是利用su切換為超級用戶。但是使用su的缺點之一在於必須要先告知超級用戶的密碼。 sudo使一般用戶不需要知道超級用戶的密碼即可獲得許可權 #過程: (1)超級用戶授權:首先 超級用戶 將普通用戶的名字 ...
  • 今天是接觸C++的第二天,學習了基礎內容之後用了兩個多小時的時間完成了一個通訊錄管理程式,功能相對簡單,代碼也不複雜,歡迎各位大佬指出不足之處 點擊查看代碼 #include<iostream> #include<string> #include<regex> using namespace std ...
  • lamp 1. lamp簡介 lamp,其實就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一組動態網站或者伺服器的開源軟體 LAMP指的是Linux(操作系統)、Apache(HTTP伺服器)、MySQL(也指MariaDB,資料庫軟體)和PHP(有時也 ...
  • 鎖定讀、UPDATE 或 DELETE 通常會給在SQL語句處理過程掃描到的每個索引記錄上設置記錄鎖。語句中是否存在排除該行的WHERE條件並不重要。InnoDB不記得確切的WHERE條件,但只知道哪些索引範圍被掃描了。鎖通常是next-key鎖,它也阻止插入到緊挨著記錄之前的“間隙”中。然而,間隙 ...
  • ##前置知識 ###當前讀與快照讀 當前讀 什麼是當前讀:讀取的是最新的數據,不會讀到老數據。 何時觸發:update、insert、delete、select lock in share mode、select for update時,總是當前讀。 快照讀 什麼是快照讀:讀取的是歷史版本,不是最新 ...
  • likeshop回收租賃系統適用於物品回收、物品租賃、二手買賣交易等三大場景。 系統支持智能評估回收價格,後臺調整最終回收價,用戶同意回收後系統即刻放款,用戶微信零錢提現。支持線上生成租賃合同,交付租賃押金,生成分期付款合約,逾期自動計算滯納金。 功能強大,流程嚴謹,無論運營還是二開都是性價比極高的 ...
  • 1 屏幕共用功能介紹 屏幕共用是指在視頻通話或互動直播過程中將屏幕內容以視頻的方式分享給其他的觀眾,以增強互動體驗,提高溝通效率。屏幕共用解決方案提升了用戶實時視頻通話的溝通效率。 屏幕共用在如下場景中應用廣泛: 視頻會議場景中,屏幕共用可以將講話者本地的文件、數據、網頁、PPT 等畫面分享給其他與 ...
一周排行
    -Advertisement-
    Play Games
  • 1、什麼是MQTT? MQTT(Message Queuing Telemetry Transport,消息隊列遙測傳輸協議),是一種基於發佈/訂閱(publish/subscribe)模式的"輕量級"通訊協議,該協議構建於TCP/IP協議上,由IBM在1999年發佈。MQTT最大優點在於,可以以極 ...
  • 溫馨提示,請使用ctrl+F進行快速查找 ws2_32.lib error LNK2001: 無法解析的外部符號 __imp_htons error LNK2001: 無法解析的外部符號 __imp_ntohl error LNK2001: 無法解析的外部符號 __imp_ntohs error L ...
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 作者:小牛呼嚕嚕 | https://xiaoniuhululu.com 電腦內功、JAVA源碼、職業成長、項目實戰、面試相關資料等更多精彩文章在公眾號「小牛呼嚕嚕」 前言 讀過筆者之前的一篇文章Java記憶體模型(JMM)詳解, 我們知道了由於電腦為了充分利用CPU的高性能,以及各個硬體 存取速 ...
  • 使用Apache PDFBox實現拆分、合併PDF 問題背景 如何拆分PDF? 如何合併PDF? 如何拆分併合並PDF實現去除PDF的某些頁? Apache PDFBox介紹 Apache PDFBox 1.8.10官方文檔 Apache PDFBox 庫是一個開源的 Java 工具,用於處理 PD ...
  • 問題:是不是虛函數的調用就一定是動態綁定?不是的 1:在類的構造函數當中,調用虛函數,也是靜態綁定(構造函數中對虛函數的調用不發生動態綁定) 2:如果不是通過指針或者引用變數來調用虛函數,那就是靜態綁定 代碼1 class Base { public: Base(int data=10):ma(da ...
  • 本篇文章我們將進一步探討下Guava Cache 實現層面的一些邏輯與設計策略,讓我們可以對Guava Cache整體有個更加明朗的認識,促進實際使用中對其的理解。 ...
  • JZ12 矩陣中的路徑 描述 請設計一個函數,用來判斷在一個n乘m的矩陣中是否存在一條包含某長度為len的字元串所有字元的路徑。路徑可以從矩陣中的任意一個格子開始,每一步可以在矩陣中向左,向右,向上,向下移動一個格子。如果一條路徑經過了矩陣中的某一個格子,則該路徑不能再進入該格子。 思路 我們看到他 ...
  • 抽象類和普通類有什麼區別? 抽象類一般不用作抽象實體類型 一般把上面類設計為抽象類? 基類 定義抽象類的唯一目的, 就是去建立派生類. 我們在抽象類基礎上要定義出功能各異的派生類, 再用這些派生類去建立對象. 凡是包含純虛函數的類都是抽象類. 純虛函數不用實現, 故不能被調用, 抽象類無法建立對象. ...
  • 打包下載成.zip文件 項目背景 公司使用vue + SpringBoot實現批量下載功能 今天在調試批量下載這個功能。打包成.zip文件時,在返回給前端瀏覽器出現報錯信息: 後端報錯: ERROR c.c.p.c.e.BusinessExceptionHandler - java.io.IOExc ...