小程序开发基础（微信小程序开发基础）
本篇文章给大家谈谈小程序开发基础，以及微信小程序开发基础对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
小程序开发-基础-html+css
rem由来 ：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的 font-size 的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道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的大小：
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 = {}));
忘了说了，手机淘宝很多页面用的就是这种方法来适配终端的。
小程序开发的步骤有哪些？
1、做好产品定位
在小程序开发之前，一定要考虑清楚，做小程序的原因是什么？想要通过小程序实现什么？然后结合行业特征、企业特色、产品卖点、目标人群等，做好小程序的定位工作。
2、开发方式的选择
当前小程序的开发方式有两种，一种是自主开发，另一种是找专业的开发服务供应商进行开发。如果选择自己开发，则需要招募前端、后端、设计、测试等人员，并尽快组建开发团队。
如果找专业的开发服务供应商，则应对服务供应商进行综合考察，例如对方是否拥有核心技术支持、专业水平的口碑、是否有成功案例等。
3、确定好需求
在定位工作做完之后，接下来的工作就是确定一下需求。例如，功能、页面、内容、图片等。在确定好这些需求之后，应当把需求都整理成一份文档，方便后期与开发人员沟通、交流。
4、提交需求
在确定好开发方式之后，接下来的工作，就是将前面已经整理好的需求文档交给相关人员。在提交完需求时，应当与相关人员确认所有细节，以免影响开发进度。
5、验收
当小程序开发完成之后，一定要对其进行验收，看一看里面的功能是否都能实现，页面、内容、图片等是否都符合自己的需求。如果符合就可以给合作方进行收尾工作，如果有需要修改的地方，则与合作方再次进行沟通、修改。
学习微信小程序开发需要具备哪些基础知识？
如果你是自己开发的，可能需要掌握一些技术代码，主要是HTML5、JavaScript、和CSS。不过现在都已经有现成的小程序商城了，比如有赞，可以一键授权，就能生成属于自己的小程序，开店卖货超方便。
自己开发小程序需要学什么
WX小程序开发课程免费下载
链接:
提取码:acrq
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
小程序开发怎么做？
小程序开发入门相对于别的编程入门，是很简单的了。你入门只需要找对方法，比如找到一些适合编程小白学习的在线视频，跟着视频慢慢学，入门很快的。
互联网从业人员来分享一下干货！一个人人都可以快速制作小程序的制作工具，全程不涉及到代码编程，后台操作非常简单和强大的功能轻而易举实现！
一、工欲善其事必先利其器，先去微信公众平台注册一个小程序下来！（有认证的公众号不用再注册了哦），选择小程序，按照提示一步步进行填写
二、要利用到呱呱赞这个小程序制作工具，挑选模板进行可视化制作，用鼠标来拖拽就可以生成自己想要的小程序页面。拥有一个自己的小程序，只需点点几下。
三、设置短视频卖货，在商品编辑处上传视频
四、扫码提交上线
五、做小程序商城怎么能少了营销功能呢？
还可以设置短视频卖货，积分体系，分销体系，抽奖，秒杀，拼团，超级会员卡，手机端管理商城等等超30多种营销功能，做小程序一定要用营销功能和用户互动才可以，如果只是一个死气沉沉的毫无特色的僵尸小程序，是不会受消费者喜欢的。
制作一个功能强大的小程序商城就是这么简单，有兴趣的都可以免费去尝试一下
基于微信小程序即扫即用、容易推广、获客成本低的特点，有天然自带流量优势，小程序已经不是大企业、品牌商的专属，越来越多的小微企业和个体商户开始接入微信小程序。
在开发制作小程序过程中，避免被坑，商家还需了解一下微信小程序的开发方式及成本预算。
1、自主开发
自己懂技术，或者有充足的预算，可以组建团队，人员最低配备也需要有程序员、设计、测试，当然成本也是非常高的，周期也很长，整体下来，整个开发投入至少50万，后期还需要持续的投入。
2、找第三方定制
有的商家会选择找第三方公司做定制，也是我们俗称的“外包公司”，这对外包公司的要求很高，要技术娴熟，对行业有深入研究，现在定制市场也是乱象严重，技术水平参差不齐，也存在乱收费现象。成本大概也在3万以上。
3、购买模板
市场上也有一些专门卖模板的公司或个人开发者，成本相对较低，但功能局限性很大，在操作过程中遇到bug，无法解决，影响用户体验。
4、第三方SaaS开发工具 市场上有一些SaaS模式的小程序开发工具，提供了已经开发好的功能组件，可以拖拽设计小程序商城页面，没有任何技术基础的都可以操作。成本低、不需要开发，周期非常短，搭建完成即可上线。
相信很多人都在问，没有自己的技术团队，不懂编程代码，该如何做一个自己的小程序？
所以我在这里就分享一个 超简单的免费小程序开发工具--凡科轻站小程序 ，它能助你一臂之力~
具体的操作步骤很简单：注册账号、挑选小程序模板、开始自由设计。
所以，在这里，无需敲代码，自由拖拽模块，即使是零基础的小白，也能轻松做出精美的小程序，再也不用求人！
酷客多小程序一个后台打通BAT三大平台，实力值得信赖！
教你如何创建一个属于自己的小程序
目前微信小程序开发门槛较低,难度不及app，能够实现app上大部分功能，但对于一些功能相对复杂、交互相对繁琐的重服务还是很难实现的,要做小程序前需要先注册相应的账号，小程序的注册流程和公众号的注册流程类似。进入微信公众号页面，最下端就有注册小程序端口。
然后进入文档模块中告知运营者在小程序在开发前的准备、开发工具的使用以及上传发布小程序的步骤，而社区模块中有关于小程序的问题汇总，运营者详细阅览文档及社区的内容可迅速上手小程序。当运营者阅览完文档及社区的内容，对小程序有一定的了解，可根据电脑版本下载相应的开发者工具，工具下载完毕登录后即可创建小程序的代码。
如果想自己开发微信小程序，那须掌握基本的UI设计能力以及掌握一定的html、css、js等知识，这些知识技能可以通过在线课程进行学习，例如腾讯课堂有不少关于微信小程序的免费课程。
运营者也可以下载相应的源代码进行修改，从而快速生成小程序，目前多个网站都有提供小程序源代码供运营者选择，小程序的源代码种类繁多，如电商类、 游戏 类、社区类等等。还是建议运营者学习基本的开发知识，获取到小程序源代码后进行修改生成，毕竟优质的小程序更易具有高传播度。随着小程序权限越来越开放，或许离分享朋友圈不会太远。
来酷客多了解下，会让你满载而归的
定制小程序找虎超！
小程序开发跟着微信走就对啦。
每个区域都有开发能力不错的开发商。
成都好的还发公司不是很清楚，江苏倒有几家，比如在下就是做小程序开发的。
开发小程序需要什么技术？
小程序是一种新的开发能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
小程序作为未来移动应用开发的大趋势，具有以下优势：
1、不用安装APP，即开即用，用完就关闭，省时省流量，更不会占用手机内存;
2、只需要用户扫码即可，不管是流量环境还是wifi环境，都不是问题，最大程度减少了用户的耐心损耗;
3、程序简化，只需开发只涉及网页前端和服务器后端，不需要像APP一样，考虑两个手机系统，节省了大量的时间和人力;
4、对于用户来说，微信小程序UI和操作流程会更统一，这也会降低用户的使用难度;
5、可跨平台，微信应用号本身是网页，可以在群里被转发，可以搭建到公众号商，传播起来非常方便;
6、微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户。
开发一个小程序说难也难，说简单也很简单。具体取决于采用什么模式进行开发。
总体而言，有三大模式：
第一种模式，基于源码方式进行开发。
第二种模式，主要套用模板，辅以简单编辑配置。
第三种模式，基于模板，借助工具做修改、制作，完成开发。
对于大多数人来说，选择的是第三种模式。
那么，开发小程序需要什么技术？
1.前端基础，如JS、HTML、css
2.一门后台语言，如PHP、JAVA，后端什么语言都可以，自己定。
3.学习微信接口文档如果用到了微信本身相关功能，如支付、分享等功能，加个微信jssdk就可以了。
4.还需要美工，保证制作的小程序有美感。
好啦！今天就说到这里！
小程序开发基础的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序开发基础、小程序开发基础的信息别忘了在本站进行查找喔。
