uni

2023-07-31 21:44| 来源: 网络整理| 查看: 265

demo 地址: https://github.com/iotjin/jh-uniapp-demo

本地数据存储：uni-app - 网络请求和数据存储工具类自定义navbar：uni-app - 基于uView的base-navbar实现全局常量和变量设置：uni-app - 全局常量和变量 scss的配置及使用：uni-app - 使用scss动态配置宫格布局

在这里插入图片描述 uni-app官网 uni-app插件市场 uni-app论坛 HBuilderX下载地址官网介绍：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uni-app开发规范为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范，详见uni-app 组件规范接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期为兼容多端运行，建议使用flex布局进行开发

博主觉得uni-app 较适合有多端开发需求或者支持多个小程序的项目，了解h5和Vue即可快速上手，懂小程序更佳，基本可以直接上手。推荐使用官方编译器HBuilderX进行开发。如果要支持多端尽量选择多端兼容较好的插件，否则之后会遇坑不断本项目使用的通用插件：uni-ui和uView UI 小程序端用的vant weapp

uni-app的页面结构、数据绑定及事件处理类似vue，只不过标签由div换成了view 组件、生命周期、api调用方法类似小程序组件内部生命周期同vue 一些vue的方法在移动端可能不支持

1、项目结构 ├── common │ ├── configs │ ├── libs │ ├── style │ └── utils ├── components ├── dataManager │ └── userDataManager.js ├── http │ ├── apiConfig.js │ └── httpUtils.js ├── hybrid │ └── html ├── node_modules │ └── uview-ui ├── pages │ ├── index │ ├── login │ ├── module1 │ ├── module2 │ ├── module3 │ └── module4 ├── platforms │ └── app-plus ├── static │ ├── fonts │ ├── images ├── uni_modules ├── unpackage ├── wxcomponents │ └── vant ├── App.vue ├── main.js ├── manifest.json ├── package-lock.json ├── package.json ├── pages.json ├── uni.scss 2、创建uni-app项目

在点击工具栏里的文件 -> 新建 -> 项目

在这里插入图片描述

生成一个包含 uni ui的项目模板，下图是默认的项目结构

在这里插入图片描述然后1、项目结构进行扩充

3、安装uView UI 3.1、安装

进入uView UI 官网>npm安装，按文档操作

在这里插入图片描述

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令： // npm init -y // 安装 npm install uview-ui // 更新 npm update uview-ui 3.2、npm配置

进入uView UI 官网>npm配置，按文档操作

在这里插入图片描述

关于配置easycom组件模式，要注意npm和下载安装的配置不一样

"easycom": { // npm方式安装的配置 "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" // 下载安装方式配置 // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue", }, 在这里插入图片描述 4、项目结构调整

然后按照1、项目结构扩充项目结构其中一级目录下的components、hybrid、platforms、static、uni_modules、 unpackage、wxcomponents文件夹都有特殊意义，尽量不要改文件名称

5、新建页面

在pages>module1文件夹右键>新建页面，依次创建主页面

在这里插入图片描述

6、pages.json配置

pages.json 文件介绍

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

6.1、导航条设置

可在pages.json设置导航条名称，也可动态设置

在这里插入图片描述

6.2、tabbar设置

主要通过pagePath和页面进行绑定

在这里插入图片描述

7、登录页

添加一个登录页，会有一个默认的导航条，在page把导航条背景色改成白色即可 APP启动之后，先判断是否登录，本项目通过判断本地是否存有用户信息，有的话跳转到主页面，没有跳转到登录页

本地数据存储可看：uni-app - 网络请求和数据存储工具类自定义navbar可看：uni-app - 基于uView的base-navbar实现全局常量和变量设置可看：uni-app - 全局常量和变量

在这里插入图片描述

至此，一个通用项目框架搭建结束

【本文地址】

公司简介

联系我们