小程序開發基礎（小程序開發入門）
今天給各位分享小程序開發基礎的知識，其中也會對小程序開發入門進行解釋，如果能碰巧解決你現在面臨的問題，別忘了關注本站，現在開始吧！
本文目錄一覽：
小程序開發的步驟有哪些？
1、做好產品定位
在小程序開發之前，一定要考慮清楚，做小程序的原因是什么？想要通過小程序實現什么？然后結合行業特征、企業特色、產品賣點、目標人群等，做好小程序的定位工作。
2、開發方式的選擇
當前小程序的開發方式有兩種，一種是自主開發，另一種是找專業的開發服務供應商進行開發。如果選擇自己開發，則需要招募前端、后端、設計、測試等人員，并盡快組建開發團隊。
如果找專業的開發服務供應商，則應對服務供應商進行綜合考察，例如對方是否擁有核心技術支持、專業水平的口碑、是否有成功案例等。
3、確定好需求
在定位工作做完之后，接下來的工作就是確定一下需求。例如，功能、頁面、內容、圖片等。在確定好這些需求之后，應當把需求都整理成一份文檔，方便后期與開發人員溝通、交流。
4、提交需求
在確定好開發方式之后，接下來的工作，就是將前面已經整理好的需求文檔交給相關人員。在提交完需求時，應當與相關人員確認所有細節，以免影響開發進度。
5、驗收
當小程序開發完成之后，一定要對其進行驗收，看一看里面的功能是否都能實現，頁面、內容、圖片等是否都符合自己的需求。如果符合就可以給合作方進行收尾工作，如果有需要修改的地方，則與合作方再次進行溝通、修改。
自己開發小程序需要學什么
WX小程序開發課程免費下載
鏈接:
提取碼:acrq
小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。
小程序開發-基礎-html+css
rem由來 ：font size of the root element，那么rem是個單位，單位大小由它第一代老祖宗的 font-size 的大小決定?，F在前端碼農們為了能在各個屏幕上看到一個健康的網頁在默默的犧牲著自己的健康，因為不僅要知道rem是個單位，更重要的是要知道怎么能在不同分辨率下呈現的頁面都很NB。
事故造成原因：
1.px單位在PC上很流行，在手機屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調的正常了，換個菊花牌手機，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。
好了，那么現在來解決這些問題。
在解決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：
1. 物理像素(physical pixel)
我們看到的每個屏幕都是由一顆顆我們肉眼難以看到的小顆粒（物理像素）組成的。
2.邏輯像素
是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)。
3.設備的像素比(device pixel ratio)簡稱DPR
它的數值體現了物理像素和邏輯像素之間的關系，用公式可以計算出該設備的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)。
本人也在網上看了不少動態設置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來動態設置
!(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));
我要說的是最后一種，也是我認為目前比較好的實現方法：
利用js計算當前設備的DPR，動態設置在html標簽上，并動態設置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);? ? ? ? }// 根節點 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 = {}));
忘了說了，手機淘寶很多頁面用的就是這種方法來適配終端的。
關于小程序開發基礎和小程序開發入門的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
