DOI:10.19551/jki.issn1672-9129.2021.10.170
小程序与网页前端开发技术实现对比
黄浩贤㊀郭文杰㊀戚耀中㊀高泽乐㊀陈源濠(广东白云学院㊀广州㊀510450)
基金项目：广东白云学院2020年度大学生创新创业训练项目资助 i树洞心理助手APP的开发与运用 专项调研课题(S202010822037S)
摘要：随着移动互联网时代的飞速发展，人们日常使用的互联网应用都开始寻求便捷㊁简化的方式来使人们使用㊂迎合时代趋势，为了人们能够打开一个优化和功能直通的应用，小程序就是时代发展应用简化功能化的体现㊂小程序的特点是无需下载㊁随时打开㊁不占用手机内存的同时开发成本较低㊂
通过对小程序的界面实现技术(WXML+WXSS+JavaScript)与传统网站的前端实现技术(HTML5+CSS3+JavaScript)进行多方面的比较与示例分析，让传统网站开发者能深入了解两者前端实现技术的异同，尽快掌握小程序界面的设计方法㊂
关键词：小程序；网页；技术
中图分类号:TP311.56㊀㊀㊀文献标识码:A㊀㊀㊀文章编号:1672-9129(2021)10-0177-02
㊀㊀1㊀小程序
1.1定义㊂小程序这个词可以分解为’」和’小程序」两部分㊂.其中可以理解为’中的」，指的是小程序的执行环境;’小程序」是说它首先是程序，然后具备轻便的特征㊂小程序并不像其他应用那样需要安装，用户直接扫描二维码候能够打开应用，关闭就可以退出后台应用且不占用系统内存，这就是所谓用完即走的原则㊂朋友圈提供了好友之间沟通信息的手段，提供了面向粉丝推送信息的手段，而小程序则是提供了用户通过自己的操作而与服务实现互动的手段㊂
1.2小程序发展前景㊂从角度来看，随着科技的不断进步，很多功能将会被开放，很多用户的需要也要被实现和满足，而小程序的可以帮助更好的连接用户，用户使用起来也会更加的方便，这就是小程序一个很明显的发展强前景和优势㊂
从小程序本身来看，小程序因为打开便捷，所以在用户体中传播迅速，我们经常可以看到小程序在中彼此共享，事实上，这是一种非常方便快捷的传输方式，小程序依托在生态小程序上，在社营销和引流上有着得天独厚的优势，传播更加的容易㊂
小程序流量的变现和裂变能力非常强，㊁朋友圈等方式的裂变，可以提高商家的整体运营，为用户制定不同的需求的服务，有效的增加用户的黏性㊂
1.3小程序开发框架㊂
(1)框架全局配置文件㊂小程序中有着三个控制全局配置的文件，他们分别是APP.wxss㊁APP.json和APP. js㊂小程序的样式文件，小程序的配置项和小程序的逻辑层㊂在创建项目时他们就会存在并且放在项目的根目录当中㊂它们作用是在小程序页面，但是没有小程序page页码内wxss㊁js㊁json文件层级高㊂我们可以将共用文件放置于三个文件内方便页码布局和技术的实现㊂
(2)APP.js文件㊂在此文件中写入小程序需要的数据函数和数据，在此中的函数都可以调用到全局页面配置当中㊂开发者在开发不同开发阶段都需要运用到不同场景的生命周期函数，此时就可以通过此文件调用㊂
(3)APP.json文件㊂对小程序进行全局配置，决定页面文件的路径㊁窗口表现㊁设置网络超时时间㊁设置多tab等㊂
(4)APP.wxss文件㊂此文件编写样式能在全局页面调用，在页面定义同样的class，就可以在此文件中写全局样式对所有页码进行渲染效果㊂如果页面中重定义了class，会将APP.wxss中的定义样式覆盖掉，实现自己重新定义的样式布局㊂
(5)utils文件㊂此文件狭存放自己封装的工具类函数，是一个共享的方法㊂可以存放各类需要调用到的数据函数㊂通过此文件夹来调用到页面当中响应事件㊂
(6)页面框架配置文件㊂每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置㊂页面中配置项在当前页面会覆盖app.json的window中相同的配置项㊂文件内容为一个JSON对象㊂
(7)小结㊂小程序开发运用团队提供的开发者工具，小程序开发者可以在工具中进行框架开发，拥有许多自己的组件可以用不同的值实现很多现实场景的手机应用当中，省去了很多逻辑上的代码编写，使得开发门槛低，比起网页框架更加简单方便学习㊂
2㊀网页前端实现技术
2.1HTML5技术㊂HTML5是构建Web表面布局内容的语言描述方式㊂HTML5将Web带入一个成熟的应用平台，体现在对视频㊁音频㊁图像㊁动画以及与设备的交互进行了规范㊂
2.2CSS3技术㊂CSS3是CSS即层叠样式表技术升级版本，普遍运用于实现网页风格的调整达成设计效果㊂CSS3能够对HTML中许多元素进行修改布局，如主要包括盒子模型㊁列表模块㊁超链接方式㊁语言模块㊁背景和边框㊁文字特效㊁多栏布局等元素属性控制，能够便捷的让页面呈现出想达到的效果㊂
2.3JavaScript技术㊂JavaScript是网站逻辑层语言脚本语言，在网页开发中起到了给HTML网页增加动态效果实现用户交互的作用㊂主要功能有添加动态文本于网页当中，对网站发生的各类事件进行响应
设计，还能读取HTML元素，检查访客浏览信息，在数据被读取到服务器前进行验证等㊂3㊀小程序与网页异化技术
㊃771㊃
3.1WXML㊂WXML是一套用于小程序前端开发不可或缺的标签语言，通过结合时间系统与基础组件构建出页面结构㊂WXML与HTML都是标记语言，但前者属扩展标记语言，后者属超文本标记语言，而WXML相对于HTML而言，更着重的是如何去描述信息,HTML则是着重如何去显示信息，且WXML仅能在小程序开发工具预览，而HT-ML能在网页和Microsoft Expression Web㊁dreamweaver㊁Cof-feeCup HTML Editor等编辑器预览㊂但WXML的使用比起HTML的使用更加灵活多变以及更加便捷㊂
3.2WXSS㊂WXSS是一套用于描述WXML组件样式的样式语言，与CSS相比,WXSS虽具备CSS的大部分特征，但WXSS是适用于开发小程序的，因此在CSS原有的基础上进行了一定的扩充与修改，例如：新增了尺寸单位  RPX㊁提供了全局与局部的样式㊁以及不能直接通过CSS3中的background-image属性设置需要显示的背景图片等㊂目前WXSS并不能调用本地资源图片作为背景图片，因此我们需要通过使用image标签或将本地图片上传到服务器，通过网络进行HTTPS访问，来调用背景图片㊂
4㊀小程序与网页前端技术异同
4.1页面布局标记语言㊂页面布局作为前端开发的重中之重，无论是做网页还是做小程序都要清楚知道页面的布局是如何编辑的㊂
写文章的小程序常见的页面布局有以下几种:
(1)静态布局：给页面元素设置固定的宽度和高度，单位用px，针对不同分辨率的手机端，分别写不同的样式文件㊂
(2)flex布局；其优点在于简单上手，根据flex规则就能容易达到某个布局效果，但其缺点为：浏览器兼容性比较差，只能兼容到ie9及以上㊂
(3)自适应布局：分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次㊂
小程序的页面布局一般采用的是Flex布局，因为Flex 布局简单上手，灵活方便，且在小程序中,IOS端使用的渲染引擎WKWebView和安卓端使用的X5，都实现了对Flex 的支持，因此为了在小程序开发中更方便，更快捷地布局，通常都会使用Flex布局㊂
4.2样式技术㊂小程序的样式体现在WXSS文件当中，可以在WXSS中配置各板块的位置㊁大小㊁样式等，与此相同的是网页前端技术也可以在CSS中配置各板块的样式信息，两者使用的语法与参数
基本相同,WXSS继承了大部分CSS已有的功能，并在此基础上新增了部分特性，在小程序当中，可以用import导入已经写好的样式文件, WXSS在配置过程中位置越前优先级越高㊂WXSS为组件提供了很多可选择的样式，而与网页前端相比，部分组件的样式被固定下来形成固定样式，用户使用时省去了部分复杂的配置方式㊂
(1)尺寸单位㊂网页前端的尺寸选用px作为单位，对比网页前端的配置单位小程序也可使用px做为单位，而在实际应用当中基本不会使用px，而是选用小程序在px上的引出单位rpx㊂
不同的手机有不同的像素密度，而如果在开发过程中使用px作为单位小程序在不同的手机上显示的效果也会大为不同，小程序为手机提供了单位换算，将每台手机的像素大小转换为等比例下的rpx单位，故在开发过程中选用
rpx作为单位，在各个手机上显示的图像比例大小是相同的，这样极大的简化了开发者的工作量，开发者不再需要像网页前端开发考虑到很多不同终端设备的显示效果不同㊂(2)全局样式和局部样式㊂在小程序的开发当中存在全局样式和局部样式，当在app.wxss中配置了全局样式时，这些样式会存在于每个页面当中，在全局样式中，可为小程序配置页面背景布局方式等，而各个页面也同样存在wxss 文件，这些作为各个页面的局部样式，而如果在局部样式中存在与全局配置相同的选择器，局部样式会覆盖全局样式中的样式属性，全局样式与局部样式有着相同的语法结构和配置参数㊂在网页前端开发中则有外部样式和内部样式，外部样式文件为在工程中另外建立的css文件，两者都可用于样式配置㊂
4.3脚本技术㊂网页和小程序的逻辑层都是运用JavaS-cript技术进行编写，但是小程序它运训环境与view的运行环境是不在同一区块,JavaScript只能运用Set Data方法修改数据或者实践获取数据从而改变view㊂小程序中脚本技术相较传统网站还进行一些修改，来更适合我们手机端的快捷应用㊂增加了许多方法，例如APP()㊁Page()㊁get App()等多个方法，同时还自生附带丰富API来实现本身特有的功能，例如支付，登陆，扫一扫等功能板块㊂除此之外小程序是在中运行，而网站时在浏览器中运行，所以JavaScript中在Web端的一些功能在小程序中变得无法运用㊂
5㊀结语
小程序开发和网页前端开发在技术上有着许多相同构造，当一个对前端语言有着相对了解的技术人员学习小程序开发会变得得心应手㊂小程序基于团队提供的这开发者工具开发，在创建项目时便给开发者们一套开发标准，前端常见技术如HTML5㊁CSS3在小程序中变为了WXML㊁WXSS，而逻辑层上小程序中JavaScript相对与网页有着增减㊂小程序开发有着它独立的标签来实现着前端一样的布局与样式操作，但是标签中富含着许多的方法来实现对应的手机端操作，在开发文档中有着详细的介绍使得上手变得相对容易㊂小程序基于团队提供的原生组件还有自由的开发组件权限，虽然是运用着同样的技术结构开发，但小程序能带给用户的体验会更上一步㊂简而言之，小程序相对前端网页开发更具有潜力，基于用户基数大，人们也不断追求便捷的应用方式，不久的未来将拥有广阔的市场前景㊂
参考文献:
[1]刘坤彪，程旭东，陈铭.基于CSS的标准网页布局设计[J].南阳理工学院学报.2012,4(06).
[2]韦春暖.网页布局设计技术问题探究[J].数字通信世界,2018(09):95.
[3]陈鹏旭.小程序开发系统分析及在校园中具体场景的实现[J].网络安全技术与应用.2021,(03).
作者简介：黄浩贤(2002-)，男，汉族广东广宁，本科在读，广东白云学院；研究方向：软件工程㊂
㊃871㊃

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。