微信小程序的展览会设计与实现

雨点打透心脏的1/2处 2024-04-01 08:31 34阅读 0赞

目 录  
摘 要 Ⅰ  
1微信小程序的研究及意义 1  
1.1研究背景 1  
1.2目的及意义 1  
2微信小程序的特点 2  
2.1 轻应用 2  
2.2释放手机内存 2  
2.3引流才能强 2  
2.4推行疾速 3  
2.5 跨平台 3  
2.6 高体验 3  
3微信小程序的概述 3  
3.1小程序的开发 3  
3.1.1小程序申请&APPID 3  
3.1.2创建小程序项目 3  
3.1.3小程序开发&预览&代码上传&配置功能页面 3  
3.1.4与现有公众号关联 4  
3.1.5与服务端交互 4  
3.2小程序的架构 4  
4微信小程序的设计与实现 5  
4.1小程序的底部 tabBar 实现 5  
4.2预登记部分功能实现 8  
4.3会议活动功能实现 9  
4.4拼手气福袋功能实现 10  
结 论 10  
参考文献 11  
微信逐渐成为人们工作、学习、生活中必备的社交软件，微信小程序正式问世后就得到了强烈的反响，因其可以在微信中被快速地获取和传播已经被应用于各个领域。因此， 大型展览会存在结构复杂、客流量大、宣传形象不到位等问题。就能够通过支持手机端的智能展览会 APP，从而实现可以通过智能手机为用户提供导览功能。  
越来越多的人走进展览会。通过参观满足对各种类展览的了解需求。在信息迅速发展

的背景下，大型展览会存在的结构复杂、客流量大、宣传形象不清晰等问题，给用户带来了极大的不便。为了给用户提供展览会智能逛展新体验。一个智能化、便捷的展览类小程序成了迫切需要解决的问题。用户无需下载，只要通过扫码海报码和或者搜索小程序名称即可进入小程序体验相关服务。小程序设置了活动日程、展览内容、馆内指引等模块，展会内容和日程安排一目了然，在线填写表单信息获取对应的展览参观证，逛展的用户在也不需担心错过精彩的内容和优质的服务了。  
3微信小程序的概述

3.1小程序的开发

3.1.1小程序申请&APPID

登录微信平台申请成为小程序开发者，小程序不可直接使用服务号或订阅号的 AppID， 需要登录微信公众平台管理后台，在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID。

3.1.2创建小程序项目

需要通过开发者工具，来完成小程序创建和代码编辑。开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

3.1.3小程序开发&预览&代码上传&配置功能页面

(1)开发详情可参考官网开发文档，微信小程序开发入坑指南或者蜂鸟微信小程序(2) 根据需求开发&预览小程序  
(3) 使用管理员帐号进行代码的上传(4) 代码审核与发布  
(5)可以选择是否申请身份认证  
(6)已认证的小程序可申请微信支付

3.1.4与现有公众号关联

小程序绑定微信开放平台帐号后，可与帐号下的其他移动应用、网站应用及公众号打通，通过 UnionID 机制满足在多个应用和公众号之间统一用户帐号的需求。

3.1.5与服务端交互

(1)网络，可通过调用小程序提供的 API 发起 HTTPS 协议的网络请求。  
(2)登录，可调用借口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session\_key）。用户数据的加解密通讯需要依赖会话密钥完成。  
(3)用户登录状态维护。  
(4)获取用户信息，可直接调用 wx.getUserInfo()获取，需要先调用 wx.login 接口  
微信支付，可调用 wx.requestPayment()发起微信支付。(5) 小程序页面分享功能  
(6) 小程序页面二维码生成，可通过扫描该二维码直接进入到相关页面。

3.2 小程序的架构

微信小程序在架构上是非常清晰易通，整体分为两个部分；视图层个逻辑层。这使得数据和视图可以保持同步性、一致性，本文转载自http://www.biyezuopin.vip/onews.asp?id=13186即想要修改数据时，只需在逻辑层上做出相应的修改，视图层就会随之进行修改。根据官方文件的提供，一个微信小程序的界面由 4 个文件组成，分别是：wxml,wxss,js 和 json。（呈现如下图 3-2 所示）其中的前两者主要负责实现视图层，而 js 负责逻辑的实现。简单来说，wxml 文件编译后得到 html,wxss 文件编译后得到 css，分离的各个页面的 js 和APP 的主 js 文件最终会打包在一起得到App Service。  
![在这里插入图片描述][93f59d5fdccd4713bb461e790efd85cb.png_pic_center]  
![在这里插入图片描述][502f6dafa057434ca55667b125e93fd1.png_pic_center]  
![在这里插入图片描述][ca554ba98c30414695634e9c60c1ae5e.png_pic_center]  
![在这里插入图片描述][d84b7ae48468452b92a403b598adca6d.png_pic_center]  
![在这里插入图片描述][c3867492b2bc4cf7a21f82e03aec6f1f.png_pic_center]  
![在这里插入图片描述][c7f5fff40ff94eee81a24c1d29fa76d1.png_pic_center]  
![在这里插入图片描述][c6588642498d4e40a723ac75ee7ac312.png_pic_center]  
![在这里插入图片描述][b0eee67eef24407583ee8c9a7a98abc5.png_pic_center]  
![在这里插入图片描述][2d131bd9f4ca45dca0f8256b7496da1c.png_pic_center]  
![在这里插入图片描述][c0b5e135adb94f6198042b3689f99e49.png_pic_center]  
![在这里插入图片描述][afbde45bd7f1442f8565d766949ae05b.png_pic_center]

[93f59d5fdccd4713bb461e790efd85cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a4ddd38925154351893ed0e5c8cbe17b.png
[502f6dafa057434ca55667b125e93fd1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/43ce530e21c74c6e9d87c2ff986da00d.png
[ca554ba98c30414695634e9c60c1ae5e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d81fbe3f3ce146a5b3b6b57bb48f9a36.png
[d84b7ae48468452b92a403b598adca6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/603b537973d147b6add19c79c8bd6dd2.png
[c3867492b2bc4cf7a21f82e03aec6f1f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d48b41c265714cf1b8b20cd93a6a7c50.png
[c7f5fff40ff94eee81a24c1d29fa76d1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/146eac813ea94254a14781163a5ebb6e.png
[c6588642498d4e40a723ac75ee7ac312.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd67a00e744f4555857482276c42893c.png
[b0eee67eef24407583ee8c9a7a98abc5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cdb0b03dff114a1891bb3df9b873ca96.png
[2d131bd9f4ca45dca0f8256b7496da1c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b9466c3b83bc49548c86ef6d59c5a659.png
[c0b5e135adb94f6198042b3689f99e49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9d500c2bd51d47668c722d3d15407c3d.png
[afbde45bd7f1442f8565d766949ae05b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3f6f53e9984b400a9973545b103568c9.png