3 微信小程序基礎(chǔ)使用篇1

1、基礎(chǔ)知識:

(1).微信小程序開發(fā)中省略了page標(biāo)簽,其直接寫<view><text>標(biāo)簽即可;page等同于html, image等同于img,?text等同于span,?微信小程序中的標(biāo)簽大多為快元素(text為行元素,image行內(nèi)快),樣式兼容css2.0/ css3.0,js兼容es6.0,內(nèi)部可轉(zhuǎn)換為es5.0; ->其需要遵循系列規(guī)范,小程序中的標(biāo)簽稱之為“組件”,樣式,js都兼容,就是使用方法上會(huì)存在些差異而已,聚焦點(diǎn):組件、API的使用;

(2).最常用組件view、image、text;

[1].view組件屬性:hover-class表示點(diǎn)擊態(tài)(點(diǎn)擊后的樣式,等同于div:hover{}),屬性值填寫類名,默認(rèn)值hover-class="none";hover-stop-propagation表示是否阻止其的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài),默認(rèn)值為false;hover-start-time: 50,表示按住多少毫秒后出現(xiàn)點(diǎn)擊態(tài),單位毫秒;hover-stay-time: 400,?手指松開后點(diǎn)擊態(tài)保留時(shí)間,單位毫秒;

[2].image組件屬性:其可使用絕對路徑;mode表示模式,mode="widthFix"表示寬度不變,高度自適應(yīng),保持原圖寬高比不變; ->?使用單標(biāo)簽也OK<image/>

[3].text組件屬性:selectable表示文本是否可選,默認(rèn)為false;?decode表示是否解碼,例如&gt;&lt;&nbsp;等html編碼,其是不能識別的,所以文本中多個(gè)空格無法實(shí)現(xiàn),decode=“true”完美解決了該問題;space表示是否顯示連續(xù)空格,默認(rèn)值為false,其也可填寫ensp,emsp,nbsp;? ? ? ? ? ? ? ? ? ?- - ->?text組件中只支持<text>嵌套,而且除了文本節(jié)點(diǎn)以外的其它節(jié)點(diǎn)都無法長按選中;

(3).微信小程序的響應(yīng)式開發(fā) ->?巧妙利用“單位rpx”

[1].微信小程序的開發(fā)需要在不同機(jī)型上保證用戶體驗(yàn)是相同的,其巧妙使用rpx單位,小程序中默認(rèn)所有機(jī)型寬為750rpx,高為1334rpx,例如iphone6 375px*750px,那在iphone6上1px=2rpx;?也就是若一張圖片設(shè)置12px*12px,iphone6的小程序開發(fā)中需設(shè)置為24rpx*24rpx;

[2].wx.getSystemInfo({});接口

(4).微信小程序中綁定事件:小程序中沒有dom元素,所以其不能通過獲取dom元素后綁定事件處理函數(shù),其只有”句柄“方式綁定事件處理函數(shù); ->?事件處理函數(shù)在page({}),配置項(xiàng)中直接使用就OK,vue中是寫在methods:{}中;

[1].bind:tap或者bindtap都OK,tap表示用戶點(diǎn)擊事件;

[2].bindtap與catchtap的區(qū)別:catch綁定事件可阻止向父元素冒泡 ->建議使用catch綁定事件; [注:原生組件綁定事件處理函數(shù)只能使用bindtap;不能使用catch,以及bind:tap;不能有冒號]

(5).微信小程序的路由接口:

wx.navigateTo({ url: });//保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,但是不能跳到tabbar頁面;使用wx.navigateBack();返回到原頁面;

wx.navigateBack({ delta: number });//關(guān)閉當(dāng)前頁面,返回上個(gè)頁面或多級頁面,delta表示返回的頁面數(shù),若大于現(xiàn)有頁面數(shù)目,直接返回首頁;

wx.redirectTo({});//關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,但不允許跳轉(zhuǎn)到tabbar頁面;

wx.switchTab({});//跳轉(zhuǎn)到tabBar頁面,并關(guān)閉其它所有非tabBar頁面;

wx.reLaunch({});//關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個(gè)頁面;

(6).app.json以及局部json文件:

[1].屬性名必須加引號,屬性值末尾以及屬性值內(nèi)的屬性值末尾也不能加標(biāo)點(diǎn)符號,其會(huì)報(bào)錯(cuò);?

[2].開發(fā)過程中可調(diào)換pages屬性中的屬性值順序,若將"pages/connet/logs"放到首位,編譯后首先展示的是logs.wxml頁面,方便測試;

- - - >>>?學(xué)完基礎(chǔ)使用篇1后,可完成小demo:兩個(gè)頁面之間進(jìn)行跳轉(zhuǎn)(綁定事件進(jìn)行跳轉(zhuǎn))

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容