微信小程序制作
当前位置:网站首页 > 小程序热文 > 微信小程序如何实现共享化开发 返回列表

微信小程序如何实现共享化开发

作者:admin 时间:2022-08-19 浏览量:424
对开发者来说更容易维护和管理,可以实现跨平台开发。
主要用到的前端技术
本文所述的共享充电小程序,采用基于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字段,使用小程序缓存将其保存到本地。由于后续请求需要将其放在请求头里,以便让后端程序进行验证
联系方式:18066528545   029-89298792

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

  • 小程序与原生APP那个好?下面我们就来一起了解一下小程序与原生APP那个好。以下是所整理的小程序与原生App的内容,希望对你有所帮助。

    小程序的优点:

    基于微信平台开发,享受微信自带的流量,这个优点最大
    无需安装,只要打开微信就能用,不占手机内存,体验好
    开发周期段,一般最多一个月就可以上线完成
    开发所需的资金少,所需资金是开发原生APP的一半不到
    小程序名称是唯一的,在微信的搜索里权重很高
    容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本没有大问题
    基本不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序
    发布,审核高效,基本上午发布审核,下午就审核通过,升级简单,支持灰度发布
    开发文档完善,社区活跃
    支持插件式开发,一些基本功能可以开发成插件,供多个小程序使用
    小程序的缺点:
    局限性很强(比如页面大小不能超过1M,不能打开超过5个层级的页面,样式单一,小程序的部分组件已经是成型的- 了,样式不能修改,比如幻灯片,导航)只能依赖于微信依托与微信,无法开发后台管理功能
    不利于推广,推广面窄,不能分享朋友圈,只能分享给朋友,附近小程序推广,其中附加小程序也收到微信限制
    后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦
    前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致
    js引用只能使用绝对路径,不能操作DOM
    原生App优点:
    原生的相应速度快
    对于有无网络操作时,譬如离线操作基本选用原生开发
    需要调用系统硬件的功能(摄像头,拨号,短信蓝牙…)
    在无网络或者弱网情况下体验好
    原生App缺点:
    开发周期长,开发成本高,需要下载
  • 小程序和Vue写法的区别?下面我们就来一起了解一下小程序和Vue写法的区别。以下是我所整理的小程序和Vue写法的区别,希望对你有所帮助。

    遍历的时候:

    • 小程序wx:for=“list”,
    • 而Vue是v-for=“item in list”

    调用data模型(赋值)的时候:

    • 小程序:this.data.item // 调用,

    • 小程序:this.setDate({item:1})//赋值

    • Vue:this.item //调用,

    • Vue:this.item=1 //赋值

  • 小程序调用后台接口遇到那些问题?下面我们就来一起了解一下小程序调用后台接口遇到那些问题。以下是所整理的小程序调用后台接口遇到的问题,希望对你有所帮助。

    数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序

    小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件
    注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其他的标签让插件来做
  • 分析微信小程序的优劣势?下面我们就来一起简单的了解一下微信小程序的优劣势。下面是所整理的微信小程序的优劣势,希望对你有所帮助。

    优势:

    容易上手,基础组件库比较全,基本不需要考虑兼容问题
    开发文档比较完善,开发社区比较活跃,支持插件式开发
    良好的用户体验,无需下载,通过搜索和扫一扫就可以打开,打开速度快,安卓上可以添加到桌面,与原生APP差不多
    开发成本比APP要低
    为用户提供良好的保障(小程序发布,严格是审查流程)

    劣势:
    限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
    样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
    推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
    依托与微信,无法开发后台管理功能
    后台调试麻烦,因为api接口必须https请求且公网地址
    真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢

  • 简单描述下微信小程序的 相关文件类型。下面我们就来一起了解一下微信小程序的 相关文件类型。以下是所整理的微信小程序的 相关文件类型,希望对你有所帮助。

    wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构

    wxss 样式文件,是一套样式语言,用于描述WXML的组件样式
    js脚本逻辑文件。逻辑处理网络请求
    json配置文件,小程序设置,如页面注册,页面标题及tabBar
    app.json 整个小程序的全局配置,包括:
    pages:\[所有页面路径]
    网络设置(网络超时事件)
    页面表现(页面注册)
    window:(背景色,导航样式,默认标题)
    底部tab等
    app.js 监听并处理小程序的生命周期函数,声明全局变量等
    app.wxss 全局配置的样式文件

  • 请谈谈原生开发小程序,wepy,mpvue的对比?下面我们就来一起了解一下原生开发小程序,wepy,mpvue的对比。个人认为,如果是新项目,且没有旧的 h5 项目迁移,则考虑用小程序原生开发,好处是相比于第三方框架,坑少。

    而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发,近期看wepy几乎不更新了,所以推荐美团的mpvue。
    而如果如果团队前端强大,自己做一套框架也没问题。

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