本篇文章給大家談談小程序開發(fā)基礎，以及小程序開發(fā)基礎知識對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

小程序開發(fā)-基礎-html+css

rem由來 ：font size of the root element，那么rem是個單位，單位大小由它第一代老祖宗的 font-size 的大小決定。現(xiàn)在前端碼農們?yōu)榱四茉诟鱾€屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎么能在不同分辨率下呈現(xiàn)的頁面都很NB。

事故造成原因：

1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。

2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。

3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。

好了，那么現(xiàn)在來解決這些問題。

在解決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：

1. 物理像素(physical pixel)

我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。

2.邏輯像素

是計算機坐標系統(tǒng)中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。

3.設備的像素比(device pixel ratio)簡稱DPR

它的數值體現(xiàn)了物理像素和邏輯像素之間的關系，用公式可以計算出該設備的DPR的大?。?/p>

DPR= 物理像素 / 邏輯像素

那么了解了上面這些概念，就可以知道，為什么css在pc上寫著font-size=12px;但是換到手機上卻變小了？因為DPR啊啊啊，大哥~。

沒錯，我們在電腦屏幕上的DPR是1，但是手機卻不同，可能是它可能是2，也可能是3。獲取設備DPR的方法還是有的：

1.在JavaScript中，通過window.devicePixelRatio來獲取

2.在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和?-webkit-max-device-pixel-ratio進行媒體查詢，對不同DPR的設備，做一些樣式適配(這里只針對webkit內核的瀏覽器和webview)。

本人也在網上看了不少動態(tài)設置rem的文章，下面把幾個常用的列舉出來：

一，用媒體查詢來設置html的font-size：

@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}

二、利用js來動態(tài)設置

!(function(doc, win){vardocEle = doc.documentElement,? ? ? ? evt ="onorientationchange"inwindow?"orientationchange":"resize",? ? ? ? fn =function(){varwidth = docEle.clientWidth;? ? ? ? ? ? width (docEle.style.fontSize =20* (width /320) +"px");? ? ? ? };? ? ? ? win.addEventListener(evt, fn,false);? ? doc.addEventListener("DOMContentLoaded", fn,false); }(document,window));

我要說的是最后一種，也是我認為目前比較好的實現(xiàn)方法：

利用js計算當前設備的DPR，動態(tài)設置在html標簽上，并動態(tài)設置html的font-size，利用css的選擇器根據DPR來設置不同DPR下的字體大?。ㄟ@個方法很不錯哦~）

!function(win, lib){vartimer,? ? ? ? doc? ? = win.document,? ? ? ? docElem = doc.documentElement,? ? ? ? vpMeta? = doc.querySelector('meta[name="viewport"]'),? ? ? ? flexMeta = doc.querySelector('meta[name="flexible"]'),? ? ? ? dpr? =0,? ? ? ? scale =0,? ? ? ? flexible = lib.flexible || (lib.flexible = {});// 設置了 viewport metaif(vpMeta) {console.warn("將根據已有的meta標簽來設置縮放比例");varinitial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if(initial) {? ? ? ? ? ? scale =parseFloat(initial[1]);// 已設置的 initialScaledpr =parseInt(1/ scale);// 設備像素比 devicePixelRatio}? ? }// 設置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMeta.getAttribute("content");if(flexMetaContent) {varinitial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),? ? ? ? ? ? ? ? maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);if(initial) {? ? ? ? ? ? ? ? dpr =parseFloat(initial[1]);? ? ? ? ? ? ? ? scale =parseFloat((1/ dpr).toFixed(2));? ? ? ? ? ? }if(maximum) {? ? ? ? ? ? ? ? dpr =parseFloat(maximum[1]);? ? ? ? ? ? ? ? scale =parseFloat((1/ dpr).toFixed(2));? ? ? ? ? ? }? ? ? ? }? ? }// viewport 或 flexible// meta 均未設置if(!dpr !scale) {// QST// 這里的 第一句有什么用 ?// 和 Android 有毛關系 ?varu = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),? ? ? ? ? ? _dpr = win.devicePixelRatio;// 所以這里似乎是將所有 Android 設備都設置為 1 了dpr = u ? ( (_dpr =3 (!dpr || dpr =3))? ? ? ? ? ? ? ? ? ? ? ? ?3: (_dpr =2 (!dpr || dpr =2))? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2:1)? ? ? ? ? ? ? ? :1;? ? ? ? scale =1/ dpr;? ? }? ? docElem.setAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) {? ? ? ? vpMeta = doc.createElement("meta");? ? ? ? ? ? ? ? vpMeta.setAttribute("name","viewport");? ? ? ? vpMeta.setAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElem.firstElementChild) {? ? ? ? ? ? docElem.firstElementChild.appendChild(vpMeta)? ? ? ? }else{vardiv = doc.createElement("div");? ? ? ? ? ? div.appendChild(vpMeta);? ? ? ? ? ? doc.write(div.innerHTML);? ? ? ? }? ? }functionsetFontSize(){varwinWidth = docElem.getBoundingClientRect().width;if(winWidth / dpr 540) {? ? ? ? ? ? (winWidth =540* dpr);? ? ? ? }// 根節(jié)點 fontSize 根據寬度決定varbaseSize = winWidth /10;? ? ? ? docElem.style.fontSize = baseSize +"px";? ? ? ? flexible.rem = win.rem = baseSize;? ? }// 調整窗口時重置win.addEventListener("resize",function(){? ? ? ? clearTimeout(timer);? ? ? ? timer = setTimeout(setFontSize,300);? ? },false);// 這一段是我自己加的// orientationchange 時也需要重算下吧win.addEventListener("orientationchange",function(){? ? ? ? clearTimeout(timer);? ? ? ? timer = setTimeout(setFontSize,300);? ? },false);// pageshow// keyword: 倒退 緩存相關win.addEventListener("pageshow",function(e){if(e.persisted) {? ? ? ? ? ? clearTimeout(timer);? ? ? ? ? ? timer = setTimeout(setFontSize,300);? ? ? ? }? ? },false);// 設置基準字體if("complete"=== doc.readyState) {? ? ? ? doc.body.style.fontSize =12* dpr +"px";? ? }else{? ? ? ? doc.addEventListener("DOMContentLoaded",function(){? ? ? ? ? ? doc.body.style.fontSize =12* dpr +"px";? ? ? ? },false);? ? }? ? ? setFontSize();? ? flexible.dpr = win.dpr = dpr;? ? flexible.refreshRem = setFontSize;? ? flexible.rem2px =function(d){varc =parseFloat(d) *this.rem;if("string"==typeofd d.match(/rem$/)) {? ? ? ? ? ? c +="px";? ? ? ? }returnc;? ? };? ? flexible.px2rem =function(d){varc =parseFloat(d) /this.rem;if("string"==typeofd d.match(/px$/)) {? ? ? ? ? ? c +="rem";? ? ? ? }returnc;? ? }}(window,window.lib || (window.lib = {}));

忘了說了，手機淘寶很多頁面用的就是這種方法來適配終端的。

自己開發(fā)小程序需要學什么

WX小程序開發(fā)課程免費下載

鏈接:

提取碼:acrq

小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現(xiàn)了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

小程序開發(fā)的步驟有哪些？

1、做好產品定位

在小程序開發(fā)之前，一定要考慮清楚，做小程序的原因是什么？想要通過小程序實現(xiàn)什么？然后結合行業(yè)特征、企業(yè)特色、產品賣點、目標人群等，做好小程序的定位工作。

2、開發(fā)方式的選擇

當前小程序的開發(fā)方式有兩種，一種是自主開發(fā)，另一種是找專業(yè)的開發(fā)服務供應商進行開發(fā)。如果選擇自己開發(fā)，則需要招募前端、后端、設計、測試等人員，并盡快組建開發(fā)團隊。

如果找專業(yè)的開發(fā)服務供應商，則應對服務供應商進行綜合考察，例如對方是否擁有核心技術支持、專業(yè)水平的口碑、是否有成功案例等。

3、確定好需求

在定位工作做完之后，接下來的工作就是確定一下需求。例如，功能、頁面、內容、圖片等。在確定好這些需求之后，應當把需求都整理成一份文檔，方便后期與開發(fā)人員溝通、交流。

4、提交需求

在確定好開發(fā)方式之后，接下來的工作，就是將前面已經整理好的需求文檔交給相關人員。在提交完需求時，應當與相關人員確認所有細節(jié)，以免影響開發(fā)進度。

5、驗收

當小程序開發(fā)完成之后，一定要對其進行驗收，看一看里面的功能是否都能實現(xiàn)，頁面、內容、圖片等是否都符合自己的需求。如果符合就可以給合作方進行收尾工作，如果有需要修改的地方，則與合作方再次進行溝通、修改。

如何開發(fā)自己的小程序？

微信版本升級后，打開微信，點擊底部的“發(fā)現(xiàn)”這個菜單項，就會發(fā)現(xiàn)升級后的“發(fā)現(xiàn)”菜單里，增加了“小程序”這樣一個功能。

2.點擊打開小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周邊的小程序。

下面的小程序列表可以看到的是我們之前打開過的一些小程序，如果有自己覺得很好用的小程序就可以點擊左上角，添加到我的小程序里面。

3.微信小程序還有具有搜索功能，打開搜索頁面可以輸入想要找的小程序。

開發(fā)微信小程序需要哪些技術

開發(fā)微信小程序需要用到以下技術：

1、wxml，小程序常用語言為wxml，wxml是微信但是你熟悉wxml之后會發(fā)現(xiàn)其實它的編程理念和HTML的網頁編程比較類似。

2、wxss，wxss更趨向于CSS,wxss，其實主要的實現(xiàn)思想理念也和網頁的開發(fā)技術差別不大，主要是一些標簽的一些簡單替換，大部分和原先的css、基本不誤，都是通過同頁面調用的方式實現(xiàn)的。

3、js，開發(fā)小程序還必須掌握js技術，如果html+css+js的基礎打的好，再來學習一下微信小程序js，之后在前端開發(fā)上就沒有什么問題了。

4、服務器語言，如果不是專業(yè)的后端開發(fā)者，可能后端有一定的難度其學習曲線較陡。但是，仍然建議開發(fā)者學習一下后端語言，至少需要了解大致的原因框架，能夠看懂其代碼邏輯，這樣不僅可以很好地實現(xiàn)前后端的配合，也能夠在小程序出現(xiàn)bug的時候使用。常見的有PHP、Java、Python、ASP等技術。

5、數據庫語言，如果公司數據量不大，架構不復雜的話數據庫語言相對來說是比較簡單的，一般學會一些常用的命令以及常出現(xiàn)的問題就能夠應付使用。常用的數據庫有免費的MySQL、msSQL、MongoDB、Oracle等數據庫。

小程序開發(fā)怎么做？

小程序開發(fā)入門相對于別的編程入門，是很簡單的了。你入門只需要找對方法，比如找到一些適合編程小白學習的在線視頻，跟著視頻慢慢學，入門很快的。

互聯(lián)網從業(yè)人員來分享一下干貨！一個人人都可以快速制作小程序的制作工具，全程不涉及到代碼編程，后臺操作非常簡單和強大的功能輕而易舉實現(xiàn)！

一、工欲善其事必先利其器，先去微信公眾平臺注冊一個小程序下來?。ㄓ姓J證的公眾號不用再注冊了哦），選擇小程序，按照提示一步步進行填寫

二、要利用到呱呱贊這個小程序制作工具，挑選模板進行可視化制作，用鼠標來拖拽就可以生成自己想要的小程序頁面。擁有一個自己的小程序，只需點點幾下。

三、設置短視頻賣貨，在商品編輯處上傳視頻

四、掃碼提交上線

五、做小程序商城怎么能少了營銷功能呢？

還可以設置短視頻賣貨，積分體系，分銷體系，抽獎，秒殺，拼團，超級會員卡，手機端管理商城等等超30多種營銷功能，做小程序一定要用營銷功能和用戶互動才可以，如果只是一個死氣沉沉的毫無特色的僵尸小程序，是不會受消費者喜歡的。

制作一個功能強大的小程序商城就是這么簡單，有興趣的都可以免費去嘗試一下

基于微信小程序即掃即用、容易推廣、獲客成本低的特點，有天然自帶流量優(yōu)勢，小程序已經不是大企業(yè)、品牌商的專屬，越來越多的小微企業(yè)和個體商戶開始接入微信小程序。

在開發(fā)制作小程序過程中，避免被坑，商家還需了解一下微信小程序的開發(fā)方式及成本預算。

1、自主開發(fā)

自己懂技術，或者有充足的預算，可以組建團隊，人員最低配備也需要有程序員、設計、測試，當然成本也是非常高的，周期也很長，整體下來，整個開發(fā)投入至少50萬，后期還需要持續(xù)的投入。

2、找第三方定制

有的商家會選擇找第三方公司做定制，也是我們俗稱的“外包公司”，這對外包公司的要求很高，要技術嫻熟，對行業(yè)有深入研究，現(xiàn)在定制市場也是亂象嚴重，技術水平參差不齊，也存在亂收費現(xiàn)象。成本大概也在3萬以上。

3、購買模板

市場上也有一些專門賣模板的公司或個人開發(fā)者，成本相對較低，但功能局限性很大，在操作過程中遇到bug，無法解決，影響用戶體驗。

4、第三方SaaS開發(fā)工具 市場上有一些SaaS模式的小程序開發(fā)工具，提供了已經開發(fā)好的功能組件，可以拖拽設計小程序商城頁面，沒有任何技術基礎的都可以操作。成本低、不需要開發(fā)，周期非常短，搭建完成即可上線。

相信很多人都在問，沒有自己的技術團隊，不懂編程代碼，該如何做一個自己的小程序？

所以我在這里就分享一個 超簡單的免費小程序開發(fā)工具--凡科輕站小程序 ，它能助你一臂之力~

具體的操作步驟很簡單：注冊賬號、挑選小程序模板、開始自由設計。

所以，在這里，無需敲代碼，自由拖拽模塊，即使是零基礎的小白，也能輕松做出精美的小程序，再也不用求人！

酷客多小程序一個后臺打通BAT三大平臺，實力值得信賴！

教你如何創(chuàng)建一個屬于自己的小程序

目前微信小程序開發(fā)門檻較低,難度不及app，能夠實現(xiàn)app上大部分功能，但對于一些功能相對復雜、交互相對繁瑣的重服務還是很難實現(xiàn)的,要做小程序前需要先注冊相應的賬號，小程序的注冊流程和公眾號的注冊流程類似。進入微信公眾號頁面，最下端就有注冊小程序端口。

然后進入文檔模塊中告知運營者在小程序在開發(fā)前的準備、開發(fā)工具的使用以及上傳發(fā)布小程序的步驟，而社區(qū)模塊中有關于小程序的問題匯總，運營者詳細閱覽文檔及社區(qū)的內容可迅速上手小程序。當運營者閱覽完文檔及社區(qū)的內容，對小程序有一定的了解，可根據電腦版本下載相應的開發(fā)者工具，工具下載完畢登錄后即可創(chuàng)建小程序的代碼。

如果想自己開發(fā)微信小程序，那須掌握基本的UI設計能力以及掌握一定的html、css、js等知識，這些知識技能可以通過在線課程進行學習，例如騰訊課堂有不少關于微信小程序的免費課程。

運營者也可以下載相應的源代碼進行修改，從而快速生成小程序，目前多個網站都有提供小程序源代碼供運營者選擇，小程序的源代碼種類繁多，如電商類、 游戲 類、社區(qū)類等等。還是建議運營者學習基本的開發(fā)知識，獲取到小程序源代碼后進行修改生成，畢竟優(yōu)質的小程序更易具有高傳播度。隨著小程序權限越來越開放，或許離分享朋友圈不會太遠。

來酷客多了解下，會讓你滿載而歸的

定制小程序找虎超！

小程序開發(fā)跟著微信走就對啦。

每個區(qū)域都有開發(fā)能力不錯的開發(fā)商。

成都好的還發(fā)公司不是很清楚，江蘇倒有幾家，比如在下就是做小程序開發(fā)的。

小程序開發(fā)基礎的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于小程序開發(fā)基礎知識、小程序開發(fā)基礎的信息別忘了在本站進行查找喔。