微信小程式留言板功能原始碼

2022-08-22 06:03:14 字數 3440 閱讀 3086

環境之類的基礎東西

3.目錄解釋:

a)pages放頁面,每個都必須含有js\json\wxml\wxss四個檔案。

js檔案類似於js檔案,json是配置,比如整個頁面頂端的名字顏色之類的,wxml類似於html,wxss類似於css。

其中**格式也相似。

b)utils中放公共js。

1.先寫wxml,然後加入class後寫樣式。通過bindtab繫結js中的函式。在js中新增函式。

index.wxml

<

view

class

="msg-box"

>

<

view

class

="send-box"

>

<

input

value

='}'

bindinput

='changeinputval'

class

="input"

type

="text"

placeholder

placeholder-class

='place-input'

/>

<

button

size

='mini'

type

="primary"

bindtap

='addmsg'

>新增

button

>

view

>

<

text

>重新整理後新增的資料

text

>

<

text

class

="msg-info"

wx:if

="}"

text

>

<

view

class

="list-view"

>

<

view

class

="item"

wx:for

="}"

wx:key

="}"

>

<

text

class

='text1'

>}

text

>

<

icon

data-index

="}"

class

="close-btn"

bindtap

='delemsg'

type

="cancel"

>

icon

>

view

>

view

>

<

text

>從storage取出的資料

text

>

<

text

class

="msg-info"

wx:if

="}"

text

>

<

view

class

="list-view"

>

<

view

class

="item"

wx:for

="}"

wx:key

="}"

>

<

text

class

='text1'

>}

text

>

<

icon

data-index

="}"

class

="close-btn"

bindtap

='delemsg1'

type

="cancel"

>

icon

>

view

>

view

>

<

button

type

="primary"

size

='mini'

bindtap

='showstorage'

>storage

button

>

view

>

其中wx:if和wx:for都是類似於c:if和c:for的寫法。

view類似於div,可以巢狀。

}是通過巢狀的兩個大括號來去js中page}中的引數。

wx:key是要寫的,不寫會出警告。

item是固定的,可以修改的是點後面的引數

2.編寫樣式:

index.wxss

/*

*index.wxss*

*//*

實現樣式,類似於css

*/.msg-box.send-box.input.msg-info.place-input.list-view.item.text1.close-btn

基本跟css沒什麼差別。

3.對應寫js,根據wxml中的bindtab或者bindinput之類的繫結事件來進行編寫

//

index.js

//實現函式

page(,

changeinputval(ev) );

},addmsg() );

this.setdata();

/*獲取storage中的所有資料

*/var list1 = this

.data.msgdata1;

for(var i=0;i));}/*

把新新增的資料新增到要存入stroage的陣列中

*/wx.setstorage()

/**把資料存至stroage

*/var that = this

;wx.getstorage();

},})

},delemsg(ev) );

},delemsg1(ev) );

},/*

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

*/onload:

function

(options) );

},})

},})

其中,整個檔案必須要有的就是最外層的page({}),自帶了許多函式,如onload,可以酌情使用。本例中使用了onload。

本例是實現了隨著程式的生命週期而存在的msgdata和存放到本地快取的msgdata1兩種。

4.可以修改在介面最頂端的顯示字樣

index.json

{

json檔案中必須含有最外層的乙個大括號。

PHP MYSQL留言板原始碼

資料庫結構 庫名 lyb 表一 admin 字段 id int11 name varchvr password varchvr 表二 lo 字段 id int11 username varchvr varchvr qq varchvr email varchvr info text ip varch...

微信小程式留言功能實現

index.wxml bindtap llzanchange view class zhegai hide bindtap llbquxiao view view class liuyanban hide view class view textarea class shuruk value bin...

留言板小程式開發筆記 4

前端多個html檔案,共用變數的時候,使用cookie,或者在多個頁面之間通過 url傳遞變數.因此,最好的是,乙個html文件對應乙個js檔案,如果某些文件的js較少,就直接寫在這個文件的最後面就好了,不用另外單獨 寫乙個 js檔案了.這是ff控制台給出的提示資訊 html 文件的字元編碼未宣告。...