小程序基礎 （二）

小程序開發框架

小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。

整個小程序框架系統分為兩部分：邏輯層（App Service）和 視圖層（View）。

小程序提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注于數據與邏輯

WXML 語法參數 (參考官網)

  • WXML 語法參數鏈接

1. 數據綁定

  • 雙括號
  • 和vue、react的對比
    • 運算
    • 三元
    • 方法調用 (不行)
  • 屬性可以使用{{}}

2. 條件渲染

  • wx:if
  • wx:if 和 wx:elif wx:else
  • block
  • wx:if 和 hidden

####3. 列表渲染

  • wx:for 遍歷簡單類型數組
  • wx:for 遍歷對象數組
  • 起別名 wx:for-item=‘it’ wx:for-index=‘i’
  • wx:key

?

WXS 語法參考 (參考官網)

  • .wxs 文件
  • wxs標
   第一種方式 : 單獨創建一個.wxs文件1. 創建common.wxs文件2. 創建一個方法  function my_slice(str) { return str.slice(0,1)}3. module.exports.my_slice=my_slice4. 引入 <wxs src='./common.wxs' module='tool'>5. 使用 : <view>{{ tool.my_slice(str) }}</view>第二種方式 : 在 wxml內 使用 wxs 標簽處理1. 創建一個 wxs 標簽 <wxs></wxs>2. 創建方法 function my_case(str) {  return str.toUpperCase()  }3. 導出  module.exports.my_case = my_case4. 使用模塊接收 <wxs module='tool1'></wxs>5. 使用  tool1.my_case(str)

事件綁定

1. bindTap

  • 綁定事件
<button bindtap="click1">按鈕1</button>
  • 事件處理函數
Page({click1() {console.log(111)}
})
  • 傳參
// 傳遞
<button bindtap="click2" data-msg="abc" data-index="123">按鈕2</button>// 接收
click2(e){ e.currentTarget.dataset
},

2. catchTap 阻止冒泡

<view  bindtap='click0'><button bindtap='click1'>按鈕1</button> <button catchtap='click2'>按鈕2</button>
</view>

3. bindinput

  • 綁定事件
<input bindinput="handleInput" />
  • 事件處理函數
Page({// 綁定的事件handleInput: function(e) {e.detail.value}
})

數據操作

  • setData1

  • [setData2](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object data, Function callback))

  • 獲取數據 : this.data.name

  • 修改數據 :

    • 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
    • setData 函數用于將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步）。
console.log(this.data.name)  // zs
this.setData({name :'ls'
})
console.log(this.data.name)  // ls

WXSS

  • WXSS鏈接

  • WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

  • 與 CSS 相比，WXSS 擴展的特性有：

    • 響應式長度單位 rpx
    • 樣式導入

1. 尺寸單位

  • rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

  • 官網建議：開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。

  • 注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況。

2. 樣式導入

  • 使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
/*  app.wxss  */
@import 'common.wxss';.middle {color : 'red'
}

3. 行內樣式

<view style="color : red;">啊哈</view>

4. 選擇器

目前支持的選擇器有：

選擇器樣例樣例描述
.class.intro選擇所有擁有 class=“intro” 的組件
#id#firstname選擇擁有 id=“firstname” 的組件
elementview選擇所有 view 組件
element, elementview, checkbox選擇所有文檔的 view 組件和所有的 checkbox 組件
nth-child(n)view:nth-child(n)選擇某個索引的標簽
::afterview::after在 view 組件后邊插入內容
::beforeview::before在 view 組件前邊插入內容
  • 注意 :
    • 小程序 不支持通配符 *
  • 樣式初始化配置
page,view,input,text {margin: 0;padding: 0;box-sizing: border-box;
}

5. 小程序使用less

原生小程序不支持less，我們可以借助 vscode 使用 less

  1. 編輯器是vscode

  2. 安裝 VSCode插件 : easy less

  3. 在vs code的設置中加入如下，配置

    "less.compile": {"outExt":       ".wxss"
}

  4. 新建 less文件，如 index.less, 保存即可, 自動機會編程出樣式到對應的index.wxss 里面

要么只用less ,要么只用 wxss 不要混著用,后果很嚴重, 因為 wxss的東西被會覆蓋掉

less => wxss + wxml

自定義組件

類似 vue 和 react 中的自定義組件

小程序允許我們使用自定義組件的方式來構建頁面。

1. 創建自定義組件

  • 創建文件夾 components/
  • 創建 組件 文件夾 Test/
  • 右鍵 新建 Component

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FL1bY39c-1595140559959)(D:\黑馬課程\備課\05-小程序\整理最新筆記+代碼★\md-imgs\組件1.png)]

  • 注意聲明組件 (一般情況下是聲明過了)
    • 在組件的 json 文件中進行自定義組件聲明
// Test.json
{"component": true // 聲明組件
}
  • 注意注冊組件 (一般情況下 也已經注冊過了)
Component({/*** 1. 組件的屬性列表 - 外界傳進來的數據*/properties: {name : {type : String,value :'初始值'}},/*** 2. 組件的初始數據 - 組件自己的私有數據*/data: {},/*** 3. 組件的方法列表*/methods: {}
})

3. 引入組件

  • 首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑
// index.wxml 想使用組件的話, 就要在 index.json 里 先引入
{"usingComponents": {// 要使用的組件的名稱     // 組件的路徑"Test":"/components/Test/Test"}
}

####4. 使用組件

<Test></Test>

法列表
*/
methods: {
}
})

#### 3. 引入組件- 首先要在頁面的 `json` 文件中進行引用聲明。還要提供對應的組件名和組件路徑```js
// index.wxml 想使用組件的話, 就要在 index.json 里 先引入
{"usingComponents": {// 要使用的組件的名稱     // 組件的路徑"Test":"/components/Test/Test"}
}

####4. 使用組件

<Test></Test>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247931.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247931.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247931.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

項目ITP(五) spring4.0 整合 Quartz 實現任務調度

項目ITP(五) spring4.0 整合 Quartz 實現任務調度

版權聲明&#xff1a;本文為博主原創文章&#xff0c;未經博主同意不得轉載。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章&#xff1a;[傳送門] 項目需求&#xff1a; 二維碼推送到一體機上&#xff0c;給學生簽到掃…
閱讀更多...
喜歡用Block的值得注意-Block的Retain Cycle的解決方法

喜歡用Block的值得注意-Block的Retain Cycle的解決方法

本文不講block如何聲明及使用&#xff0c;只講block在使用過程中暫時遇到及帶來的隱性危險。 主要基于兩點進行演示&#xff1a; 1.block 的循環引用(retain cycle) 2.去除block產生的告警時&#xff0c;需注意問題。 有一次&#xff0c;朋友問我當一個對象中的block塊中的訪問…
閱讀更多...
小程序基礎 （三）

小程序基礎 （三）

5. 使用 slot 使用單個slot // 頁面 <Test><view>自定義內容</view> </Test>// 組件 <view><view>前面的內容</view><slot></slot><view>后面的內容</view> </view>使用多個slot - 具名 // 頁面 &…
閱讀更多...
【PyQt5】QT designer + eclipse 集成開發

【PyQt5】QT designer + eclipse 集成開發

【寫在前面的話】 考慮將pyqt5的界面開發qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行進行轉換。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步驟】 1、首先配置Qt designer。 菜單 run-->external Tools-->External tools confi…
閱讀更多...
iOS UIlabel文字排版（改變字間距行間距）分類

iOS UIlabel文字排版（改變字間距行間距）分類

在iOS開發中經常會用到UIlabel來展示一些文字性的內容&#xff0c;但是默認的文字排版會覺得有些擠&#xff0c;為了更美觀也更易于閱讀我們可以通過某些方法將UIlabel的行間距和字間距按照需要調節。 比如一個Label的默認間距效果是這樣&#xff1a; 然后用一個封裝起來的Cat…
閱讀更多...
MySQL查詢之聚合查詢

MySQL查詢之聚合查詢

為了快速得到統計數據&#xff0c;提供了5個聚合函數&#xff1a; count(*)表示計算總行數&#xff0c;括號中寫星與列名&#xff0c;結果是相同的 查詢學生總數 select count(*) from students; max(列)表示求此列的最大值 查詢女生的編號最大值 select max(id) from students…
閱讀更多...
React基礎學習（第一天）

React基礎學習（第一天）

React 概述 : React 是一個用于 構建用戶界面 的 JavaScript 庫因為框架是有一整套解決方案的&#xff0c;React就是純粹寫UI組件的 沒有什么異步處理機制、模塊化、表單驗證這些。React和react-router, react-redux結合起來才叫框架&#xff0c;而React本身只是充當一個前端…
閱讀更多...
iOS 富文本風格NSMutableParagraphStyle、定制UITextView插入圖片和定制復制

iOS 富文本風格NSMutableParagraphStyle、定制UITextView插入圖片和定制復制

問題一 開發過程中&#xff0c;經常會遇到動態計算行高的問題&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
閱讀更多...
day24 01 初識繼承

day24 01 初識繼承

day24 01 初識繼承 面向對象的三大特性&#xff1a;繼承&#xff0c;多態&#xff0c;封裝 一、繼承的概念 繼承&#xff1a;是一種創建新類的方式&#xff0c;新建的類可以繼承一個或者多個父類&#xff0c;父類又可稱基類或超類&#xff0c;新建的類稱為派生類或者子類 class…
閱讀更多...
React基礎學習（第二天）

React基礎學習（第二天）

虛擬DOM JSX 涉及到 虛擬DOM ,簡單聊一下 定時器渲染問題 // 方法 function render() {//2. 創建react對象let el (<div><h3>時間更新</h3><p>{ new Date().toLocaleTimeString()}</p></div>)//3. 渲染ReactDOM.render(el, document.g…
閱讀更多...
iOS 去除字符串中的空格或多余空格（適合英文單詞）

iOS 去除字符串中的空格或多余空格（適合英文單詞）

NSString -stringByTrimmingCharactersInSet: 是個你需要牢牢記住的方法。它經常會傳入 NSCharacterSet whitespaceCharacterSet 或 whitespaceAndNewlineCharacterSet 來刪除輸入字符串的頭尾的空白符號。 需要重點注意的是&#xff0c;這個方法 僅僅 去除了 開頭 和 結尾 的…
閱讀更多...
華為交換機在Telnet登錄下自動顯示接口信息

華為交換機在Telnet登錄下自動顯示接口信息

因為用console連接交換機&#xff0c;默認是自動顯示接口信息的&#xff0c;比如down掉一個接口后&#xff0c;會自動彈出接口被down掉的信息&#xff0c;但是在telnet連接下&#xff0c;默認是不顯示這些信息的&#xff0c;需要開啟后才可顯示。 1、首先開啟info-center(默認是…
閱讀更多...
React基礎學習（第三天）

React基礎學習（第三天）

條件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加載中return <h1>Loading...</h1>}return <div>這就是我們想要的內容</div>} // 鉤子函數 五秒鐘之后 修改狀態值componentDidMount () { setTimeout(() > {this.setState(…
閱讀更多...
componentsJoinedByString 和 componentsSeparatedByString 的方法的區別

componentsJoinedByString 和 componentsSeparatedByString 的方法的區別

將string字符串轉換為array數組 NSArray *array [Str componentsSeparatedByString:","]; &#xff1d;&#xff1d;反向方法 將array數組轉換為string字符串 NSString *tempString [mutableArray componentsJoinedByString:","];--,是分隔符 可不加分隔…
閱讀更多...
java中的各種數據類型在內存中存儲的方式

java中的各種數據類型在內存中存儲的方式

轉載別人的附上鏈接&#xff1a;https://blog.csdn.net/zj15527620802/article/details/80622314 1.java是如何管理內存的 java的內存管理就是對象的分配和釋放問題。&#xff08;其中包括兩部分&#xff09; 分配&#xff1a;內存的分配是由程序完成的&#xff0c;程序員需要通…
閱讀更多...
vscode的 jsonp 配置文件

vscode的 jsonp 配置文件

{ // 工具-字體大小 “editor.fontSize”: 15, // 工具-tab縮進 “editor.tabSize”: 2, // 工具-在視區寬度換行 “editor.wordWrap”: “on”, // 工具-縮放 “window.zoomLevel”: 1, // 工具-編寫tab識別語言格式 “emmet.includeLanguages”: { “vue-html”: “html”, “…
閱讀更多...
NSString拼接字符串和NSPredicate詳解

NSString拼接字符串和NSPredicate詳解

NSString* string; // 結果字符串 02 NSString* string1, string2; //已存在的字符串&#xff0c;需要將string1和string2連接起來 03 04 //方法1. 05 string [[NSString alloc]initWithFormat:"%,%", string1, string2 ]; 06 07 //方法2. 08 string [string1 …
閱讀更多...
線程模塊

線程模塊

信號量 from threading import Semaphore,Thread import timedef func(a,b):time.sleep(1)sem.acquire()print(ab)sem.release()sem Semaphore(4) for i in range(10):t Thread(targetfunc,args(i,i5))t.start() 信號量事件 # 事件被創建的時候&#xff0c;默認為False狀態 #…
閱讀更多...
React中級學習（第一天）

React中級學習（第一天）

Props深入 children 作用 : 獲取組件標簽的 子節點獲取方式 : this.props.children <App>此處的內容&#xff0c;就是組件的 children&#xff0c;將來通過組件的 props.children 就可以獲取到這些子節點了 </App>props 校驗 作用&#xff1a;規定組件props的類…
閱讀更多...
iOS 正則表達式判斷純數字以及匹配11位手機號碼

iOS 正則表達式判斷純數字以及匹配11位手機號碼

1用正則表達式 //是否是純數字(BOOL)isNumText:(NSString *)str{NSString * regex "(/^[0-9]*$/)";NSPredicate * pred [NSPredicate predicateWithFormat:"SELF MATCHES %", regex];BOOL isMatch [pred evaluateWithObject:st…
閱讀更多...
最新文章

Copyright @ 2022~2023