关于前端:有问必答搭建uniapp项目流程手把手教学

前言

🍊原因

博友有问，狗哥必答

前段时间，博友加本狗微信，询问 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，是全面兼容 nvue 的uni-app 生态框架，其中还蕴含API 相干 JS 函数，不便封装易用。

moment 是 工夫 js 工具库，罕用工夫转化格式化等

• 我的项目根门路新建 package.json，配置上述依赖组件

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

• 我的项目根门路下拉取依赖

  右击我的项目根目录，点击【应用命令行窗口关上所在目录】，或者通过命令行进入我的项目门路都可

npm i

查看胜利拉取依赖

4. 组件配置

• 配置 uview
• 在 App.vue 中引入 uview 的 scss

• 在 main.js 中引入 uview

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

3. 将根门路下 uni.scss 中，将 uview 的 theme.scss 笼罩 uniapp 默认内置款式

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

4. 在 pages.json 中退出 easycom

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

5. 退出 uview 组件，在 /pages/index/index.vue 退出简略 button 组件

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

6. 启动我的项目，测试是否引入胜利
   点击【运行】=》【运行到浏览器】=》【chrome】，关上显示 button 即为胜利

   ---

7. 配置 moment
8. 在 main.js 中引入 moment

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

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

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

3. 查看页面是否引入 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 的罕用流程。其实重点在于对 官网文档 的了解，不论什么我的项目，什么框架，只有 吃透文档 ，任何常见的疑难问题都会迎刃而解。心愿宽广博友们在奋笔疾书的搬砖的同时，肯定重视 官网文档 的翻阅和总结。