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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...