uniapp结合uview-ui创建项目关键步骤一步一图教程

news2025/1/9 21:12:01

文章目录

  • 1 构建项目准备工作
  • 2 项目创建
    • 2.1 打开开发者工具HBuilderX
    • 2.2 创建一个新的项目
    • 2.3 引入uview-ui组件
    • 2.4 uview-ui组件配置
      • 2.4.1 uview-ui组件简单介绍
      • 2.4.2 修改main.js
      • 2.4.3 修改`page.json`
      • 2.4.4 修改`App.vue`
      • 2.4.5 修改uni.scss
      • 2.4.6 修改index.vue
    • 2.5 api接口封装
      • 2.5.1 多环境封装
      • 2.5.2 封装http请求
      • 2.5.3 api接口调用

1 构建项目准备工作

​ 下载开发工具HBuilderX: 官网地址https://www.dcloud.io/hbuilderx.html，下载后安装即可。

​ 安装Node.js:官网地址https://nodejs.org/zh-cn,下载自己需要的版本，安装完成后配置一下环境变量即可。

2 项目创建

2.1 打开开发者工具HBuilderX

​ 双击HBuilderX图标打开开发者工具，打开后的界面如下图

在这里插入图片描述

2.2 创建一个新的项目

​ 点击HBuilderX工具左上角文件F >>>新建 >>>项目

在这里插入图片描述

​ 在打开的界面里面，输入新建项目的名称，本项目是演示的，所以在这里取的名字是dream21th-example,选着构建项目的模板，在这里我们选择默认模板，本次演示采用的vue版本是2。

在这里插入图片描述

​ 上述过程完成之后，点击右下角的创建按钮，就会创建一个项目，项目的目录层次结构如下图所示：

在这里插入图片描述

​ 到这一步，一个简单的uniapp项目就已经创建成功了，后面我们将为项目添加uview-ui组件。

2.3 引入uview-ui组件

​ 选中创建的dream21th-example项目，点击鼠标右键，选择命令行窗口打开所在目录，就是跳出命令行操作界面。如下图所示

在这里插入图片描述

​ 接着在命令行操作行输入下面指令安装uview-ui组件，npm install uview-ui@2.0.36

在这里插入图片描述

​ 安装完成之后，在package-lock.json文件中会有刚才安装的版本信息，在node_modules文件夹下面会包含安装的包。

在这里插入图片描述

2.4 uview-ui组件配置

​ 官网地址：https://www.uviewui.com/components/intro.html

2.4.1 uview-ui组件简单介绍

​ uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。

2.4.2 修改main.js

​ 在main.js文件中增加下面内容引入uview-ui组件

import uView from 'uview-ui'
Vue.use(uView)

在这里插入图片描述

2.4.3 修改page.json

​ 在page.json文件中增加下面内容，引入uview-ui的相关组件

	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

在这里插入图片描述

2.4.4 修改App.vue

​ 修改App.vue文件，在里面增加相关的样式

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>

在这里插入图片描述

2.4.5 修改uni.scss

​ 修改uni.scss文件，覆盖原来的样式

@import 'uview-ui/theme.scss';

在这里插入图片描述

2.4.6 修改index.vue

​ 修改/pages/index/index.vue在里面增加uview-ui的button组件。点击运行>>>到浏览器>>>chrome，看到确定按钮及样式代表成功。

<u-button type="primary" text="确定"></u-button>

在这里插入图片描述

2.5 api接口封装

2.5.1 多环境封装

​ 实际项目会分很多环境，如dev开发环境、local本地环境、prod生产环境等，针对不同环境，其中配置也有不同。我们在创建一个env.js的文件，该文件放到目录common/config下面，具体的内容如下：

// prod-生产 dev-开发 test-测试
const env = "dev"

const prod = {
	baseUrl: 'http://localhost:8081/admin', // 线上环境'
}
const dev = {
	baseUrl: 'http://localhost:8080/admin', // 生产环境'
}

const test = {
	baseUrl: 'http://localhost:8082/admin', // 测试环境'
}

const config = {
	dev,
	prod,
	test,
}

export default config[env]

​ 在main.js文件中，注册env

import config from '@/common/config/env.js'
Vue.prototype.$config = config;

2.5.2 封装http请求

​ 新建目录common/http，在目录里面新建request.js,该文件的具体内容如下：

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
import env from '@/common/config/env.js'
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = env.baseUrl; /* 根域名 */
        config.custom = { catch: true, auth: true }
        return config
    })

    // 请求拦截
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        uni.showLoading({
            title: '加载中'
        });
        // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
        config.data = config.data || {}
        // 根据custom参数中配置的是否需要token，添加对应的请求头
        if(config?.custom?.auth) {
            // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
            //config.header['Access-Token'] = vm.$store.state.token
            config.header['token'] = uni.getStorageSync("token")
        }
        return config
    }, config => { // 可使用async await 做异步操作
        return Promise.reject(config)
    })

    // 响应拦截
    uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
        const data = response.data
        // 自定义参数
        const custom = response.config?.custom
        if (data.code !== '0000') {
            // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
            if (custom.toast !== false) {
                uni.$u.toast(data.msg)
            }
            // 如果是401授权异常则跳转登录
            if('401' == data.code){
                uni.removeStorageSync("token")
                uni.removeStorageSync("userInfo")
                setTimeout(()=>{
                    uni.navigateTo({
                        url: '/pages/login/login'
                    });
                },1000)
            }
            // 如果需要catch返回，则进行reject
            if (custom?.catch) {
                return Promise.reject(data)
            } else {
                // 否则返回一个pending中的promise，请求不会进入catch中
                return new Promise(() => { })
            }
        }
        uni.hideLoading();
        return data === undefined ? {} : data
    }, (response) => {
        // 对响应错误做点什么 （statusCode !== 200）
        uni.$u.toast("工程师被UFO带走了-_-!");
        return Promise.reject(response)
    })
}

​ 引入请求封装，将app参数传递到配置中

// uview-request
require('@/common/http/request.js')(app)

在这里插入图片描述

2.5.3 api接口调用

​ 新建目录common/api，在目录里面新建index.js,在该文件里面编写一个登陆接口：

const http = uni.$u.http
const api = {
    /**
     * 登录
     */
    login(params) {
        return http.post('/user/login', params)
    }
}

export default api;

​ 在main.js文件中，注册api

import api from '@/common/api/index.js'
Vue.prototype.$api = api;

​ 修改index.vue在里面添加一个登陆接口，页面的代码如下：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			<u-button type="primary" text="确定" @click="doLogin"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
            async doLogin(){
				let that = this
				let requestData = {
					"data":{
						mobileNo:'13912345678',
						password:'123456'
					}
				}
				let response = await this.$api.login(requestData)
				console.log(response)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

​ 点击登陆后，可以看到接口响应成功，至此一个uniapp项目创建完成，小伙伴可以进行后面的迭代开发了。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1969360.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

antv x6使用Vue+ElementPlus实现右键菜单

antv x6使用Vue+ElementPlus实现右键菜单

基于X6官方给出的React版的右键菜单示例&#xff0c;实现Vue版本的&#xff0c;其中右键菜单使用的是ElMenu的样式。 import { ToolsView } from antv/x6 import { h, render } from vue import { ElMenu, ElMenuItem } from element-plus export class ContextMenuTool exten…
阅读更多...
公司的Spring框架接受MIME类型为json格式的带null的字符串，然后这个带null的字段被自动忽略了，排查了好久

公司的Spring框架接受MIME类型为json格式的带null的字符串，然后这个带null的字段被自动忽略了，排查了好久

接收方法&#xff1a; 解决方案&#xff1a; 先去掉RequsetBody 因为使用RequsetBody时&#xff0c;框架会调用HttpMessageConvert读取HttpRequest的InputStram反序列化为对象&#xff0c;这个InputStram只能读一次。 后续你的代码再通过Reader读输入流时&#xff0c;已经没有…
阅读更多...
小米SU7对手来了，魅族汽车今年上市

小米SU7对手来了，魅族汽车今年上市

新能源车市场竞争白热化的 2024 年&#xff0c;那些当初一股脑扎堆入场的各路新势力们&#xff0c;估计压根没想到造个车也能这么卷吧&#xff01; 还是那句话&#xff0c;当一个行业开始极度内卷&#xff0c;也就意味着已经到了整个淘汰赛最残酷的环节。 目前来说&#xff0…
阅读更多...
相位相关法图像配准

相位相关法图像配准

小结&#xff1a;本文主要介绍基于相位相关法的图像配准。 1. 相位相关法 在时域中信号的平移运动可以通过在频域中相位的变化表现出来&#xff08;这是傅里叶变换的特性&#xff0c;见下图&#xff09;。平移不影响傅氏变换的幅值&#xff08;谱&#xff09;&#xff0c;对应…
阅读更多...
利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

利用人工智能ChatGPT自动生成基于PO的数据驱动测试框架

简介 PO&#xff08;PageObject&#xff09;设计模式将某个页面的所有元素对象定位和对元素对象的操作封装成一个 Page 类&#xff0c;并以页面为单位来写测试用例&#xff0c;实现页面对象和测试用例的分离。 数据驱动测试&#xff08;DDT&#xff09;是一种方法&#xff0c…
阅读更多...
IOday5

IOday5

一、思维导图 二、练习 使用两个线程完成两个文件的拷贝&#xff0c;分支线程1拷贝前一半&#xff0c;分支线程2拷贝后一半&#xff0c;主线程回收两个分支线程的资源 #include<myhead.h>//定义结构体存储需要传到线程函数中的内容 struct Buf {const char *file[2]; …
阅读更多...
Python爬虫:下载人生格言

Python爬虫:下载人生格言

Python爬虫:下载人生格言 爬取网页 将这些格言下载存储到本地 代码: import requests #导入requests库&#xff0c;用于提取网页 from lxml import etree#导入lxml库&#xff0c;用于Xpath数据解析#请求头 header{ user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) A…
阅读更多...
aurora8b10b ip的使用（未完）

aurora8b10b ip的使用（未完）

文章目录 一、Aurora8B/10B协议二、时钟、复位与状态指示1、时钟2、复位3、状态指示 三、数据发送、接受接口&#xff08;1&#xff09;AXI4-Stream位排序&#xff08;2&#xff09;Streaming接口&#xff08;3&#xff09;Framing接口&#xff08;帧传输接口&#xff09; 四、…
阅读更多...
输入成绩问题（c语言）

输入成绩问题（c语言）

1.问题&#xff1a;期中考试开始了&#xff0c;大家想要取得好成绩&#xff0c;争夺前五名&#xff0c;从键盘输入n个学生成绩&#xff08;不超过40个&#xff09;&#xff0c;输出每组的前五名的成绩 两行&#xff0c;第一行输入一个整数&#xff0c;表示n个学生&#xff08;…
阅读更多...
springboot学习笔记第一天

springboot学习笔记第一天

springboot的简单了解 Java Spring 是一个开源的轻量级应用框架&#xff0c;在 Java 应用开发中起到了简化开发、提高效率、促进模块化和松耦合、支持技术集成等多重作用&#xff0c;成为了广大企业和开发者首选的企业级 Java 应用开发框架之一。 Spring Boot 是一个基于 Spr…
阅读更多...
深度学习中6种loss函数Pytorch API调用示例

深度学习中6种loss函数Pytorch API调用示例

自定义数据 import torch import torch.nn as nn import torch.nn.functional as Fbatchsize2 num_class4logitstorch.randn(batchsize,num_class) targettorch.randint(num_class,size(batchsize,))#delta目标分布 target_logitstorch.randn(batchsize,num_class)#非delta目标…
阅读更多...
浏览器中的同源策略、CORS 以及相关的 Fetch API 使用

浏览器中的同源策略、CORS 以及相关的 Fetch API 使用

前言 笔者对前端 Web 技术的认真学习&#xff0c;其实开始于与 Fetch API 的邂逅。当时觉得 fetch() 的设计很不错&#xff0c;也很希望能够请求其它网站下的数据并作处理和展示。学习过程中 HTML 和 CSS 都还好说&#xff0c;由于几乎没有 Web 技术的基础&#xff0c;学习 Fe…
阅读更多...
vue配置多个环境变量ENV【收藏版】

vue配置多个环境变量ENV【收藏版】

vue配置多个环境变量 1. 创建环境变量文件 在你的Vue项目根目录下&#xff0c;你可以创建以下环境变量文件&#xff1a; .env&#xff1a;所有环境都会加载的通用变量。 .env.local&#xff1a;本地覆盖&#xff0c;不会被git跟踪。 .env.[mode]&#xff1a;只有指定模式才会…
阅读更多...
1007 Maximum Subsequence Sum(Java)

1007 Maximum Subsequence Sum(Java)

题目 解释 题目说的就是给你一串K个数字&#xff0c;让你找到连续的和最大的子串&#xff0c;同时输出子串的和、子串起始的元素、子串末尾的元素&#xff0c;如果K个数字全是负数&#xff0c;输出子串和为0、子串起始元素为整个字符串的第一个元素&#xff0c;子串末尾元素为…
阅读更多...
CompletableFuture并行编程生产问题处理

CompletableFuture并行编程生产问题处理

前提 本文章是在项目中发现一些同学对并行编程的思想理解&#xff0c;或者说对代码的执行逻辑有些理解偏颇的地方。特整理此文章进行分享&#xff0c;希望有同样困惑的小伙伴能够对此类问题有一个清晰的理解。 在此不会介绍CompletableFuture对库函数用法&#xff0c;因为库函数…
阅读更多...
XSS-labs靶场（超详解）1-20关——附原码

XSS-labs靶场（超详解）1-20关——附原码

level1 原码 <!DOCTYPE html><!--STATUS OK--><html> <head> <meta http-equiv"content-type" content"text/html;charsetutf-8"> <script> window.alert function() { confirm("完成的不错&#xff0…
阅读更多...
【Java】字符串StringBuilder类和Stringjoiner类（013）

【Java】字符串StringBuilder类和Stringjoiner类（013）

目录 ♦️StringBuilder类 &#x1f38f;StringBuilder构造方法 &#x1f421;无参构造 &#x1f421;有参构造 &#x1f38f;SringBuilder常用方法 &#x1f38f;StringBuildre类练习题&#xff1a; &#x1f421;对称字符串 &#x1f421;拼装字符串 ♦️Stringjoine…
阅读更多...
（Python）内存管理

（Python）内存管理

前言 内存泄漏在编程中是一个严重的问题&#xff0c;可能导致程序性能下降、系统不稳定甚至崩溃。 目录 危害 风险 动态内存分配 引用计数 内存池 垃圾回收 设计原则 危害 性能下降&#xff1a;可用内存减少&#xff0c;导致系统频繁进行内存交换&#xff0c;使程序运行…
阅读更多...
Netdevops入门之Telnetlib语法案例

Netdevops入门之Telnetlib语法案例

1、Telnetlib模块&#xff1a; 支持telnet/ssh远程访问的模块很多&#xff0c;常见的有telnetlib、ciscolib、paramiko、netmiko、pexpect,其中telnetlib和ciscolib对应telnet协议&#xff0c;后面3个对应SSH协议。 ①-通过ENSP环境搭建实验环境 ②-基础语法-telnetlib案例1&…
阅读更多...
最优控制、轨迹优化相关笔记、感悟

最优控制、轨迹优化相关笔记、感悟

写在前面 上学期和最近无聊在看一些最优控制、轨迹优化相关的内容&#xff0c;涉及到MIT Russ Tedrake教授的Underactuated Robotics&#xff0c;以及CMU Zachary Manchester教授的Optimal Control&#xff08;两套课程其实挺像的&#xff09;&#xff0c;加起来估计也看了十多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023