微信小程序制作
当前位置:网站首页 > 小程序热文 > 西安小程序软件开发应用与设计 返回列表

西安小程序软件开发应用与设计

作者:admin 时间:2022-09-14 浏览量:428
主要用到的前端技术
本文所述的共享充电小程序,采用基于HTML5、CSS3等前端技术,保证了前端界面的美观和操作便捷。这一小程序利用微信平台的共享优势,采用微信平台API,让用户快捷实现移动充电支付功能,使用形式多样,消费者可以直接打开微信小程序扫描二维码使用。商家可以合理运用小程序的二维码宣传海报,让用户自发扫描关注本微信小程序,宣传成本和推广投入较低。已有文献开发出快速定位找到充电桩的微信小程序[1]。
HTML5HTML5网页前端技术展现的外观形式更加注重易读性以及与艺术融合达成的美观性。通过结合CSS3,可便捷地完成设计任务[2]。一般是由HTML、CSS、JavaScript等作为基本构建项目语言,并可同时采用WebApplicationAPI、DeviceAPI等技术[3]。基于CGI静态的HTML页面可以通过JavaScript提供动态实时信息,对客户的操作进行反馈。随着HTML5的出现,JavaScript的功能已经扩展到编写后台开发,可避免HTML语言自身的弊端[4]。本文使用JavaScript配合HTML5来实现跨平台Web的应用开发。充电小程序的主界面主要由顶部导航栏、折叠面板和内容主体区域完成,底部设置功能按钮。主要使用HTML+CSS对页面进行美化,页面布局采用 Flex布局。这种布局方式会让页面变成弹性布局,不会因为手机尺寸变化而改变样式。折叠面板使用vant组件库中的collapse折叠面板,主体内容和底部功能按钮采用CSS中的定位功能,可将功能按钮区域定位在页面底部。
VueVue是构建用户界面的框架,是一个轻量级的MVVM(ModelViewViewModel),也就是数据的双向绑定,是基于数据驱动和组件化的前端开发,其采用自底向上增量式开发模式,使用更加灵活、开放,架构也更加简单,便于与库文件及已有项目进行整合[5],是一种通过简单的API就能实现响应式的数据绑定和组合的视图组件。Vue是一个构建数据的视图集合,其只关注视图层,存储空间只有几十KB。Vue.js通过简洁的API来提供高效的数据绑定和灵活的组件系统。它由我国自主开发,使用中文技术文档,易于国人理解和学习。Vue.js通过组件,把一个单页应用中的各种模块拆分为单独的组件,只需先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),应用开发就可以完成。Vue使数据的更改更为简单,无需进行逻辑代码的修改,只需要操作数据就可完成相关操作。
CSS3CSS即层叠样式表。Web开发中采用CSS技术,可有效地控制页面的布局、字体、颜色、背景和其他效果。CSS3带有模块化的特点,增加了很多新特性和选择器,编写样式更加方便[6]。当前,移动端的产品种类越来越多,传统方式在构造移动端的样式时很困难,不同设备的屏幕宽度、高度不一致,所以要去适配不同屏幕宽度,开发过程比较繁琐。而CSS3引入全新的布局方式,即flex布局,它很好地解决了这个问题,其功能主要是当屏幕和浏览器窗口大小发生变化时,可以灵活调整布局;可以指定伸缩项目沿着主轴或侧轴,按比例分配空余空间,从而调整伸缩项目的大小,将伸缩容器额外空间分配到项目之前、之后或之间;可以指定将垂直于元素布局轴的额外空间分布到该元素周围,控制元素在页面上的布局方向,按照不同标准流所指定的排序方式,对屏幕上的元素重新排序。此外,还有其他很多灵活实用的属性。
充电小程序布局与设计
技术架构充电小程序的首页由四个文件组成,分别为index.wxss、index.wxml、index.json和index.js。其中,index.wxss主要是写CSS样式的,index.wxml主要是写布局结构的,index.json主要是页面的一些配置和引入组件的,index.js主要是处理业务逻辑的。本文借鉴Vue的设计思想,也就是将可复用的结构封装成组件,通过在需要的页面注册,该组件即可使用,以简化页面的代码结构。App.js是项目的入口文件,App全局函数掌握着程序生命周期。App.json是小程序的全局配置文件,页面的底部导航栏和顶部样式,可以在这里进行配置,每个页面已经配置的样式会覆盖全局的样式。App.css是全局的样式配置文件,用来配置全局的样式,同App.json一样,页面的样式会覆盖全局的样式。Service文件夹包含开发者封装的JavaScript文件,可将微信的网络请求进行封装,以简化代码。
首页设计及使用流程用户扫描充电桩上面的二维码,即可进入小程序。首次进入小程序需要用户授权。由于微信平台不允许用户在首页
被授权,所以当用户选择充电端口时,会跳转到授权页面,用户授权以后才可以正常使用充电小程序。授权之后,用户选择充电端口和功率大小,付款之后即可开始充电,并开始计费,如充电时间有剩余,根据剩余时间计算,返回至余额,下次继续使用。充电小程序首页利用移动端的flex布局和定位完成对页面的布局,使用vant-weapp组件开发各个模块。业务逻辑主要集中在首页,比如数据获取和支付逻辑。每个充电桩设备都映射为不同的设备编号,这些设备编号数据将保存到二维码,所以设备在小程序当前页面需要展示设备编号。在获取数据模块,主要采用Promise来对小程序官方的请求进行封装。然后,将获取的数据的JavaScript文件封装成可复用的JavaScript文件,以提高开发效率。充电小程序的首页界面如下页图1左侧所示。用户首次扫描二维码进入小程序时,会被要求进行授权登录,否则无法使用。用户选择充电端口,然后选择对应的充电功率,点击立即支付,即可下单开始充电。图中的1分钟代表每充电1分钟将花费0.01元。充电时间越长,代表功率越低,价格也越便宜。考虑到每个设备的编号不同,当用户退出充电小程序再次使用时,会跳到扫码界面。该界面调用了微信平台的扫码API,可识别二维码中的参数,读取参数中的设备编号,并跳转到首页,将设备编号显示到导航栏,便于用户再次使用。当用户授权登录后,顶部导航栏会显示当前设备编号,每个二维码都对应唯一的设备编号。余额栏指的是当用户扫码充电后,如果充电时间有剩余,则将余额直接退到用户的账户,下次登录时,用户可以直接使用。
授权页面小程序授权页面主要是用来获取用户信息的,比如头像、微信昵称、位置等,主要利用微信官方平台提供的API完成用户信息的获取。当用户第一次扫码进入充电小程序,点击端口按钮时,会弹出授权登录页面,授权以后便不再弹出该界面,除非用户删除该小程序。
扫码页面当用户需要再次使用的时候,下拉微信,可以直接进入小程序。此时,将弹出扫码界面,防止用户未扫码,出现设备不存在的情况。该界面主要利用微信官方的API来完成核心的逻辑,扫码界面如图1右侧所示。充电小程序的图标主要来自阿里巴巴的incofont字体图标库。获取首页数据之前需要调用后台的thirdlogin接口,请求成功之后会返回一个对象,利用sessioncookie字段,使用小程序缓存将其保存到本地。由于后续请求需要将其放在请求头里,以便让后端程序进行验证。
在移动物联网时代,充电桩的需求日益增大,充电小程序可为充电桩服务,缓解广大用户出门在外充电的需求,可以促进互联网共享经济的发展。本文主要描述了基于微信平台API开发,采用HTML5、CSS3等前端技术的交互式共享充电小程序,阐述了具有较高实用性的前端技术的开发环境。其主要优点是所占存储空间小,客户端界面简单大方,用户上手容易,即用即走,无需安装,便于推广使用。在5G技术背景下,未来的移动应用将迎来大爆发,随着用户需求的不断增加,更新速度将更快,小程序应用将受到前所未有的市场考验。未来还需添加会员、充值等新功能,构建更多功能应用,使用户数据更加安全,并进一步尝试利用HTML5+CSS3+JavaScript的技术优势,更好地实现跨浏览器技术。
联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 现如今对于企业来说到底是做小程序好,还是说做app好,现如今很多企业选择的关注之一。

    对于小程序来说,其推广速度快,不管说分享到朋友圈,还是说分享给好友,直接快速的点击就可以使用了。并且它还有一个好处,就是它不用像app一样去上架到各个应用商店。像如果上架到苹果的话,还需要一个九十九美金注册一个这样的账号,可能比较麻烦。但是小程序的弊端啊,对那种着急上线的人可能就不太友好了,因为它多了一个小程序备案,这个时间啊可能也很久。你像a p p的话,它最大的弊端就是推广起来不方便。都知道下载app它没有小程序那么灵活,但是app的好处呢,它就是可以想怎么改就怎么改,没有像小程序那样改,一次,要审核一次,改一次,要审核一次,比较慢,比较麻烦。

    对于用户来说,现如今还是毕竟推荐建设小程序的,毕竟现如今的小程序在推广和使用方面会有更好的有时。
  • 现如今对于用户来说,小程序很大程度上已经逐渐成为很多人们日常生活中不可或缺的一部分了。在这种情况下,很多企业都想要同过小程序来获取到更多的流量或者用户。那么对于想要开发小程序的企业或用户来说,开发一款小程序需要准备哪些资料呢?

    首先应该准备一家公司的营业执照,最好是科技公司的,因为科技公司是可以申请高新技术补贴的,一般来说有十到二十万左右。其次就是公司的经营范围,这个一定要跟公司经营类目相符合,不然在经营过程中,如果被查出来经营范围不一样,那么就会被下架小程序的。如果说是个人使用的小程序的话,就需要去申请一个个体的营业执照,把经营范围填好,因为个体是可以申请小程序的,走的是法人。有了这种营业执照以后呢,就可以帮申请域名、服务器、小程序小程序的名称,还有logo这些等等。

    对于一个小程序来说所需要准备的东西并不是很多,主要是开发过程中所需要的费用相对来说会比较高一些。
  • 对于用户来说,小程序的开发费用往往是很多用户关注的重点,很多用户都是因为开发小程序的费用太高而不得不放弃小程序的开发,那么对于用户来说应该如何降低小程序的开发费用呢?

    首先确定开发主要的功能。在不确定小程序未来能不能帮助赚钱的情况下,先定制开发核心功能,等小程序赚钱了以后再进行升级开发。其次,找有开发类似经验的公司做二开,这样更能确保开发公司都能理解到位,并且比起全新的定制开发来说价格也会更低。第三,整理需求,做需求文档,这个是很多用户都忽略的,需求清晰完整,开发公司才能清楚的了解工期报价才不会虚高。

    对于用户来说这些都是能够降低开发费用的方式之一,当然了对于用户来说节省开发费用的方式有很多,但是想要做出真正好的小程序所需要的价格和时间一定是非常多的。
  • 小程序定制的费用是很多用户不想选择定制开发的主要原因,对于用户来说定制开发的费用太高了,一般的企业是很难承受的,那么应该如何降低定制开发的费用呢?

    首先第一个,就是用户想要定制开发的这个小程序功能,开发公司正好有已经开发好的功能。那这个时候呢小程序开发公司一般来说给的价格都会比较低一些,因为有的代码他们是可以直接用的。第二,如果说你想要自己开发的这个小程序,完全是你的一些个性化的一些要求。开发公司没有已经开发好的,类似的这个功能案例。这个时候呢,降低一点需求把最重要的功能先开发出来,后面在进行优化升级。除此之外,就是选择一些人力成本比较低的二线城市,或者是三线城市,虽然有可能在开发过程中会出现一些不确定的因素,但是相对来说价格会便宜不少。

    当然除此以外呢,想减少小程序定制开发费用的方式也有很多,一般来说最好是先开发完小程序的核心功能之后上线使用,当有足够的资金后在对其进行升级和优化,对于很多预算有限,但是需要进行定制开发的用户来说着是最好的方式。
  • 在进行小程序的定制开发过程中,有可能会出现很多问题,有些问题很多情况下都是可以提前避免的,这对于小程序的开发和后期的维护等都会有很大的帮助。那么在进行小程序的开发时应该注意那些事项呢?

    第一个需要注意的事项就是先要明确小程序开发的功能。很多时候由于没有和网络公司明确小程序定制开发的功能,导致后期开发过程中出现了大量的问题,甲乙双方的相互扯皮。为了避免后期的返工和修改,一定要在签约小程序开发合同之前,要把定制开发的功能,以文字的形式记录下来。第二个需要注意的事项就是开发公司是不是百分之百给你源代码交付。在小程序开发过程中,很多公司为了降低开发成本,有可能会直接在网上下载流通的免费代码,通过简单的修改给你进行交付。因为这套代码的版权不是他们公司开发的,后期有可能会收到起诉函。第三个需要注意的事项就是做小程序开发后期有没有隐形的费用。因为做小程序开发,后期或多或少都会做一些调整,只要让公司改个东西或者做一些服务,都有可能会是天价,除非啥都不改。所以一定要在小程序确定合作之前,把后期的服务范围落实到位。

    在小程序的开发过程中,很多主要的问题就是来源于这些地方,只要明确好小程序的功能,和后期的维护、优化等方面的问题后,基本上就能够减少很多问题了。
  • 一般来说,需要进行小程序定制开发的时候,说明一般的模板小程序已经很难满足需求了。对于一个定制小程序开发大致需要以下几个阶段,第一确定产品需求,第二产品原型设计,第三产品ui设计,第四开发过程,第五测试验收上线。

    在开发过程中,有不同的角色来承担对应的项目工作,核心需要四个角色。第一,产品经理主要负责需求调研以及产品原型设计,包括产品的使用流程、逻辑关系等一系列工作。第二,ui设计师将产品原型具体化,上色大师配合程序员贴图等工作。第三,程序员包括前后端开发工程师,负责产品的具体开发工作。第四,测试工程师负责产品测试、调试校验系统的稳定性后,产品才能进行上线。

    一般来说小程序的定制开发费用主要是开发人员的成本费用,加上一些其他的像是电费等。总的来说,开发一款小程序的费用很大程度上和开发人员的数量和开发时间有关。一般情况下开发一款定制的小程序最少也需要一万元左右,要是想要让小程序有更好的发展空间或者是更多的功能等,所需要的费用就会更多。

029-8619 5145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央区元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
网站地图 Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1