【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序開(kāi)發(fā)經(jīng)驗(yàn)分享示例

在下給大家分享一下小程序開(kāi)發(fā)經(jīng)驗(yàn)分享示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！ 一、WXML1.1：wx:if與wx:else前端通過(guò)后端的接口獲取信息列表，如果有數(shù)據(jù)則展示數(shù)據(jù)內(nèi)容，否則則顯示找不到信息。

如果if-else使用布爾值的狀態(tài)作這個(gè)開(kāi)關(guān)的話，頁(yè)面會(huì)先出現(xiàn)false的狀態(tài)，再更新為true，即閃現(xiàn)找不到信息的內(nèi)容，這種交互不是很理想。<view

wx:if="{{true}}">

<text>這是信息列表</text>

</view>

<view

wx:else>

<text>找不到信息</text>

</view>最好的做法是使用下面這種，一開(kāi)始設(shè)置info為null,data:{

info:null

}<view

wx:if="{{info

===

1}}">

<text>這是信息列表</text>

</view>

<view

wx:if="{{info

===

0}}">

<text>找不到信息</text>

</view>1.2：wx:forfor循環(huán)要添加wx:for-item="item"wx:key="item"1.3：block標(biāo)簽wx:if、wx:for、wx:else這些沒(méi)有樣式意義的語(yǔ)法盡量使用block1.4：template組件模板公共的頁(yè)面模塊/組件，可直接在wxml使用，也可以使用import方式。如果涉及到css，需要在wxss里@import引入。/**

*

方式一：直接使用

*

1.

給template

設(shè)置name屬性

*

2.

組件傳過(guò)來(lái)的值可以直接使用

hidden="{{!isloading}}"

*/

<template

name="loading">

<view

class="weui-loadmore"

hidden="{{!isloading}}">

<view

class="weui-loading"></view>

<view

class="weui-loadmore__tips">正在加載</view>

</view>

</template>

/**

*

方式二：按路役引入

*

1.

is

等同方式一的name

*

2.

data="{{isloading}}"

給template的數(shù)據(jù)

*/

<import

src="../template/loading.wxml"/>

<template

is="loading"

data="{{isloading}}"></template>1.5：腳本語(yǔ)言wxs專門運(yùn)行于wxml頁(yè)面的腳本語(yǔ)言，與javascript不同，不支持使用ES6語(yǔ)法，也不能引用js。<wxs

module="wxs"

src="../../utils/wxs.wxs"></wxs>module.exports

=

{

//輸出百分比

formatProgress:

function

(c,m)

{

return

c/m*100

}

}二、WXSS2.1：背景Icon小程序的background里只能使用完整的https圖片路徑，項(xiàng)目中使用icon的方式：矢量圖svg：具備完美的可伸縮性，容易進(jìn)行調(diào)整（顏色、大小等）;data-uri：圖片體積小于20Kb使用base64方式。[前端圖片最優(yōu)化的引入方式分析][/a/119000001…]較大文件：直接在wxml使用image標(biāo)簽引入外部icon：如阿里巴巴矢量圖庫(kù)，可使用網(wǎng)絡(luò)路徑和下載到本地的方式來(lái)使用。2.2：重置樣式2.3：font-family標(biāo)準(zhǔn)規(guī)范font-family:

/*西文：*/

-apple-system,BlinkMacSystemFont,Segoe

UI,Roboto,Ubuntu,Helvetica

Neue,Helvetica,Arial,

/*中文：*/

PingFang

SC,Hiragino

Sans

GB,Microsoft

YaHei

UI,Microsoft

YaHei,Source

Han

Sans

CN,sans-serif;2.4：合理使用rpx單位rpx是一個(gè)相當(dāng)于屏幕寬度百分比的相對(duì)單位，以下情況不建議使用：font-size和border-width；animation動(dòng)畫中涉及translate位移：部分機(jī)器在rpx轉(zhuǎn)成px出現(xiàn)小數(shù)時(shí)，如262.89px，微信會(huì)向下取值為262px，產(chǎn)生1px的差距。canvas繪圖，比如二維碼、分享圖片等。三、JavaScript3.1：二次封裝wx.request方法3.2：頁(yè)面的生命周期onLoad:頁(yè)面加載，一個(gè)頁(yè)面只會(huì)調(diào)用一次。能獲得到頁(yè)面參數(shù)options。onShow:頁(yè)面顯示，每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次，從后臺(tái)切換前臺(tái)也會(huì)調(diào)用一次：手機(jī)從熄屏切回顯屏、從最小化回到最大化。onReady:頁(yè)面初次渲染完成，一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。onHide:頁(yè)面切換到后臺(tái)、navigateTo、tab切換時(shí)調(diào)用。onUnload:頁(yè)面卸載。當(dāng)頁(yè)面被關(guān)閉或內(nèi)存不足主動(dòng)銷毀頁(yè)面。3.3：newDate兼容性安卓能識(shí)別newDate("2018-05-3000:00:00")格式，但在IOS只能識(shí)別2018/05/3000:00:00格式。需要將短橫替換為斜杠。variosDate=date.replace(/-/g,'/')。3.4：冒泡事件bindtap：事件綁定不會(huì)阻止冒泡事件向上冒泡catchtap：事件綁定可以阻止冒泡事件向上冒泡四、小程序功能4.1：canvas生成圖片4.2：插件的使用4.3：頁(yè)面棧限制小程序的頁(yè)面棧最新版本限制為10個(gè)，超過(guò)10個(gè)之后無(wú)法進(jìn)入下一個(gè)頁(yè)面。故要慎用頁(yè)面數(shù)量，導(dǎo)航API要靈活結(jié)合wx.navigateTo、wx.redirectTo、wx.navigateBack4.4：提示彈窗Dialog代碼前面使用wx.hideLoading會(huì)導(dǎo)致后面的wx.showToast出不來(lái)。因?yàn)閣x.showToast具備隱藏wx.showLoading(