2019 11 07 微信小程式入門

2022-08-27 07:15:11 字數 3038 閱讀 1876

3.簡單頁面

以.wxml結尾的檔案就相當於html

>冧九。

text

>

<

text

class

="welcome"

>歡迎您訪問愛寵精靈

text

>

<

text

class

="btn_b"

>點選下方按鈕,開啟奇妙旅程

text

>

<

image

class

="submit_btn"

src='/images/22.gif'

bindtap

="jump"

/>

view

>

以.wxss結尾的檔案就相當於css檔案

/*

pages/welcome/welcome.wxss

*/.body.banner.header.username.welcome.submit_btn.btn_bpage

以.js結尾是邏輯互動檔案

//

pages/welcome/welcome.js

page(,

/** * 生命週期函式--監聽頁面載入

*/onload:

function

(options) ,

/** * 生命週期函式--監聽頁面初次渲染完成

*/onready:

function

() ,

/** * 生命週期函式--監聽頁面顯示

*/onshow:

function

() ,

/** * 生命週期函式--監聽頁面隱藏

*/onhide:

function

() ,

/** * 生命週期函式--監聽頁面解除安裝

*/onunload:

function

() ,

/** * 頁面相關事件處理函式--監聽使用者下拉動作

*/onpulldownrefresh:

function

() ,

/** * 頁面上拉觸底事件的處理函式

*/onreachbottom:

function

() ,

/** * 使用者點選右上角分享

*/function

() ,

jump:

function

() )

}})

以上**實現出來的效果:

4.做乙個簡單跳轉

在上面的示例**中已經寫入了點選跳轉頁面,在.wxml**中,

bindtap = jump 就是繫結了乙個叫做jump的事件,那麼這個事件應該在**寫呢?

沒錯,就是寫在邏輯互動頁面。細心地朋友可能已經發現了。

jump:function

() )

}

這裡我們只是做了乙個跳轉,當然這裡是需要根據自己的實際業務來完善的。

5.做乙個列表

小程式頁面顯示邏輯是:先走js檔案 再去渲染頁面,所以我們把資料放在相應的js檔案中的data裡面即可,要注意一定要把資料放在與顯示頁面相一致的js檔案中。

然後在.wxml檔案中迴圈資料即可。

<

view

wx:for

="}"

wx:for-item

="vo"

class

="forum_data"

>

<

view

class

="forum"

bindtap

="detail"

id='}'

>

<

text

class

="forum-title"

>}

text

>

<

image

src=""

class

="forum-img"

>

image

>

view

>

view

>

6.關於跳轉保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。

關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。

跳轉到 tabbar 頁面,並關閉其他所有非 tabbar 頁面

微信小程式入門

標籤 view text 語法 條件渲染 view view else view 列表渲染 for wx key view for wx for item myitem wx for index myindex text 模板template 定義 template name temp view t...

微信小程式入門

pages 存放頁面的目錄 utils 存放自定義util工具的目錄 project.config.json 專案配置檔案 sitemap.json關於本檔案的更多資訊,請參考文件 專案中檔案,保留project.config.json 和 sitemap.json即可,其他的都可以刪除然後自行建立...

微信小程式入門

此處省略安裝過程 網上很多 可直接 直接寫筆記了 開發小程式可以將iphone6作為視覺稿的標準。wxs是指令碼語言,結合wxml構建頁面的結構,同時它並不依賴基礎庫版本,可以在所有版本的小程式上執行,它與js不同,並且執行環境與js是隔離的,wxs不能呼叫js中的函式或方法,也不能呼叫小程式提供的...