subPackages 分包加載
因為小程式主包大小不超過2M 限制,所以使用分包是個不錯的選擇,總分包大小不超過8M,可以添加多個分包,分包加載可以優(yōu)化小程式首次啟動的下載時間,當進入分包頁面再進行下載,這種按需加載可以把某些資料量大的抽離出來放入分包(如圖表)
rpx 單位、
在做行動端最常用適配的方法就是使用rem 或vw 作為單位來進行適配,所以微信小程式提供了rpx單位來進行適合
授權彈跳視窗
wx.getUserInfo 介面調(diào)整,先前可以直接主動呼叫顯示授權彈窗?,現(xiàn)在需要使用 點擊來引導使用者去授權,小程式wx.getUserInfo 介面正式版已調(diào)整,體驗版和開發(fā)版還可以使用原有方式。
原生元件z-index
原生元件的層級是最高的,所以頁面中的其他元件無論設定z-index 為多少,都無法蓋在原生元件上,可以透過cover-view 來解決,但某些特定環(huán)境如swiper 或彈窗中需要顯隱原生元件,需要配合hidden 來使用
偽元素
小程式的偽元素屬性無法在微信開發(fā)者工具css 屬性中看到,所以對於某些元件樣式無法覆寫時(如button 的邊框或某些線條設定),是因為透過偽元素::after 設定的,所以必須使用偽元素來覆蓋
頁面棧
一個應用程式同時只能打開5個頁面棧,當已經(jīng)打開了5個頁面之後(現(xiàn)在限制是10層),後續(xù)可能出現(xiàn)無法正常開啟新頁面。 wx.navigateTo 跳轉(zhuǎn)會保留目前頁面,wx.redirectTo 則不會,所以請避免多層級的互動方式來合理使用跳轉(zhuǎn)方式
元件化
emplate 模組與component 元件,是小程式中元件化的方式,二者的差別是,template 模組主要是展示,方法需要在使用template 的頁面中定義。而 component 元件,則擁有自己的js 文件,整個 component 元件類似一個 page 頁面。簡單來說,只是展示用,建議使用template,元件中涉及較多的邏輯,建議使用component
#調(diào)式
##一、開發(fā)者工具source 斷點調(diào)式、console.log 列印資料與AppData 檢視資料二、小程式註意目前調(diào)式基礎庫版來調(diào)式一些相容性以及bug 問題三、小程式先在開發(fā)版或體驗版右上角開啟調(diào)試顯示vConsole,再切到正式版就能看到vConsole 模式#資料傳遞
一、使用資料緩存,wx.setStorage和wx.getStorage,儲存資料只能是字串格式,所以一般設定時需要使用JSON.stringfy 來把物件轉(zhuǎn)字串,取得時使用JSON.parse 來還原成物件導覽列膠囊對齊適配
導覽列一般使用自訂,比較靈活可控,首先需要app.json 中設定navigationStyle :custom 自訂,然後透過小程式wx.getMenuButtonBoundingClientRect() 可以取得到右上角膠囊選單位置訊息,不過這個介面不穩(wěn)定,部分機型會出現(xiàn)取得失敗的bug,所以使用wx.getSystemInfo 來取得該裝置的狀態(tài)列高度(即手機時間和電量那一欄高度),標題欄高度(即包括導航返回鍵、標題和膠囊的高度)預設為安卓為48,ios 為44(小程式預設膠囊在安卓中為48px 的標題列居中,因為安卓類別比較多,所以會有點差別,ios 為44px 的標題列居中),導覽列總高度為狀態(tài)列高度標題列高度,padding-top 高度為狀態(tài)列高度,標題列中元素垂直對齊來達到適配並與膠囊對齊,設定內(nèi)容高度時可以利用calc(100vh - ?導航欄總高度),把樣式放在全域app.wxss 中unionid 標識
unionid 是小程式用戶的跨程式標識,擁有unionid 首先需要綁定微信開放平臺(微信開放平臺-管理平臺-小程式-綁定小程式),因為unionid 就是微信開放平臺分發(fā)下來的,不將小程式綁定微信開放平臺,就沒有unionid,當不同小程式的unionid 是不同的,需要把小程式掛載到同一個主體中,同一用戶,對同一個微信開放平臺下的不同應用,unionid是相同的
後臺返回unionid 給前端:首先wx.login 獲取用戶登錄憑證code,然後wx.getSetting 查看是否已授權,wx.getUserInfo 獲取用戶信息,通過用戶信息的加密字段給後臺向微信伺服器換取unionid 返回,由於獲取請求返回資料可能會在Page.onLoad 之後才返回, 所以一般加上callback (獲取unionid 一般放在app.js 的onLaunch 中,所以需要callback 來處理它和頁面onLoad 的數(shù)據(jù)取得)
介面請求
建議把所有請求抽離到同一個api.js 中,可以方便後期的修改和排查問題,小程式請求是透過微信後臺來請求我們的後臺位址來進行後端映射、你請求的介面實際到微信的後端做了一道映射,微信後端拿到你的wx.request 呼叫的url、用後端請求後端,所以不會有跨域問題
input 鍵盤
考慮不同場景使用不同的type,如文字鍵盤,數(shù)字鍵盤來提升使用者體驗
wux-weapp
小程式元件比較推薦wux-weapp,元件豐富且拓展靈活
推薦教學:《微信小程式》
以上是微信小程式知識點總結的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章!

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

閒魚官方微信小程式悄悄上線,在小程式中可以發(fā)布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等,有用好奇閒魚微信小程式叫什麼,現(xiàn)在快來看一下。閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項功能;3、想要使用的話必要要開通微信支付才可以購買;

實現(xiàn)微信小程式中的圖片濾鏡效果隨著社群媒體應用程式的流行,人們越來越喜歡在照片中應用濾鏡效果,以增強照片的藝術效果和吸引力。在微信小程式中也可以實現(xiàn)圖片濾鏡效果,為使用者提供更多有趣和創(chuàng)意的照片編輯功能。本文將介紹如何在微信小程式中實現(xiàn)圖片濾鏡效果,並提供具體的程式碼範例。首先,我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面

實現(xiàn)微信小程式中的下拉式選單效果,需要具體程式碼範例隨著行動互聯(lián)網(wǎng)的普及,微信小程式成為了網(wǎng)路開發(fā)的重要一環(huán),越來越多的人開始關注和使用微信小程式。微信小程式的開發(fā)相比傳統(tǒng)的APP開發(fā)更加簡單快捷,但也需要掌握一定的開發(fā)技巧。在微信小程式的開發(fā)中,下拉式選單是一個常見的UI元件,實現(xiàn)了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現(xiàn)下拉式選單效果,並提供具

閒魚官方微信小程式已經(jīng)悄悄上線,它為用戶提供了一個便捷的平臺,讓你可以輕鬆地發(fā)布和交易閒置物品。在小程式中,你可以與買家或賣家進行私訊交流,查看個人資料和訂單,以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢,這篇教學攻略將為您詳細介紹,想要了解的用戶們快來跟著本文繼續(xù)閱讀吧!閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項功能;3、

微信小程式實現(xiàn)圖片上傳功能隨著行動網(wǎng)路的發(fā)展,微信小程式已經(jīng)成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景,還支援開發(fā)者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能,並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前,我們需要先下載並安裝微信開發(fā)者工具,並註冊成為微信開發(fā)者。同時,也需要了解微信

使用微信小程式實現(xiàn)輪播圖切換效果微信小程式是一種輕量級的應用程序,具有簡單、高效的開發(fā)和使用特點。在微信小程式中,實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現(xiàn)輪播圖切換效果,並給出具體的程式碼範例。首先,在微信小程式的頁面檔案中,新增一個輪播圖元件。例如,可以使用<swiper>標籤來實現(xiàn)輪播圖的切換效果。在該組件中,可以透過b

實現(xiàn)微信小程式中的圖片旋轉(zhuǎn)效果,需要具體程式碼範例微信小程式是一種輕量級的應用程序,為用戶提供了豐富的功能和良好的用戶體驗。在小程式中,開發(fā)者可以利用各種元件和API來實現(xiàn)各種效果。其中,圖片旋轉(zhuǎn)效果是一種常見的動畫效果,可以為小程式增添趣味性和視覺效果。在微信小程式中實作圖片旋轉(zhuǎn)效果,需要使用小程式提供的動畫API。以下是一個具體的程式碼範例,展示如何在小程

實作微信小程式中的滑動刪除功能,需要具體程式碼範例隨著微信小程式的流行,開發(fā)者在開發(fā)過程中經(jīng)常會遇到一些常見功能的實作問題。其中,滑動刪除功能是常見、常用的功能需求。本文將為大家詳細介紹如何在微信小程式中實現(xiàn)滑動刪除功能,並給出具體的程式碼範例。一、需求分析在微信小程式中,滑動刪除功能的實作涉及以下要點:列表展示:要顯示可滑動刪除的列表,每個列表項目需要包
