【有问必答】搭建uniapp项目流程手把手教学

已于 2024-04-28 16:11:22 修改
阅读量564 收藏 5
点赞数 1
分类专栏： # uni-app 文章标签： uni-app 前端 vue.js
于 2023-04-28 10:24:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_25986059/article/details/130389854
版权

文章目录

前言

🍊缘由

博友有问，狗哥必答

前段时间，博友加本狗微信，询问uniapp的学习方法。本狗资历浅薄，没有专门学过uniapp，只能将自己日常开发uniapp的基本流程和步骤进行分享，希望可以略尽绵薄之力。感谢如下图所示的博友朋友的询问支持，大家的支持才是我进步的动力。

在这里插入图片描述

🎯主要目标

实现4大重点
  1. uniapp项目搭建流程
  2. uniapp项目常用组件引入方式
  3. uniapp项目接口封装策略
  4. uniapp项目常用配置整理

🎁快速链接

公众号：JavaDog程序狗

关注公众号，发送 【uniapp】，无任何套路即可获得
在这里插入图片描述

🍯猜你喜欢

文章推荐

【项目实战】SpringBoot+vue+iview打造一个极简个人博客系统
【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！
【ChatGPT】手摸手，带你玩转ChatGPT
【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT

🍈猜你想问

如何与狗哥联系进行探讨

关注公众号【JavaDog程序狗】，里面包含狗哥联系方式，有问必答

在这里插入图片描述

正文

🏀前置条件

1.HBuilderX

官方IDE下载地址 https://www.dcloud.io/hbuilderx.html

2.npm Node.js 包管理工具

安装Node等相关百度即可，简单易懂

🍄开始

1.打开工具

双击打开HBuilder X
在这里插入图片描述

2.创建新项目
  • 点击HBuilder X工具左上角【文件】=》【新建】=》【项目】

在这里插入图片描述

  • 按照项目业务起名，如聊天系统就叫chat-uniapp，博客系统就叫blog-uniapp，这个地方不强制，个人习惯，本次实例以example-unipp作为项目名，选择默认模板，示例以vue2版本做基础，点击【创建】

在这里插入图片描述

  • 初始化项目结构如下
    在这里插入图片描述
3.引入组件
  • 本狗在uniapp项目中，常用UI库及常用工具引入，小项目基本够用，大家可按需加载
插件版本用途
uview-ui^2.0.31多平台快速开发的UI框架
moment^2.29.4js工具库

uView UI，是全面兼容nvue的uni-app生态框架，其中还包含API相关JS函数，方便封装易用。

在这里插入图片描述

moment是时间js工具库，常用时间转化格式化等

在这里插入图片描述

  • 项目根路径新建package.json，配置上述依赖组件
{
  "dependencies": {
    "moment": "^2.29.4",
    "uview-ui": "^2.0.31"
  }
}

在这里插入图片描述

  • 项目根路径下拉取依赖

右击项目根目录，点击【使用命令行窗口打开所在目录】，或者通过命令行进入项目路径都可

在这里插入图片描述

npm i
在这里插入图片描述
查看成功拉取依赖
在这里插入图片描述

4.组件配置
  • 配置uview
  1. 在App.vue中引入uview的scss
    在这里插入图片描述
  2. 在main.js中引入uview
import uView from 'uview-ui'
Vue.use(uView)

在这里插入图片描述

  1. 将根路径下uni.scss中，将uview的theme.scss 覆盖uniapp默认内置样式
/* uni.scss */
@import 'uview-ui/theme.scss';

在这里插入图片描述

  1. 在pages.json中加入easycom
"easycom": {
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

在这里插入图片描述

  1. 加入uview组件，在/pages/index/index.vue加入简单button组件
<u-button type="primary" text="测试"></u-button>

在这里插入图片描述

  1. 启动项目，测试是否引入成功
    点击【运行】=》【运行到浏览器】=》【chrome】，打开显示button即为成功
    在这里插入图片描述
    在这里插入图片描述
  • 配置moment
  1. 在main.js中引入moment
// 引入moment
import moment from 'moment';
// 挂载到vue原型上，全局注册
Vue.prototype.$moment = moment;

在这里插入图片描述

  1. /pages/index/index.vue中引入moment，调试组件
<h3>{{$moment(new Date()).format('yyyy-MM-DD HH:mm:ss')}}</h3>

在这里插入图片描述

  1. 查看页面是否引入moment成功

在这里插入图片描述

5.函数封装
  • 环境变量

实际项目会分很多环境，如dev开发环境、local本地环境、prod生产环境等，针对不同环境，其中配置也有不同

在根路径下新建common/config文件包，在包中新建env.js

// prod-生产 dev-开发 local-本地
const env = "local"
// contextPath路径
const contextPath = "example/v1"

const prod = {
	baseUrl: `https://localhost:9001/${contextPath}`, // 线上环境'
}
const dev = {
	baseUrl: `http://localhost:7001/${contextPath}`, // 开发环境'
}
const local = {
	baseUrl: `http://localhost:8001/${contextPath}`, // 测试环境'
}

const config = {
	dev,
	prod,
	local,
}
export default config[env]

在这里插入图片描述
挂载vue原型，全局注册config

import config from '@/common/config/env.js'
Vue.prototype.$config = config;
  • Http请求

通常将项目中与后台交互中Http请求做封装

因本项目采用uview为UI组件库，内置很多API函数，直接摘取成熟框架中函数封装即可，如Http请求
https://www.uviewui.com/js/http.html

在这里插入图片描述
新建\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['Access-Token'] = uni.getStorageSync("access_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 !== 200) {
            // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
            if (custom.toast !== false) {
                uni.$u.toast(data.message)
            }
            // 如果是401授权异常则跳转登录
            if(401 == data.code){
                uni.removeStorageSync("Access-Token")
                uni.removeStorageSync("userInfo")
                setTimeout(()=>{
                    uni.navigateTo({
                        url: '/pages/login/index'
                    });
                },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参数传递到配置中

// 引入请求封装，将app参数传递到配置中
require('@/common/http/request.js')(app)

在这里插入图片描述

  • API接口

通常将项目中与后台交互的api接口统一管理

新建\common\api包，在包中新建index.js，其中举例login接口

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

export default api;

在这里插入图片描述

挂载vue原型，全局注册api

import api from "@/common/api"
Vue.prototype.$api = api;

在这里插入图片描述

  • 最终调试

在/pages/index/index.vue加入简单交互，点击按钮调用接口

在这里插入图片描述
接口调用成功，返回值打印
在这里插入图片描述
调试成功后，即可根据业务需求填充内容，丰富页面，迭代开发

😋补充

以上流程均是本狗常用流程，不代表标准，大家可以根据习惯自行调整，UI或工具选择，挑选完全依赖于功能，适合自己的才是最好的。再啰嗦一句，本狗还是喜欢采用webstorm进行开发，然后用HBuilderX进行编译，个人喜好，只是推荐。

总结

本文旨在通过本狗平时项目开发习惯，总结出一套搭建uniapp的常用流程。其实重点在于对官网文档的理解，不管什么项目，什么框架，只要吃透文档，任何常见的疑难问题都会迎刃而解。希望广大博友们在奋笔疾书的搬砖的同时，一定注重官网文档的翻阅和总结。

在这里插入图片描述

JavaDog狗屋地址
个人博客https://blog.javadog.net
公众号https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw
CSDNhttps://blog.csdn.net/baidu_25986059
掘金https://juejin.cn/user/2172290706716775
知乎https://www.zhihu.com/people/JavaDog
简书https://www.jianshu.com/u/1ff9c6bdb916
giteehttps://gitee.com/javadog-net
GitHubhttps://github.com/javadog-net
JavaDog程序狗
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uniApp项目创建
m0_67388537的博客
07-15 2993
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。
uniapp创建项目入门【详细】
qq_63656102的博客
08-07 1042
大家在学习vue和微信小程序之后，就可以开始来学习uniapp了，在uniapp中，一套代码可以跨越所有的平台，可以很方便的维护。接下来我们先来学习如何创建uinapp的项目。
手把手带你从0到1创建一个uniapp项目，包学包会。
qq_66180056的博客
05-19 4574
uniapp官方文档uni-app的基本使用基础部分：+ 环境搭建+ 页面外观配置+ 数据绑定+ uni-app的生命周期+ 组件的使用+ uni-app中样式学习+ 在uni-app中使用字体图标和开启scss+ 条件注释跨端兼容+ uni中的事件+ 导航跳转+ 组件创建和通讯，及组件的生命周期+ uni-app中使用uni-ui库项目：购物项目##### uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource)
uni-app 项目搭建流程指南
Big_YiFeng的博客
07-15 3768
一般是选择默认模板或者uni-ui项目（uni-ui是一个uni的ui组件库，还是很好用的），然后点击下面的创建。
uni-app的基本搭建使用详解
YM_010530的博客
10-02 2517
本次带大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置，内容侧重于动手操作，需要理解的部分较少，操作过程中遇到错误后，可以从头重新进行操作，直到环境正常运行。在创建的项目中可以看到 Vue 的单文件组件，即 uni-app 创建的项目本质上就是 Vue 的项目，代码逻辑的细节我暂时先不去分析，先来看看 uni-app 的项目是如何启动的。H5 端运行有两种方式，一种是运行到浏览器，另一种是运行到内置浏览器，当选择内置浏览器时会提示安装【内置浏览器】插件。
有问必答网解封教程教学
12-23
有问必答网解封教程有问必答网解封教程，详细说明解封
Media有问必答客服系统 v3.1
03-25
集问题处理实时状态监控和在线交流为一体，是网站客服人员提供在线咨询服务的理想工具，特点介绍: 1、可以使用独立的用户库，也可以同步使用已有的会员数据库 2、自定义问题类型，不同问题类型可设置不同提问表单 ...
快捷有问必答 v3.1
03-26
"快捷有问必答 v3.1" 是一个基于ASP技术构建的问答系统，主要用于网站交互和信息查询。ASP（Active Server Pages）是微软开发的一种服务器端脚本环境，允许开发者创建动态网页并处理服务器端的数据。这个版本v3.1...
006.Docker有问必答1
08-08
分析：多次反复构建同一名称的镜像时，每次都会得到一个新的IMAGE ID，假如后面的repository:tag没有变，通过docker images可以看到，
uniapp项目创建
qq_45796592的博客
02-18 1050
uniapp配置
uni-app 从0 到 1 制作一个项目，收藏等于学会
前端人的博客
08-16 5957
uni-app 是使用 vue.js 开发的所有前端应用框架，开发者编写的一套代码，可以发布到 ios、android、web ，以及各种小程序平台。
uniapp创建/运行/发布项目
weixin_45618535的博客
12-25 5719
运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
uniapp从入门到精通（全网保姆式教程）~ 别再说你不会开发小程序了
热门推荐
路漫漫其修远兮，吾将上下而求索
08-20 5万+
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：页面文件遵循Vue单文件组件规范组件标签靠近小程序规范，详细见uni-app组件规范接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期为兼容多端运行，建议使用flex布局进行开发。
uniapp 使用命令行创建项目及使用命令行打包H5 以及使用HBuilder X创建的老项目升级为可使用命令行打包的项目
zhuxichong123的博客
07-06 8603
13.再运行，终于不报错了，但是 ，项目中使用的 uni-simple-router和uni-read-pages来封装的路由器拦截失效了 纠其原因， uni-simple-router在vue-cli版本中 需要添加额外的配置项。这个bug是真坑~ 小小吐槽一下。9.老项目里的vue.config.js要拿出来 放到根目录下面来，老项目安装的一下依赖 需要在新项目重新安装，复制老项目下的package.json的依赖到新项目下 的package.json里，然后重新执行npm install。
【前端技术】uni-app 01：快速开始
尹煜的博客
06-23 1258
uni-app是基于Vue.js开发的跨平台应用开发框架，可将一套代码同时运行在iOSAndroidH5小程序等多个平台，开发者只需编写一次代码即可轻松实现跨平台应用的开发。简单来说，uni-app类似于三头六臂的哪吒，一个框架干了appweb和小程序的活，简直是不给其他框架活路呀~
uni-app项目创建
toodes的博客
05-13 1146
什么是 uni-appuni-app是一种跨平台开发框架，可以将代码一次性编写，再转换为多个平台上的应用程序，包括iOS、Android、H5和微信小程序等。uni-app基于Vue.js框架，提供了一系列的组件和API，方便开发者进行快速开发。它还支持各种第三方插件和扩展，以满足不同应用场景的需求。
uni-APP项目开发
m0_71540335的博客
06-14 1460
在项目中manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。阮一峰的flex教程：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。Vue官网：https://cn.vuejs.org/v2/guide/static静态资源目录，例如图片等。
uniapp项目的编译运行
12程序猿的博客
12-07 2万+
这里写目录标题一、准备工作二、编译运行1.使用HBuilder X 软件打开uniapp项目2.点击菜单栏“运行”---》运行到小程序模拟器---》微信开发者工具（W）3.编译过程中，安装必要的插件4.插件安装完成后，重新编译5.编译成功6.使用开发者工具导入该uniapp项目，即可运行 一、准备工作 uniapp项目 安装HBuilder X 软件 安装npm 运行环境 二、编译运行 步骤： （1）使用HBuilder X 软件打开uniapp项目 （2） 点击菜单栏“运行”—》运行到小程序模拟器—》微信
uni-app---项目的开发全流程（1、项目搭建）
Anorry的博客
08-10 1344
uni-app 是一个使用 vue 开发所有前端应用的框架，开发者编写一套到吗，可发布到ios，安卓、H5、以及各种小程序（微信、支付宝等等...）多个平台。
有问必答html代码
最新发布
07-06
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它本身并不能直接实现“有问必答”的效果，因为这是服务器端编程或JavaScript等前端技术的功能。但在网页上构建问答形式，你可以使用HTML结合其他技术如JavaScript来实现。下面是一个基本的HTML结构示例，展示了一个简单的文本输入框和按钮，用户可以提问，然后提交到服务器处理： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>有问必答</title> </head> <body> <h2>请输入问题：</h2> <form id="questionForm"> <input type="text" id="userQuestion" placeholder="请输入你的问题..."> <button type="submit">提交</button> </form> <!-- 这部分通常由服务器响应或JavaScript异步处理 --> <div id="responseContainer"></div> <script> document.getElementById('questionForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 var userQuestion = document.getElementById('userQuestion').value; // 实际的异步请求这里需要你自己实现，比如AJAX或fetch API fetch('/api/ask', { method: 'POST', body: JSON.stringify({ question: userQuestion }), headers: { 'Content-Type': 'application/json' } }) .then(response => response.text()) .then(data => { // 更新响应容器显示服务器返回的答案 document.getElementById('responseContainer').innerText = data.answer; }); }); </script> </body> </html> ``` 在这个例子中，当用户点击提交时，会发送一个POST请求到`/api/ask`，实际的服务器端逻辑需要后端技术去处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JavaDog程序狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值