java1234的博客

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -关于我们页面实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子排行实现

新建votePeopleDetail页面 投票人详情页面。新建voteDetail页面 投票详情页面。

【代码】uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子管理实现。

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我参与的投票列表实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子分享以及测试版本发布实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户投票实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子详情实现

【代码】uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我创建的投票列表实现。

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -创建图文投票实现

【代码】uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票创建后端实现。

文件选择上传组件 uni-file-picker 扩展组件 安装。日期选择器uni-datetime-picker组件 安装。iconfont小图标。

button上加下 open-type="chooseAvatar"

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -个人中心页面搭建实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -全局异常统一处理实现

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端鉴权拦截器实现

application.yml加上小程序登录需要的参数，小伙伴们可以登录小程序后台管理，获取到自己的参数。定义Properties属性类来映射上面的配置。

创建createWordVote和createPicVote两个页面。设置公共的背景色App.vue里面。

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -小程序端TabBar搭建

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端架构搭建

uni-app 从入门到精通 3天快速掌握 文字版 学习专栏

uni-app 前后端调用实例 基于Springboot 详情页实现

uni-app 前后端调用实例 基于Springboot 上拉分页实现

getList方法，success回调方法里，加下停止下拉刷新。我们来实现 下拉刷新功能。列表页面开启下拉刷新。

uni-app 前后端调用实例 基于Springboot 数据列表显示实现

新建uni-app项目 java1234Pro2。打开idea 新建项目uni-pro1。新建NewsController类。新建数据库db_uni。

但众所周知，由于小程序的js不运行在浏览器里，所以小程序里不支持 HTML 和 DOM 的 API。小程序自定义组件是一种ui组件，uni-app里可以在App、H5、微信小程序、QQ小程序同时兼容微信小程序自定义组件，，有数千款插件，支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。，并且在App侧通用。逻辑层在独立jscore，而渲染层可选webview渲染和weex引擎渲染。（但为了全端使用，仍然建议减少对dom库的依赖，在。的App端虽然和小程序是相同的架构，逻辑层也运行在独立。

不过这些技术都比较复杂，所以uni-ui里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验。ui是一种需求非常发散的产品，DCloud官方也无意用uni-ui压制第三方ui插件的空间，但官方有义务在性能和跨端方面提供一个开源的标杆给大家。uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。uni-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。

uni-app基础知识掌握后，我们要对uni-app内置的组件有一个基础的全局认识，用到的时候，再根据文档具体研究使用细节。我们学习的时候，新建项目，选择第二个 Hello uni-app模版。

uni-app 的 css 与 web 的 css 基本一致。 支持的通用 css 单位包括 px、rpxpx 即屏幕像素rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算使用语句可以导入外联样式表，后跟需要导入的外联样式表的相对路径，用表示语句结束。com

小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。所以uni-app的非H5端，一样支持标准js，支持if、for等语法，支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。非h5端（包含小程序和App），Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中，都没有运行在浏览器或webview里。非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。

nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。注意如果工程下同时有vue和nvue文件，全局样式的所有css会应用于所有文件，而nvue支持的css有限，编译器会在控制台报警，提示某些css无法在nvue中支持。globalData是简单的全局变量，如果使用状态管理，请使用。

是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

uni-app pages.json之globalStyle全局页面样式配置

├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此。├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见。├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见。目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。的文件，会直接复制到最终的打包目录，不会打包编译。目录下，建议这些公用的资源放在自建的。等小程序需要的文件。

1，如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。输入项目名称，以及项目目录，勾选Vue3版本，我们刚开始学习，选择默认模版，然后点击“创建”按钮。菜单目录 运行 -> 运行到小程序模拟器 -> 微信开发者工具。菜单目录 运行 -> 运行到浏览器 -> Chrome。2，微信小程序开发工具，设置->安全设置 开启服务端口。打开HBuilderX，目录 文件 -> 新建。HBuilderX进行编译发布。

uni-app`在手，做啥都不愁。即使不跨端，`uni-app`也是更好的小程序开发框架（[详见](https://ask.dcloud.net.cn/article/35947)）、更好的App跨平台框架、更方便的H5开发框架。`uni-app` 是一个使用 [Vue.js](https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。