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
更多相關文章
  • 修改日期時間的工具 date hwclock timedatectl date工具的使用 作用:顯示和設置系統時間 選項: -d <字元串> 顯示字元串所指的日期與時間,比如:"-1 day" 表示當前日期的前一天,必須要加雙引號 -s <字元串> 設置當前的時間和日期 #年月日使用(-)分隔,時分 ...
  • 搭建lamp架構 1.LAMP架構介紹 所謂lamp,其實就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一組動態網站或者伺服器的開源軟體,除Linux外其它各部件本身都是各自獨立的程式,但是因為經常被放在一起使用,擁有了越來越高的相容度,共同組成了一個強 ...
  • 社區於上個月發佈了 RadonDB MySQL Kubernetes v2.2.0,集群數據備份恢復的存儲類型除了 S3,新增 NFS 存儲。本文將為您演示如何進行 NFS 備份及恢復操作。 環境準備 Kubernetes 集群 RadonDB MySQL 集群 過程略,詳細請回顧《快速實現 MyS ...
  • 1. 數據操作類語句: SELECT:從資料庫表中檢索數據行和列 INSERT:把新的數據表記錄添加到資料庫中 DELETE:從資料庫中刪除數據記錄,針對數據進行操作 UPDATE:修改現有資料庫中的數據 2. 數據定義類語句: CREATE:創建新的資料庫或者表等結構 DROP:從資料庫中刪除表或 ...
  • 最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。 一、設計所需要的表 1、文章表 文章表很簡單,就類似朋友圈,一個文字內容,一個圖片數組 2、評論表 3、點贊表 二、發佈動態 1、文本區 游標有點問題,回車換行時游標和文字被埋在下麵了 解決,給textarea設置一個 ...
  • 1 語聊房應用場景說明 七夕禮物準備好了嗎?程式猿七夕禮物標配,給女友搭建專屬語聊房,既浪漫又硬核! 語聊房在社交場景中使用比較廣泛,社交APP中的語聊房場景的實現,主要由業務系統和移動/Web 客戶端組成。其中業務系統需要實現語聊房的房間管理、麥位管理、音頻流和麥位關聯關係管理等功能,客戶端需要實 ...
  • 一.頁面導航 1.聲明式導航 通過navigator來跳轉 1.1 導航到tabBar頁面 比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性 1.2 導航到非tabBar頁面 非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面 配置其他 ...
  • 七夕來咯!又到了給重要的人送驚喜的時刻。 今年,除了將心意融入花和禮物,作為程式員,用自己的代碼本事手搓一個技術感十足“七夕限定”驚喜,我覺得,這是不亞於車馬慢時代手寫信的古典主義浪漫。 那麼,應該怎樣創作出具有自我身份屬性的浪漫七夕驚喜呢? 玩法很多,今天給大家介紹一個不出錯的技術控浪漫實操方式— ...
一周排行
    -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 ...