微信小程序開(kāi)發(fā)總結(jié)
基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié)提醒
微信小程序不運(yùn)行在瀏覽器,所以不能操作Dom,也沒(méi)有document、window對(duì)象
每一個(gè)頁(yè)面路徑最多五層
eg:頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->(頁(yè)面F是跳轉(zhuǎn)不出來(lái)的) 注:不經(jīng)過(guò)redirect,redirect后的頁(yè)面算是第一層,但是沒(méi)有-返回-按鈕
沒(méi)有外鏈,只能用app.json里配置的路由,a標(biāo)簽編譯時(shí)會(huì)自動(dòng)過(guò)濾掉
wx:for循環(huán)渲染時(shí),要添加wx:key,否則報(bào)警告
使用
做x軸滾動(dòng)時(shí),要設(shè)置height屬性,否則開(kāi)發(fā)工具買(mǎi)賬,手機(jī)可不慣著你
給視圖綁定數(shù)據(jù)時(shí),只有事件綁定、wx:key、wx:for-index、wx:for-item,直接綁定,不需要{{}},其它綁定都要在{{}}里綁定
app.json里的pages,最好是按照,層級(jí)順序進(jìn)行配置,要不然可能不會(huì)跳轉(zhuǎn)
使用touchstart、touchend時(shí),最好不要阻止冒泡,會(huì)影響子級(jí)的tap事件,touchmove最好阻止冒泡,防止影響父級(jí)scroll-view
視圖元素單位使用input時(shí),最好在bindinput中動(dòng)態(tài)設(shè)置value,否則安卓真機(jī)會(huì)出問(wèn)題
設(shè)計(jì)時(shí)最好讓ui做成750px,開(kāi)發(fā)中,ui是多少px,你寫(xiě)成多少rpx就OK了,原理,自己查文檔去頁(yè)面?zhèn)鲄?/b>
視圖響應(yīng)Page({ onLoad (opositions) { // 看看是不是你想要的 console.log(opositions.id) } })
每個(gè)頁(yè)面都有一個(gè)Page實(shí)例,響應(yīng)就是該實(shí)例的setData方法觸發(fā)的, *直接給綁定數(shù)據(jù)賦值,數(shù)據(jù)會(huì)改變,但是視圖不會(huì)渲染 js文件 let config = { data: {} } Page(config)事件綁定
wxml文件js文件 let config = { data: {}, tapHandler () { console.log("i am a handler") } }
bindtap的綁定最終會(huì)解析成方法名,所以bindtap=“tapHandler(參數(shù))”,是會(huì)報(bào)錯(cuò)的,----沒(méi)有找到‘tapHandler(參數(shù))’這個(gè)方法,
好在,執(zhí)行事件綁定函數(shù)時(shí),會(huì)給它傳遞一個(gè)參數(shù),參數(shù)里能取到,id、data-set,可以用他們倆綁定屬性,不要企圖找name、class等屬性,沒(méi)用的,沒(méi)有
組件分三個(gè)文件,wxml、js、css
wxml文件定義template模版,頁(yè)面里以import方式引入,這樣能控制傳入模版的數(shù)據(jù)
js文件exports一個(gè)對(duì)象,頁(yè)面里以require方式引入,并且合并到Page實(shí)例化的配置對(duì)象中 let tempateConfig = require("url") let mergeConfig = require("url/wxTools.js")["mergeConfig"] let config = { data: {} } config = mergeConfig(config, templateConfig) Page(config)
mergeConfig是自己定義的簡(jiǎn)單的對(duì)象合并函數(shù),支持多層,多對(duì)象合并
Object.assign()方法在安卓真機(jī)上運(yùn)行報(bào)錯(cuò),不能用
wxTools.js function merge (con, mcon) { for (var key in mcon) { if (typeof mcon[key] == "object" && con[key]) { merge(con[key], mcon[key]) } else { con[key] = mcon[key] } } return con } function mergeConfig () { let config = {} for (var i = 0, len = arguments.length; i < len; i++) { config = merge(config, arguments[i]) } return config } module.exports = { mergeConfig: mergeConfig }
css文件以@import方式導(dǎo)入開(kāi)發(fā)技巧
1.錨點(diǎn)
還好微信提供了
wxml文件js文件 Page({ data: { toView: "hash1" }, goHash (e) { let hash = e.currentTarget.dataset.hash this.setData({ toView: hash }) } })
但是這是單向的,只能點(diǎn)擊按鈕,跳轉(zhuǎn)錨點(diǎn),屏幕滑動(dòng)到相應(yīng)錨點(diǎn),toView屬性不會(huì)相應(yīng)改變,當(dāng)然,如果你能通過(guò)bindscroll事件動(dòng)態(tài)取到的相關(guān)數(shù)據(jù),并且最終能把toView計(jì)算出來(lái),就另說(shuō)了,但不要想操作dom獲取元素寬高什么的,對(duì)不起,微信的dom賣(mài)完了,沒(méi)有
2.滾動(dòng)加載
微信沒(méi)有document、window對(duì)象,所以沒(méi)有onscroll給你用,那怎么辦呢?
還好微信提供了
wxml文件js文件 Page({ data: { movies: [] }, getMovies () { let _self = this wx.request({ url: "https://......", data: {}, success: function(res) { // res.data才是你后端返回的真實(shí)數(shù)據(jù) _self.setData({ movies: res.data }) } }) }, loadMovies () { // 得到要更新的數(shù)據(jù),setData重置movies } }) {{item.name}}
可以做懶加載,也可以做預(yù)加載,具體邏輯自己想吧
暫時(shí)就這些啦。。。最后抱怨一句,咋就不支持外鏈呢,引共用組件咋那么麻煩呢
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/115430.html
微信小程序開(kāi)發(fā)總結(jié) 基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié) 提醒 微信小程序不運(yùn)行在瀏覽器,所以不能操作Dom,也沒(méi)有document、window對(duì)象 每一個(gè)頁(yè)面路徑最多五層 eg:頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->(頁(yè)面F是跳轉(zhuǎn)不出來(lái)的) 注:不經(jīng)過(guò)redirect,redirect后的頁(yè)面算是第一層,但是沒(méi)有-返回-按鈕...
微信小程序開(kāi)發(fā)總結(jié) 基礎(chǔ)的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說(shuō)一下自己的經(jīng)驗(yàn)總結(jié) 提醒 微信小程序不運(yùn)行在瀏覽器,所以不能操作Dom,也沒(méi)有document、window對(duì)象 每一個(gè)頁(yè)面路徑最多五層 eg:頁(yè)面A->頁(yè)面B->頁(yè)面C->頁(yè)面D->頁(yè)面E->(頁(yè)面F是跳轉(zhuǎn)不出來(lái)的) 注:不經(jīng)過(guò)redirect,redirect后的頁(yè)面算是第一層,但是沒(méi)有-返回-按鈕...
摘要:官方資料微信公眾平臺(tái)注冊(cè)小程序。官網(wǎng)開(kāi)發(fā)文檔社區(qū)開(kāi)發(fā)工具部署微信小程序微信小程序本身不需要部署,在微信開(kāi)發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年,目前已經(jīng)工作了2年,因?yàn)樽詫W(xué),基礎(chǔ)差,所以打算年末總結(jié)一下常見(jiàn)的基礎(chǔ)知識(shí)和面試點(diǎn); 也可以通過(guò)獨(dú)立做一個(gè)項(xiàng)目整合自己工作期間學(xué)習(xí)的知識(shí),加深印象。 但是想著回家或是平時(shí)手機(jī)用的多,做一款A(yù)PP和小程序很方便查看。 項(xiàng)目展示 本...
摘要:由于個(gè)人技術(shù)水平有限,在問(wèn)題描述,解決方案中存在的問(wèn)題,希望可以得到各位前輩的指點(diǎn)。本篇主要是記錄我在開(kāi)發(fā)微信小程序中遇到的問(wèn)題。各記錄點(diǎn)排序,跟隨自己開(kāi)發(fā)過(guò)程中的問(wèn)題出現(xiàn)時(shí)間而定。。微信小程序數(shù)據(jù)頁(yè)面數(shù)據(jù)傳遞總結(jié) 由于個(gè)人技術(shù)水平有限,在問(wèn)題描述,解決方案中存在的問(wèn)題,希望可以得到各位前輩的指點(diǎn)。本篇主要是記錄我在開(kāi)發(fā)微信小程序中遇到的問(wèn)題。各記錄點(diǎn)排序,跟隨自己開(kāi)發(fā)過(guò)程中的問(wèn)題出現(xiàn)...
閱讀 2482·2021-08-18 10:21
閱讀 2580·2019-08-30 13:45
閱讀 2219·2019-08-30 13:16
閱讀 2211·2019-08-30 12:52
閱讀 1434·2019-08-30 11:20
閱讀 2723·2019-08-29 13:47
閱讀 1678·2019-08-29 11:22
閱讀 2824·2019-08-26 12:11