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

这篇具有很好参考价值的文章主要介绍了【有问必答】搭建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 ^2.0.31 多平台快速开发的UI框架
moment ^2.29.4 js工具库

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的常用流程。其实重点在于对官网文档的理解,不管什么项目,什么框架,只要吃透文档,任何常见的疑难问题都会迎刃而解。希望广大博友们在奋笔疾书的搬砖的同时,一定注重官网文档翻阅和总结文章来源地址https://www.toymoban.com/news/detail-427939.html

JavaDog 狗屋地址
个人博客 https://www.javadog.net
公众号 https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw
CSDN https://blog.csdn.net/baidu_25986059
掘金 https://juejin.cn/user/2172290706716775
知乎 https://www.zhihu.com/people/JavaDog
简书 https://www.jianshu.com/u/1ff9c6bdb916
gitee https://gitee.com/javadog-net
GitHub https://github.com/javadog-net

到了这里,关于【有问必答】搭建uniapp项目流程手把手教学的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置

    ✨ 原创不易,还希望各位大佬支持一下! 👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 打开uniapp的开发工具(HBuilder X),点击左上角的文件》新建》项目 选择左侧栏的uniapp(一般默认打开就是),然

    2024年02月09日
    浏览(40)
  • 【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目

    一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli 安装报错 ​ 如果安装报错如下 npm i -g @vue/cli 安装报错解决方案 ​ 查看vue版本 vue -V ,主要原因是安装vue的版本过低。 ​ 输入以下命令 ,可以强制覆盖以前旧版本的vue-cli脚手架。 ​ 执行完,

    2023年04月17日
    浏览(52)
  • 全网最新项目:会说话的汤姆猫直播搭建教程(附教学流程)

    今天为大家分享一个 汤姆猫直播搭建项目 ,这个项目最近可以说在圈内爆火,我相信很多朋友以前应该都玩过,或者说给自己家小孩子玩过。 -------------------------------------------------------------------- 课程获取:www.yn521.cn/160852.html ----------------------------------------------------------------

    2024年02月15日
    浏览(46)
  • uni-app+vue3+ts项目搭建完整流程

    项目代码同步更新至码云 uni-vue3-ts-template 利用 uni-app 开发,有两种方法: 通过 HBuilderX 创建(需安装 HBuilderX 编辑器) 通过命令行创建(需安装 NodeJS 环境),推荐使用 vscode 编辑器 这里我们使用第2种方法,这两种方法官方都有详细介绍 点击查看官方文档 安装 Vue3 插件,点

    2024年02月03日
    浏览(74)
  • Android开发-Android项目Jenkins自动化打包流程搭建与配置

    由于之前公司的 Android 项目需要 APK 自动打包的功能,所以需要搭建 Jenkins 自动化打包的功能。 Jenkins 是一个用于自动化构建、测试和部署软件项目的开源持续集成和持续交付(CI/CD)工具。它提供了一个可扩展的平台,可以帮助开发团队更快地构建、测试和交付他们的应用程

    2024年02月08日
    浏览(43)
  • vue3+ts+vite 搭建uniapp项目(微信小程序)

    模板下载: uniapp 官网通过vue-cli 命令行创建uniapp,参考uni-app官网,使用  npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 下载模板; 安装css预处理 sass: 项目终端输入: yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass (模板没有默认安装sass, 如果不安装直接使用会报错)  安装uni-ui组件

    2024年02月09日
    浏览(58)
  • uniapp + vue3.0 + uview-plus3.0搭建项目

    创建 利用工具导入插件  说明已经导入 1、先安装插件 uview-plus依赖SCSS,需要先下载sass 和 sass-loader npm install sass sass-loader@10 -D  依次安装以下插件,如果有请忽略 npm install dayjs npm install clipboard 2、配置文件 main.js import uView from \\\'@/uni_modules/uview-plus\\\'  app.use(uView) App.vue @import \\\"

    2024年02月15日
    浏览(43)
  • 使用vscode搭建vite+uniapp+vue3+uview-plus项目

    1.使用vscode创建项目 需要注意的是当前的node版本 ^14.18.0 以上 2.项目创建完成后 npm run dev:mp-weixin npm run build:mp-weixin 以上是以微信小程序为例,如需其他可以查看其他项目命令 https://uniapp.dcloud.net.cn/quickstart-cli.html 3.下载uview-plus 1)uview-plus依赖SCSS所以需要先下载sass 和 sass-loade

    2024年02月11日
    浏览(48)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(59)
  • uniapp和springboot微信小程序开发实战:前端架构搭建之HBuilder X创建项目以及目录介绍

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包