微信小程式學習筆記(階段二)

2022-09-13 12:24:09 字數 3178 閱讀 1707

二階段學習過程:

(一)看官方文件的框架、元件、api:

(三)模仿並寫出各個demo(模板應用demo、快遞查詢demo、登陸介面demo)

btnclick:function

());

console.log(thispage.data.info);

});},

input:

function

(event)); //

獲取輸入的運單號

}

注:方法的引數也可以是另乙個方法wxml模板引用:模板的使用有兩種方式:

方法1:引入**如下

<

include

src="../templates/header"

/>

附:此處引用的模板內容

<

text

>}

text

>

方法2:引入**如下

<

import

src="../templates/footer"

/>

<

template

is="footer1"

data

="}"

/>

<

template

is="footer2"

data

="}"

/>

附:此處引用的模板內容

<

template

name

="footer1"

>

!! this is footer1 (testmsg: }) !!

template

>

<

template

name

="footer2"

>

!! this is footer2 (testmsg: }) !!

template

>

wxml中if和for的使用:wx:if:格式如下

<

view

wx:if

="}"

>} show

view

>

<

view

wx:else

>} no-show

view

>

即當前頁面中變數show的值為true時,顯示變數iftext的內容+"show";否則顯示變數iftext的內容+"no-show"

wx:for:格式如下

-----------wx:for的使用1

<

view

wx:for

="}"

>

}-}

view

>

-----------wx:for的使用2

<

view

wx:for

="}"

wx:for-item

="demoitem"

>

}-}

view

>

迴圈次數為fortext的元素個數次,大概類似foreach的用法

視窗跳轉(導航)方法:

①wx.redirectto:這個方法會將當前頁面關閉,不會保留在後台中,無法直接返回。

②wx.n**igateto:這個方法會保留當前頁面在後台。

③wx.switchtab:這個方法用於跳轉到有tabbar的頁面,並關閉所有非tabbar頁面。

④wx.relaunch:這個方法會關閉當前的所有頁面,並開啟目標頁面。

⑤wx.n**igatback:

使用方法:

①在*.js中使用:

wx.****();

wx.n**igateback()
②在*.wxml中使用:

<

n**igator

url="../index/index"

>no-redirect

n**igator

>

<

n**igator

url="../index/index"

redirect

>redirect

n**igator

>

給目標頁面傳遞資料:在url後面新增?a=0&b=1即可,具體**如下:

wx.****();

onload : function

(options));

}

小技巧:當不知道資料的內容或格式的時候,可以用console.log(var);顯示在控制台(console)中,即可檢視它的內容和結構,如圖:

圖1 控制台(console)中顯示資料的結構

圖2 知道資料的結構後摘取其中資料的**

個人感想:

在本次階段學習中,最主要有三個問題,實在是令人抓狂。

三是開發工具本身的除錯介面,顯示出來的頁面元件和實際元件的位置不相應,一開始沒發現這個問題,導致測試不了輸入框輸入內容的觸發事件的方法。

微信小程式學習筆記

1 background image 只能用網 絡url 或者base64 本地圖 片要用image 標籤才行 2 事件綁 定value 是乙個字串,需要在對應的 page 中定義 同名的函式。不然當觸 發事件的時候會 報錯。3 bind事件綁 定不會阻止冒泡事件向上冒泡,catch事件綁 定可以阻...

微信小程式學習筆記

主要用於 編寫和效果預覽,還可以進行 真機除錯 2 雲開發控制台 wxml 對應html,提供很多常用的元件。wxss 對應css,基本沒差別,目前體會最深的是尺寸單位rpx替代畫素單位px,能很方便的適配各種解析度的手機。js 同js。json 同json。pages 乙個頁面對應乙個資料夾,乙個...

微信小程式學習筆記

資料繫結 條件渲染和列表渲染 模板樣式匯入事件是檢視層到邏輯層的通訊方式。事件分為冒泡事件和非冒泡事件 冒泡事件 當乙個元件上的事件被觸發後,該事件會向父節點傳遞。非冒泡事件 當乙個元件上的事件被觸發後,該事件不會向父節點傳遞。json wxml js page.js page bindminus ...