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
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...