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

拼搏现实的明天。 2024-05-11 09:07 62阅读 0赞

#### 文章目录 ####

*   *  前言
     *   *  ?缘由
         *   *  博友有问，狗哥必答
         *  ?主要目标
         *   *  实现4大重点
     *  ?快速链接
     *   *  公众号：JavaDog程序狗
         *  ?猜你喜欢
         *   *  文章推荐
         *  ?猜你想问
         *   *  如何与狗哥联系进行探讨
     *  正文
     *   *  ?前置条件
         *   *  1.HBuilderX
             *  2.npm Node.js 包管理工具
         *  ?开始
         *   *  1.打开工具
             *  2.创建新项目
             *  3.引入组件
             *  4.组件配置
             *  5.函数封装
         *  ?补充
     *  总结

### 前言 ###

#### ?缘由 ####

##### 博友有问，狗哥必答 #####

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

![在这里插入图片描述][f9fbba16bb794bbb9d9067321313d9fe.png]

--------------------

#### ?主要目标 ####

##### 实现4大重点 #####

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

--------------------

### ?快速链接 ###

#### 公众号：JavaDog程序狗 ####

**关注公众号，发送 【uniapp】，无任何套路即可获得**  
![在这里插入图片描述][4d10fa66b91743269edf08723580c4ed.png]

--------------------

#### ?猜你喜欢 ####

##### 文章推荐 #####

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

--------------------

#### ?猜你想问 ####

##### 如何与狗哥联系进行探讨 #####

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

![在这里插入图片描述][4b6fe928a8ff44dd9b91d57d81cb21a9.png]

### 正文 ###

#### ?前置条件 ####

##### 1.HBuilderX #####

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

##### 2.npm Node.js 包管理工具 #####

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

#### ?开始 ####

##### 1.打开工具 #####

双击打开HBuilder X  
![在这里插入图片描述][6504c424fd74444d92f65d6606e90849.png]

--------------------

##### 2.创建新项目 #####

*  点击HBuilder X工具左上角【文件】=》【新建】=》【项目】

![在这里插入图片描述][6c120704948b44dcbc47af1f491a016f.png]

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

![在这里插入图片描述][0f599039bc5c417e9bb89142bcf58de2.png]

*  初始化项目结构如下  
    ![在这里插入图片描述][8649dc7ff8f849139b7f45eb4eea796b.png]

--------------------

##### 3.引入组件 #####

*  本狗在uniapp项目中，常用UI库及常用工具引入，小项目基本够用，大家可**按需加载**

<table> 
 <thead> 
  <tr> 
   <th>插件</th> 
   <th>版本</th> 
   <th>用途</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>uview-ui</td> 
   <td>^2.0.31</td> 
   <td>多平台快速开发的UI框架</td> 
  </tr> 
  <tr> 
   <td>moment</td> 
   <td>^2.29.4</td> 
   <td>js工具库</td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][c5e350db5b19491b91a68a76ede4def2.png]

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

![在这里插入图片描述][d86ae56d5fee41e6a22ec585367d8342.png]

*  项目根路径新建package.json，配置上述依赖组件

{
        
      "dependencies": {
        
        "moment": "^2.29.4",
        "uview-ui": "^2.0.31"
      }
    }

![在这里插入图片描述][6d11b6668723499c98e35f13af9767cc.png]

*  项目根路径下拉取依赖

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

![在这里插入图片描述][d695ffacbbfd4c9183a04cbdd1e964dd.png]

> npm i  
> ![在这里插入图片描述][9c56a41c6037489aa668ac539666d5b0.png]  
> 查看成功拉取依赖  
> ![在这里插入图片描述][b63aa23caef1432db532a659191e66c8.png]

--------------------

##### 4.组件配置 #####

*  配置uview

1.  在**App.vue**中引入uview的scss  
    ![在这里插入图片描述][5b0cac12cedb49a7b4b40f4ba68a01fc.png]
2.  在**main.js**中引入uview

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

![在这里插入图片描述][a11f2c25a4d048ba97cece960a3918da.png]

1.  将根路径下**uni.scss**中，将uview的theme.scss 覆盖uniapp默认内置样式

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

![在这里插入图片描述][b43b9c1a1ec84a74a9ed07738fe480e2.png]

1.  在pages.json中加入easycom

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

![在这里插入图片描述][66f8054e7bbb4c9a815ef9e20ac3bd3b.png]

1.  加入uview组件，在/pages/index/index.vue加入简单button组件

<u-button type="primary" text="测试"></u-button>

![在这里插入图片描述][099f250e2f8d420eb4353003045d6b7b.png]

1.  启动项目，测试是否引入成功  
    点击【运行】=》【运行到浏览器】=》【chrome】，打开显示button即为成功  
    ![在这里插入图片描述][d9ab4a11f748420e94a8b5ab1f64b275.png]  
    ![在这里插入图片描述][de00acdc9a1c4a2dbb2df4c1938b85f7.png]

--------------------

*  配置moment

1.  在**main.js**中引入moment

// 引入moment
    import moment from 'moment';
    // 挂载到vue原型上，全局注册
    Vue.prototype.$moment = moment;

![在这里插入图片描述][53563275ae354f839938b3f410c1745e.png]

1.  /pages/index/index.vue中引入moment，调试组件

<h3>{
       {$moment(new Date()).format('yyyy-MM-DD HH:mm:ss')}}</h3>

![在这里插入图片描述][1a2a548ef6bd41789554792f7f97bc5d.png]

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

![在这里插入图片描述][a22e04b049e84472a58b1cb21ccfd06e.png]

--------------------

##### 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]

![在这里插入图片描述][0ebfe1334ed64991877996f0d1112f67.png]  
挂载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][https_www.uviewui.com_js_http.html]

![在这里插入图片描述][4d6059d937454010ac17d1645197f502.png]  
新建\\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)
        })
    }

![在这里插入图片描述][5059657cb5694773bf03c30183a4d7ec.png]

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

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

![在这里插入图片描述][5e5dd71d762b457a9556fabd47e5a3b2.png]

--------------------

*  API接口

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

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

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

![在这里插入图片描述][1ca09f686b184789b6d2e4116d268133.png]

> 挂载vue原型，全局注册api

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

![在这里插入图片描述][d2a881eebda04bb0a61ff21b7fb4953e.png]

*  最终调试

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

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

--------------------

#### ?补充 ####

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

### 总结 ###

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

![在这里插入图片描述][e74f3636c05a430eab8819333fa004eb.jpeg]

<table> 
 <thead> 
  <tr> 
   <th align="center">JavaDog</th> 
   <th align="center">狗屋地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">个人博客</td> 
   <td align="center"><a href="https://blog.javadog.net" rel="nofollow">https://blog.javadog.net</a></td> 
  </tr> 
  <tr> 
   <td align="center">公众号</td> 
   <td align="center"><a href="https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw" rel="nofollow">https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw</a></td> 
  </tr> 
  <tr> 
   <td align="center">CSDN</td> 
   <td align="center"><a href="https://blog.csdn.net/baidu_25986059" rel="nofollow">https://blog.csdn.net/baidu_25986059</a></td> 
  </tr> 
  <tr> 
   <td align="center">掘金</td> 
   <td align="center"><a href="https://juejin.cn/user/2172290706716775" rel="nofollow">https://juejin.cn/user/2172290706716775</a></td> 
  </tr> 
  <tr> 
   <td align="center">知乎</td> 
   <td align="center"><a href="https://www.zhihu.com/people/JavaDog" rel="nofollow">https://www.zhihu.com/people/JavaDog</a></td> 
  </tr> 
  <tr> 
   <td align="center">简书</td> 
   <td align="center"><a href="https://www.jianshu.com/u/1ff9c6bdb916" rel="nofollow">https://www.jianshu.com/u/1ff9c6bdb916</a></td> 
  </tr> 
  <tr> 
   <td align="center">gitee</td> 
   <td align="center"><a href="https://gitee.com/javadog-net" rel="nofollow">https://gitee.com/javadog-net</a></td> 
  </tr> 
  <tr> 
   <td align="center">GitHub</td> 
   <td align="center"><a href="https://github.com/javadog-net" rel="nofollow">https://github.com/javadog-net</a></td> 
  </tr> 
 </tbody> 
</table>

[f9fbba16bb794bbb9d9067321313d9fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ba204e7353d94ed2af8b3abd9d99b1b2.png
[4d10fa66b91743269edf08723580c4ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ddfe945d5fe54f1daa99b29d8680123b.png
[SpringBoot_vue_iview]: https://mp.weixin.qq.com/s/fbpVBQVe-4nHdjt5PBdwSw
[SpringBoot_uniapp_uview2_H5_APP]: https://mp.weixin.qq.com/s/g7AZOWLgW5vcCahyJDEPKA
[SpringBoot_uniapp_uview2]: https://mp.weixin.qq.com/s/t_qwF_HvkdW-6TI3sYUHrA
[SpringBoot]: https://mp.weixin.qq.com/s/fpkiNR2tj832a6VxZozwDg
[ChatGPT_ChatGPT]: https://mp.weixin.qq.com/s/9wEelbTN6kaChkCQHmgJMQ
[ChatGPT_SpringBoot_uniapp_uview2_OpenAI_ChatGPT]: https://mp.weixin.qq.com/s/b19J36Eo3-ba7bHbWzoZYQ
[4b6fe928a8ff44dd9b91d57d81cb21a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/4b192b50cbde4906b13efbc89ea2c447.png
[IDE]: https://www.dcloud.io/hbuilderx.html
[6504c424fd74444d92f65d6606e90849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ee2a0d2351a74dde9cf879f3061ae98f.png
[6c120704948b44dcbc47af1f491a016f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/2fa02cce82404c279cfe42c65997ec0f.png
[0f599039bc5c417e9bb89142bcf58de2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/7cea786a31754a4fb453172356c8fc1d.png
[8649dc7ff8f849139b7f45eb4eea796b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/dfd879dfb0264d488e26a0dce318a770.png
[uView UI]: https://www.uviewui.com/
[c5e350db5b19491b91a68a76ede4def2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/967f59d2dcdb404ea56ad3effa811d9e.png
[moment]: http://momentjs.cn/
[d86ae56d5fee41e6a22ec585367d8342.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/a8f2c64486c2482795f632102c5834d9.png
[6d11b6668723499c98e35f13af9767cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/cf1eb167fd27415a947c3bf6ef22955c.png
[d695ffacbbfd4c9183a04cbdd1e964dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d4b2ba7e698a41f99c0d65b4120e1cf6.png
[9c56a41c6037489aa668ac539666d5b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/55acec2869e34adb813d7f11c0483444.png
[b63aa23caef1432db532a659191e66c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/c573b19f2e4049ab9459f0e8327fc61d.png
[5b0cac12cedb49a7b4b40f4ba68a01fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/616a5533f1f444d282e5905aed6c14c4.png
[a11f2c25a4d048ba97cece960a3918da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/4d84ca69a9b942f79153aa45c2788a9e.png
[b43b9c1a1ec84a74a9ed07738fe480e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/344278f8b801438f96da98c5b8233cf3.png
[66f8054e7bbb4c9a815ef9e20ac3bd3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/2f652945c3694aa5b91c66e0413b6f84.png
[099f250e2f8d420eb4353003045d6b7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/b4a2a5ea822b43f99cb3669c4fdbb539.png
[d9ab4a11f748420e94a8b5ab1f64b275.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/a6057cedc9314ef098ec30f4c2c833c8.png
[de00acdc9a1c4a2dbb2df4c1938b85f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/bfffc2f75b5e486db1aa0f1c24b1cfd1.png
[53563275ae354f839938b3f410c1745e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/92abdd68aabd478a9f65b851b2ee5721.png
[1a2a548ef6bd41789554792f7f97bc5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/6935621dab6a4a26a483ea17f06b9beb.png
[a22e04b049e84472a58b1cb21ccfd06e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/dfea6fbbe70c47ac89a27fcefa02700d.png
[0ebfe1334ed64991877996f0d1112f67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/05c5098a3ce94e98b2f8a3676b369e04.png
[https_www.uviewui.com_js_http.html]: https://www.uviewui.com/js/http.html
[4d6059d937454010ac17d1645197f502.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/28e44f19bc67499495082270075d0eec.png
[5059657cb5694773bf03c30183a4d7ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ca414c24ba9348cfb01908830b97cfbc.png
[5e5dd71d762b457a9556fabd47e5a3b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/e8159f743f9e433fa8e57abb13645b72.png
[1ca09f686b184789b6d2e4116d268133.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/458a2bff1fc545a3b85e7631dfd8a2ca.png
[d2a881eebda04bb0a61ff21b7fb4953e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/944d01fb214d4102b507711bb01c0af7.png
[f39e17e9f28b45afbf1813c8e603f553.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/669b8ba2c9a7406798d2d8ff0a756824.png
[76bd9865677b4ab0b33d4d13fdb2e45e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d568688bf8b54435b732d85f1badda1d.png
[e74f3636c05a430eab8819333fa004eb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/60f1f7a1386c40a5a2a403fa825a3c6b.jpeg