小程序开发基础（小程序的开发）

本篇文章给大家谈谈小程序开发基础，以及小程序的开发对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

• 1、小程序开发需要哪些技术
• 2、小程序开发-基础-html+css
• 3、微信小程序开发需要学什么知识
• 4、小程序开发需要什么技术
• 5、制作微信小程序需要掌握什么知识
• 6、小程序开发的步骤有哪些？

1.前端基础，如JS、HTML、css。【点击查看小程序开发底价】

2.一门后台语言，如PHP、JAVA，后端什么语言都可以，自己定。

3.学习微信接口文档如果用到了微信本身相关功能，如支付、分享等功能，加个微信jssdk就可以了。

4.还需要美工，保证制作的小程序有美感。

想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。

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.零基础学习微信小程序开发,之前需要学习哪些知识,谢谢

非计算机基础不建议学习，因为等你学会了，两年时间也过去了。

1、微信官方为小程序提供了大量的接口api，开发小程序需要有基本的Javascript,HTML,CSS的基础。

2、小程序开发，常见使用“MINA”框架

Apache Mina Server 是一个网络通信应用框架，也就是说，它主要是对基于TCP/IP、UDP/IP协议栈的通信框架（当然，也可以提供JAVA 对象的序列化服务、虚拟机管道通信服务等），Mina 可以帮助我们快速开发高性能、高扩展性的网络通信应用，Mina 提供了事件驱动、异步（Mina 的异步IO 默认使用的是JAVA NIO 作为底层支持）操作的编程模型。

这个框架为微信小程序的运行提供了丰富的组件和API。要学会和掌握小程序的框架结构、数据绑定机制、模板、数据缓存、常用组件和API等相关知识。

2.微信小程序开发,需要学习哪些技术

1、熟练掌握HTML语言、CSS、JavaScript HTML就是超文本标记语言的简写，HTML是网页开发前端三剑客之一，主要负责网页的骨架，就如同动物的骨架一样，HTML语言就是支撑网页布局的骨架。

CSS主要负责网页样式，网页内容如何分布，板块背景，颜色等外观问题可以有CSS控制。JavaScript是一种动态的脚本语言，在服务器端迸发出非凡的活力，成为当前非常活跃的语言之一。

因此想要做小程序开发，就必须要掌握HTML语言、CSS、JavaScript。 2、服务器语言 如果不是专业的后端开发者，可能后端有一定的难度其学习曲线较陡。

但是，仍然建议开发者学习一下后端语言，至少需要了解大致的原因框架，能够看懂其代码逻辑，这样不仅可以很好实现前后端的配合，也能够在小程序出现bug的时候扯皮用。服务器的语言有很多比较常用的是PHP、Java、Python、ASP等技术，建议开发者根据公司内部技术的使用情况挑选进行学习。

3、数据库语言 如果公司数据量不大，架构不复杂的话数据库语言相对来说是比较简单的，一般学会一些常用的命令以及常出现的问题就能够应付使用。常用的数据库有免费的MySQL、msSQL、MongoDB、Oracle等数据库。

小程序开发需要的技术：

1，前端基础：Html、JS、css。

2，后端语言：php、java任何一门语言都可以。

3，学习微信接口文档，后期开发过程中如果用到了支付、分享等功能的话，只需要加个jssdk就可以了。

4，美工、ui设计，如果想要小程序整洁有美感的话，就需要美工制作界面。

5，服务器：一个功能齐全的小程序必须拥有自己的服务器，因为小程序都是在服务器上支持运行的，还需要购买域名、申请ssl证书配置服务器，整个流程下来很复杂麻烦。【点击了解更多加盟项目】

1.想学微信小程序,前提要具备哪些知识

1. 前期阶段：建议从HTML-》 CSS -》 JAVASCRIPT-》JQUERY 开始，0基础均可学习。

2. 中期阶段：建议了解一些知识，精通最好。比如一些基础框架和知识 ：bootstrap jssdk ajax json 协议等，在这里就可以开始学习小程序了，里面语法相似angular ，差别也多。

3. 后期进阶：react webpack less websoket 各种插件 ，面向对象， 协议 angular/vue/node，建议精通一种或者2种 ， 前端和服务端交互过程，等等 。其实这里中期就可以和小程序一起学习了，如果你能力很强，建议一起学习，最后面可以学习 服务端技术，底层 ，架构等。

4. 欢迎修正，探讨技术。

2.做一个微信小程序需要什么

1、为小程序开发的产品定位有的用户开发小程序的目的只是为了服务于广大消费者，但是有的商家却是为了从中获取收益，不同的目的自然产品的定位也不同，大家需要根据自己的产品和行业找准自己产品的定位，找准了定位开发起来也能事半功倍。

2、做好线下推广小程序需要线下的推广，只有通过线下的推广才能够让大家知晓这个小程序的存在，大家可以为小程序定位，基于地理位置让附近的用户看到，通过“附近小程序”的功能让大家能够搜索到，也可以使用比较传统的方法美也就是发传单和举办一些活动的方式，让大家可以通过扫描二维码进入，并且成为你的小程序粉丝。3、寻找第三方开发公司合作虽然小程序开发的费用没有APP费用高，它的构建系统也没有APP复杂，但是一般情况下公司和商户都还不具备小程序开发的能力，所以大家就需要寻找专业的第三方开发公司合作，通过他们专业的技能来为自己打造一个专属的小程序，并且找第三方开发公司合作比自己组建开发团队的费用更低。

4、开发过程中注重用户体验大家可能在使用一款小程序的时候会发现，现在小程序暂时还没有信息发送的功能，但是却已经有了客服等交互功能，如果大家想要打造一个更好的小程序，在开发的过程中就一定要注重用户的体验度，让用户在使用小程序的过程中真正感受到小程序区别于原生App的方便快捷。5、从公众号积累的影响力入手大多数企业在开发小程序之前的都有了自己的公众号，我们可以利用公众号进行运营来推广小程序，再用小程序获取用户进入到订阅号展开二次转化，这样一来为企业的公众号积累了粉丝，二来也为大家所开发的小程序实现了变现的目的，同时做好小程序的服务还能够确保源源不断的流量，获得更多的用户——————————-。

3.学习微信小程序开发需要具备哪些基础知识

前期阶段：建议从HTML-》 CSS -》 JAVASCRIPT-》JQUERY 开始，0基础均可学习。

中期阶段：建议了解一些知识，精通最好。比如一些基础框架和知识 ：bootstrap jssdk ajax json 协议等，在这里就可以开始学习小程序了，里面语法相似angular ，差别也多。

后期进阶：react webpack less websoket 各种插件 ，面向对象， 协议 angular/vue/node，建议精通一种或者2种 ， 前端和服务端交互过程，等等 。其实这里中期就可以和小程序一起学习了，如果你能力很强，建议一起学习，最后面可以学习 服务端技术，底层 ，架构等。

欢迎修正，探讨技术。

4.弄微信小程序需要准备什么工作

小程序的体验和使用效果毋庸置疑的，我说说开发小程序步骤：

注册小程序

需要一个营业执照，个体户执照也可以。

如果有公众号，可以直接复用公众号资料，申请小程序。这个方便快捷。

如果没有公众号点着里：微信公众平台.

等待小程序注册审核，一天就可以通过。

完善小程序基本资料，例如logo 名称 行业等。

开发小程序

早期开发小程序比较麻烦，需要上传代码，各种各样的配置，太麻烦了。现在用授权第三方服务商方式，容易很多。第三方小程序服务商：做小程序全面，也同时提供微商城，和微商城数据都是打通的，订单 会员 等通用的，制作价格3000~8000不等，比较划算。

运行小程序

可以把小程序放到附近小程序里面，或是发送小程序码，以及分享小程序给好友和群。小程序只是一种载体，具体怎么运营还需要很多心思的，请看运营秘籍，会启发你很多思路。

5.开发小程序需要掌握哪些知识点

开发小程序需要掌握以下几方面：

1、小程序的功能是否齐全

小程序是一种工具，如果这个工具少一些功能，那这个工具就是废的，用不了。小程序一般分为餐饮小程序、电商小程序、企业展示小程序、游戏 小程序，每个种类的小程序都有一些特定的功能，比如餐饮小程序需要点餐、排好、预约、支付、外卖等功能，你开发的小程序里是否这些功能都 有。所以在你做小程序之前，你需要想清楚自己的小程序是用来做什么的？需要哪些功能？

2、小程序的用户体验如何

包括页面设计十分美观、响应速度十分快、功能既简洁又安全，还有一些小程序，加载半天图片出不来，这样的用户体 验肯定好不了。

3、性价比是否高

营销圈最大的问题在于，产品和价格不标准化，同样的小程序，有的公司报价￥1000，有的报价￥10000，企业根本弄不清楚1000元和10000元的小 程序差异在哪里。选择贵的觉得不划算，选择便宜的又怕小程序不好用，犹豫不决。

小程序具体开发步骤就是做好需求定位，然后选择小程序开发方式以及小程序开发公司，然后进行开发工作，最后交付成果上线。小程序开发推荐选择在线小程序制作平台。这个平台具有400+小程序模板，2000w+成功企业的微信小程序案例，可同时制作微信、头条、百度、抖音4种平台小程序，400+小程序模板，2000w+成功企业的微信小程序案例。

选择公司的技巧：

1、看公司官网的案例，凡是比较专业的开发公司，都会有自己的作品展示案例。在官网上可以查看到其公司做过的部分案例和效果。如果它们做的案例比较多，说明他们公司在这方面开发比较有经验，就可以选择这家公司了。

2、聊天看公司的客服是否热情，沟通的时候，和他们工作人员聊上几句，你就能基本了解这家公司的业务水平了。好的、有诚意合作的开发公司，都会比较耐心给与问题解答，帮你正确抉择，而不是敷衍了事、一切只向钱看。

3、考虑价格因素，“一分价钱一分货，贵自然有贵的道理”，好的开发公司收费一般都比较高，但是为了自己的公司项目或产品的稳定可靠发展及运营，贵也是值得的。

4、售后服务(技术指导)，除了上线后持续跟进外,还能进行免费协助维护,突发情况发生后的紧急维护等。通过分辨以上几点基本可以看出一家公司是否靠谱。

想要了解更多有关开发小程序的相关信息，推荐选择在线小程序制作平台。在线小程序制作平台不需要学习HTML、PHP、CSS等等的编程语言，不需耗费众多的资源和时间，根据自身实际需求，通过简单的操作修改，就可以轻松的制作出属于优质的小程序。

0代码，新手小白也能用！点击这里获取简单易用的小程序制作工具：小程序制作平台

小程序开发基础的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序的开发、小程序开发基础的信息别忘了在本站进行查找喔。