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
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...