微信小程式開發框架——WXSS(一)
WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。
width:用來設定元素'寬度' / height:用來設定元素'高度 '/ position:用來設定元素'定位方式' / color:用來設定元素'文字的顏色' border:用來設定元素'邊框樣式'!
如圖:
WXSS語言在CSS基礎上做了哪些補充:1.尺寸單位rpx,rpx是響應式的畫素。2.樣式匯入 3.內聯樣式 4.選擇器,如圖:
1、裝置畫素:裝置能控制的顯示的最小物理單位,物理單位是顯示器國定的一個一個的點,點是固定不變的!
2、CSS畫素:他指的是外部程式設計的一個概念,CSS樣式程式碼中所使用的邏輯畫素。
3、PPI/DPI:表示每英寸所擁有的畫素、素目,素值越高就代表顯示器,能以越高的密度去顯示影象,如圖:
4、DPR:指的是手機的某一方向上、裝置畫素和CSS畫素之比。如圖:
在開發者工具一欄上方,在切換不同的裝置時、每個裝置後面都有DPR的標示。
相關推薦
微信小程式開發框架——WXSS(一)
WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。 width:用來設定元素'寬度' / height:用來設定元素'高度 '/
微信小程式開發常用技巧(6)——列表上拉載入更多
微信小程式API提供了監聽頁面使用者下拉重新整理事件,但是沒有提供上拉監聽事件,實際開發過程中經常會用到上拉列表,載入更多的需求。那麼如何實現呢? 實現原理:利用onReachBottom監聽頁面滑動到底部,然後執行具體的函式方法,例如請求資料,然後將列表資料
微信小程式開發詳解(四)---微信小程式開發元件使用初步
1:建立一個微信小程式的工程 2:請參考如下連結裡面的內容,這是微信小程式的官方開發指南: https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222 3:可以拷貝部分例子程式到你
微信小程式開發詳解(七)---微信小程式APP生命週期
1:微信小程式APP的生命週期方法: 在微信小程式工程中的app.js中增加如圖1所示方法 圖1 編譯執行,檢視日誌如圖2,圖3所示:微信小程式啟動時,呼叫生命週期方法為:onLaunch方法(app.js)---onShow方法(app.js)---onLoad方法(首
微信小程式開發詳解(九)---微信小程式佈局基礎
1:Flex佈局 Flex佈局如圖1所示 圖1 1.1 Flex容器屬性 1.2 Flex容器內元素屬性 align如果定義會覆寫掉容器屬性中的justify-content,align-items設定的屬性 微信小程式開發工程中,新建檔案layout,然後新建各
微信小程式開發基礎篇(四)之請求、上傳、下載
針對前幾篇的基本的瞭解,然後我們首先要先學習和了解它的基本語法,我主要從API官網上學習,然後總結在這篇部落格中。供自己後期檢視。以備不時之需。因為自己也是初學者,很多的都是按照API來學習講解。 按照API的順序,我先學習網路的模組 一、請求:wx.request(OB
微信小程式開發常用技巧(7)——實現一個類似於Android toast效果動畫
很多時候,我們在小程式中使用wx.showToast(),發現樣式不是很好看,那麼我們能不能做一個跟原生APP類似的toast呢?答案是肯定的。今天就利用微信小程式的動畫wx.createAnimation()實現一個簡單的類似原生APP的toast提示。 先
微信小程式開發技巧總結(二) -- 檔案的選取、移動、上傳和下載
微信小程式開發技巧總結(二) -- 檔案的選取、移動、上傳和下載 1.不同型別檔案的選取 1.1 常用的圖片 視訊 對於大部分開發者來說,需要上傳的檔案形式主要為圖片,微信為此提供了介面。 wx.chooseImage({ count: 1, sizeType: ['original
微信小程式入門學習筆記(一)
入門級的跳轉格式: wx.redirectTo():不能返回上一層頁面 wx.navigateTo():用於頁面的跳轉 以上兩個不能跳轉於"tabBar" 因此跳轉"tabBar": wx.switchTab 感謝大佬的教程解答 了我的問題 以下附上原文連結 作者
微信小程式學習之路(一)
1、前言 微信小程式所使用的是騰訊自己開發的MINA框架,MINA框架跟主流框架有很大的相似之處,是一個MVVM框架,很慶幸本人先前有學過一點點VUE所以入門MINA框架還算比較順利,由於需要完全熟悉MINA框架我還需要學習很多,所以微信小程式學習之路篇打算一
微信小程式入門到實戰(一)
瞭解小程式 什麼是小程式? 小程式其實就是一個工具,為人提供便捷服務的;隨時可用,用完即走,減少桌面上面的app數量; B2C(人與商品) 淘寶 JD P2P(人與人)微信 QQ C2P(人與服務)微信小程式 支付寶小程式 什
微信小程式從0-1(一)flex佈局之理論
目錄 這篇文章主要介紹了Flex佈局,參考了這篇文章 搭建UI介面 對於iOS開發者來說,UI佈局可以使用座標(frame),也可以使用自動佈局。對於微信小程式來說,建議使用Flex佈局。 通過上一篇的學習,我們知道了.wxss是設
wepy-小程式開發框架學習(一)
一、安裝npm由於新版的NodeJS已經集成了npm,我們可以安裝NodeJS來實現安裝npm。首先去nodejs官網(https://nodejs.org/en/)上下載最新版的nodejs,如下圖,點選下載下載完成以後,一路next即可安裝,如需更改安裝目錄,請自行配置。
【微信小程式】媒體元件(一)audio
週四沒有課,寫個部落格慶祝一下今天記錄一下audio的基本使用,首先看下效果圖。(聲音請腦補一下~)1.介紹一下audio屬性(來自微信官方文件)屬性名型別預設值說明idStringaudio 元件的唯一識別符號srcString要播放音訊的資源地址loopBooleanfa
微信小程式填坑篇(一)
在微信小程式淺析中講到微信小程式原理以及怎麼新建一個hello world 工程,還挖了坑。現在把坑填上,捋一捋小程式的程式碼結構。看一下截圖: 全域性檔案 看一下目錄結構: 前面也說到,全域性檔案有且只有三個app.js、app.json、app
微信小程式開發框架——元件
元件的概念,如圖: 小程式給我們提供的元件,如圖 八類元件:1.檢視容器元件主要控制頁面內容、檢視容器可以理解為一個盒子在這個盒子裡面可以裝入更小的盒子填滿,這裡提供有5種: &nb
微信小程式開發框架—wepy快速入門
小程式框架wepy文件 Github地址 wepy官網:https://tencent.github.io/wepy/index.html 專案建立與使用 安裝wepy 以下安裝都通過npm安裝 安裝 wepy 命令列工具。
微信小程式開發經驗總結(遇到的坑和問題彙總)
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 前言: 前段時間公司打算做一款基於線下服務的小程式,涉及到掃碼支付,地圖,充值,會員體系等功能。由於
微信小程式詳細圖文教程-10分鐘完成微信小程式開發部署釋出(3元獲取騰訊雲伺服器帶小程式支援系統)
1、【高頻使用】 美團外賣 滴滴公交查詢 車來了 大眾點評+ 京東購物 摩拜單車 滴滴出行DiDi 攜程酒店機票火車票 2、【旅行】 驢媽媽門票預訂 飛常準查航班 海南航空微應用 南航e行 去哪兒出行 朋友家精選
微信小程式開發框架搭建
使用開發工具的正確姿勢 微信提供的開發工具的編輯功能不是一般的水,寫程式碼肯定不能用它,否則就是浪費生命.不說別的,連自動儲存都沒有,第一次寫時寫了一個多小時,後面下班直接關掉,也不彈出提示說沒儲存.然後第二天過來,寫的程式碼全沒了!!! 頓時感到巨坑無比.這