微信小程式筆記 一

2022-09-11 19:36:15 字數 2141 閱讀 6001

案例:

文件:

1、檢視與渲染

1.1 點選事件bindtap

<

button

bindtap

="btnclick"

>}

button

>

1.2 渲染標籤

1.2.1   if...else...

<

view

wx:if

="}"

>1

view

>

<

view

wx:else

> 2

view

>

1.2.2 迴圈

<

view

wx:for

="}"

>}<

view

>

<

view

wx:for

="}"

wx:for-itme

="vo"

>}

view

>

<

view

wx:for

="}"

wx:for-item

="vo"

wx:for-index

="ix"

>

} - }

view

>

1.3模板

等同於直接複製檔案中的**

可以設定引入哪個模板

2.1、 事件類別

點選事件 tap

2.2、  事件繫結

bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡。

3、路由跳轉

3.1、n**igator元件做頁面鏈結

<

n**igator

url="logs?id=2"

hover-class

="n**igator-hover"

>跳轉到新頁面

n**igator

>

<

n**igator

url="logs?id=2"

redirect hover-class

="other-n**igator-hover"

>在當前頁開啟(關閉了當前頁面)

url:應用內的跳轉鏈結

redirect:是否關閉當前頁面

hover-class:指定點選時的樣式類,當hover-class="none"時,沒有點選效果

3.2、 wx.n**igateto(object)

保留當前頁面,跳轉到應用內的某個頁面,使用wx.n**igateback可以返回到原頁面。

wx.n**igateto()

3.3、wx.redirectto(object)

關閉當前頁面,跳轉到應用內的某個頁面。

wx.redirectto()

3.4、wx.n**igateback()

關閉當前頁面,回退到前一頁面。

4、元件

4.1、view元件

4.2、text元件

除了text元件以外的其他元件都無法長按選中。

text元件無法解析html。

4.3、image元件

5、元件模組化設計

通過wxml的import和include來使用檔案模板

使用wxss的@import來引用wxss檔案

使用js的require來引用js檔案

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式筆記

目錄結構 1.列表渲染 陣列物件都可以 預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item wx for index index wx for item item 如果是單層渲染,沒有巢狀的話 可以直接省略這個繫結 for page 物件迴圈 2.條件渲染 初始消耗小 切...

微信小程式(一)

1 vs code 常用擴充套件和快捷鍵之前發過介紹文章 vs code初次使用必備 2 谷歌瀏覽器 開發必備 1 新建資料夾 2 在vs code 內新建網頁檔案 html 3 編寫網頁 英文的!再按 回車即可自動生成下圖 注意 網頁的字尾要儲存為.html才可自動生成 4 雙擊網頁顯示效果 1....