開發小程式的一些小經驗總結與分享

2022-09-23 18:15:10 字數 1645 閱讀 1652

在微信小程式中可以說是乙個神奇的存在。在web開發中,我們會利用的自適應比如百分比而省去不少麻煩,因為高度會自適應。但是小程式中的都有乙個初始大小,而且是固定的,無論你的多大多小,都是統一的320px*240px。雖然作為元件的支援平鋪,剪下等呈現效果,但是容器大小都是固定的,所以每次使用image我們要想辦法控制的大小。

css控制(大小固定的)

用css控制一部分固定比例的,我們可以使用微信自帶的單位rpx來固定。

image

複製**

動態計算(用於多種不同尺寸的)

如果遇到了內容頁這種,不知道固定尺寸的情況,就只能根據在後端給的尺寸,然後在js中換算,通過setdata設定大小。

this.setdata()

複製**

複製**如果你的頁面需要根據當前頁面,計算的高度和寬度,那麼頁面一定會閃以下,因為wx.getsysteminfo是非同步的。

wx.getsysteminfo(

})複製**

如果像解決這個問題,我們可以這樣,設定乙個isloaded的引數,等頁面載入好了再顯示。

複製**

當然還有乙個方法叫做同部wx.getsysteminfosync,這樣就不會像非同步那樣閃了。

try catch (e)

複製**

如何高度百分百,這裡如果page相當於html如果不是100%,那麼即使內部元素設定高度100%也是無效的,因為百分比是相對父元素而定的。如果這張頁面只用於一屏的,那麼我們可以page設定高度100%,但是如果這張頁面我們只是loading的時候需要100%,那麼這個時候我們可以使用vh這個單位,vh相當於把螢幕的高度分為了100份,因此我們100vh就是滿屏的意思。

.onepagewrapper

複製**

有時候,我們不想寫重複的css,但是又不想寫在全域性app.wxss中。我們只是有幾張頁面需要共享,這個時候可以建立乙個wxss,然後匯入當前頁面的wxss。就像下方這樣匯入就可以了。

重複兩遍以上的都用模板。同樣為了解決重複問題,我們可以定義模板,然後引入模板呼叫模板,這樣可以極大地減少重複**。

定義模板時,使用。

}}lv}複製**

使用模板時,使用。如果是模板的定義和使用在同一張頁面上則不需要匯入,如果是不同頁面則需要使用匯入。當然模板是需要傳輸資料的,我們該如何傳遞引數呢?很簡單,直接data="}",加上這個引數,我們可以在模板中呼叫名為userinfo的物件了。如果是多個物件?而且想要將函式也傳遞過去保定呢?可以這樣寫data="}",直接將你想要傳遞的引數通過,分割,掉用的時候bindgetuserinfo="bindgetuserinfo"即可。

複製**官方文件

如果css復用和wxml已經不能滿足復用的問題,自定義元件滿足你。比如有個按鈕,每張頁面都有,而且都需要點選回應相應的操作,如果每個頁面配置,js就需要複製複製複製。如果是自定義元件,直接呼叫即可。而且自定義元件不僅page可以呼叫,元件之間也可以互相呼叫,只需再json中配置既可以輕鬆呼叫。

首先是建立元件:

然後在json中配置,告訴其他頁面我是不是元件,以及配置頁面需要用到的元件。

}複製**

配置成功之後,直接在wxml中當作原生元件一般使用:

複製**

有時候會通過canvas來建立分享,讓使用者**分享。

步驟:

關於前端開發的一些小經驗總結

0 開發的時候,對於控制台的警告一定給消除掉,一定要!1 就vue.js框架來說,能用 elemenet 元件,就盡量往 element 元件上靠,除非是你想自己實現自己的元件 2 對話方塊的控制變數最好寫在外面控制,我們組的專案好像一直都寫在對話方塊檔案的裡面 3 關於 v for 的使用,把 k...

EDM推廣的一些小小經驗總結

大家都知道,edm推廣很重要的一點就是edm資料的準確性,另外還有一點就是郵件的到達率。我們公司也是做傳統市場營銷的,後來才進入到網路營銷中,而在網路營銷中,我們採取的就是edm精準營銷。edm我們剛開始不久,和一家資料公司合作。2萬元買了130萬個郵件位址 其實資料很重要的,大家需要各大電商 資料...

web開發的一些小經驗

1.ajax的使用之一 ajax success function msg 返回的資料在msg中,成功的時候才呼叫 success函式。2.載入頁面的時候就呼叫js document ready function 3.樣式的使用 img removeclass imgtest2 移除樣式 img a...