该项目主要使用了vue3+vant4进行开发，项目打包运行使用了更快捷的vite。主要功能是在移动端查看全国各个政区内的样本数量统计和单个样本相关地块信息和媒体照片信息。主要模块有地图样本展示模块、样本详情模块、样本列表模块等。地图使用了leaflet地图插件，其他的ui插件则使用了vant提供的界面交互插件。值得注意的是，项目中病诶呦全局引入vant，而是在vite.config.js中使用@vant/auto-import-resolver和unplugin-auto-import插件配置了vue组件中自动导入vant的相关组件，大大减少了项目打包后的体积，项目配置了postcss-px-to-viewport插件，将px单位转化为vw实现界面在移动端的自适应。界面数据存储使用了pinia+pinia-plugin-persistedstate实现数据本地存储的永久化，项目中的组件规则遵循vue3的组件构建写法。

整体项目大概可分为四个功能模块：信息站、云档案、地图、个人中心。所有模块均有本人独立开发完成，模块使用了uniapp自带的api及其自身融合的vue及vuex相关功能来完成项目开发，其中难点是地图模块进入后获取当前定位的方法，地图模块是webview嵌入的由leaflet构建的H5页面，由于webview内部嵌入浏览器的安全限制，无法直接通过调用浏览器的内置方法获取当前位置，所以采用了uniapp自带的api（uni.getLocation）来获取当前位置信息传递至地图的H5页面来定位到当前地图位置，地图绘制图斑功能使用了leaflet的插件leaflet-draw来完成图斑绘制。扫码登录使用uniapp的uni.scanCode来完成小程序扫码直接登录到web端应用的功能。

1）在项目的大致需求和主体功能完成研究后，由我们的技术主管搭建整个项目框架，同时介绍项目流程，构建不同模块目录，分配给前端小组的指定人员。 2）在项目中导入vux的组件，使用localstorage来存储用户的当前登录信息和其他的一些存储数据。 3）项目中使用vuex来管理各个组件的状态，同时使用require.context来导入store和route的模块，实现store的模块化和route的模块化。 4）将 第三方插件wn-vue-mescroll封装成一个全局的上拉加载和下拉刷新的组件vue-mescroll。 5）在订单模块引入组件vue-mescroll实现页面的下拉刷新和上拉加载，使用store来管理订单的不同状态，缓存订单数据，减少接口的调用次数。将订单的状态名称和id以getters返回，单个状态以传参（订单状态的status）的形式同样在getters中实现。 6）与订单模块的实现原理一致，优惠券模块中同样使用vue-mescroll和store实现相关功能。 7）在商品详情页新增分享链接和海报分享，海报分享以canvas实现，分享携带当前登录用户的id，在app.vue中获取分享人的id，存入sessionstorage中，在购买商品时若存在分享id则将其传送到后台，不存在则不传。 8）首页的轮播图使用vux的swiper组件，同时由于后台传入的图片高度不固定，所以在初始化swiper高度为0，在获取到图片的信息之后再动态设置swiper的高度。 9）项目中的提示类信息和消息确认框使用vux的toastPlugin和confirmPlugin。 APP.vue中引入封装的全局组件tabbar，将tabbar的显示状态保存在全局store的state中，同时在meta中定义showtabbar来显示与隐藏tabbar，在router.beforeEach中去根据to.meta.showtabbar来更改tabbar的显示状态。