如何从零开始拆解uni-app开发的vue项目（一）

已于 2024-04-19 09:03:06 修改
阅读量1.2k 收藏 19
点赞数 30
分类专栏： C#开源架构分析 文章标签： uni-app HBuilder X vue.js
于 2024-03-19 10:14:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_nanda/article/details/136745467
版权

uni-app项目分析：

背景：最近接手一个前同事留下的半拉子项目，出拿过来觉得很简单；当我看到app.vue的时候很确定是vue项目，心里不怎么慌，果断安装node.js,然后就去npm ；安装VS code,事实并不是我期盼的那样，或者说根本就不能运行。

报错：应用vs code打开文件，输入命令npm run dev,项目根本就没有运行，一直显示缺少一个package.json文件。

最后由于进度问题，只能去找前同事，听他说前端这几年变化挺大，项目可能适用的是其他编译器，再三辗转确定是HBuilder X。 

一番操作之后，我下载了HBuilder X之后，运行项目其实也不是很顺利，因为这个编译器虽然是免安装的，但是运行之后就会提示缺少运行的插件，还好都是无脑安装。

项目运行后才发向，项目根本没有后台服务，当时心中有一万只羊驼一闪而过；这样的项目怎么还说是成功运行的？不管三七二十一，我先利用HBuilderX的内置管理器进行运行，登录的界面如下：

为了进一步弄清uni.app开发程序的架构,首先打开APP.vue希望从这里查到一点蛛丝马迹，如下图所示：

上图可以看到这个文件只有style样式和默认的Script方法；于是乎我只能从pages.json

这里的json文件都是一些路径组合，从 注解中了解到uni.app开发vue程序的启动格式：

//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

之后点击完对应的参考了解到：

 pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

 以下是一个包含了所有配置选项的 pages.json ：

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

 接下来首先打开登录页面pages/index/index.vue页面，我们近一步分析：首先看一下Template代码：

<template>
    <view class="main">

        <!-- 登录框 -->
        <view class="loginBox"> 
            <view class="vv"></view>
            
            <view class="logoImgBox">
                <image :src="loginImage" mode=""></image>
            </view>
            
            <view class="loginInptu">
                <input type="text"  class="username" value="" placeholder="请输入用户名" maxlength="11" @input="phoneInput"/>
            </view>
            <view class="loginInptu" >
                <input type="password" class="password" value="" placeholder="请输入密码" maxlength="16" @input="passwordInpur"/>
            </view>
                            
            <view class="loginUp" @click="login">
                <image src="../../static/denglu.png" mode=""></image>
            </view>
            
        </view>        
    </view>
</template>

由上可以看到Template中可以看到：

有两个输入框input，利用不同的class设置是文本输入框还是密码输入框，并且定义了默认的placeholder提示信息，以及对应的数据长度maxlength；

一个图标形式的登录按钮，对应一个@Click的"login"事件。

从上有的template中我们还可以看到一个现场就是template中的所有的视图元素都是包裹在<view></View>标签中，这应该时uni.app的一种书写格式。

最近开了uni-app的官方文档了解到<view></View>相当于html中的<div></div>，意思应该同<div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。此部分内容更新于2024-04-05.

接着我们对login函数进行分析：

<script>
    export default {
        data() {
            return {
                loginMode: 1,
                usernameType:"text",
                codeBut:"获取验证码",
                loginImage:"../../static/logo.png",
                codeClick:true,
                phone:"",
                password:"",
                code:"",
                username:"",
                loginres:0,
            }
        },
        onLoad() {
            
        },
        methods: {
            gotoMenu(){
                    uni.navigateTo({
                    url:"/pages/menu/menu/menu"
            
                    })
                },
            login()
            {
                
                uni.request({
                 url: 'http://127.0.0.1:5034/Login/Login2',
                 method: 'GET',      
                data: { g_UserID: this.username, g_Password: this.password},
                 success: (res) => {  
                      console.log('数据:'+this.username+this.password);  
                      //console.log(res.data);
                      var loginres = res.data.loginres;
                      console.log('loginres:'+loginres);  
                      //var _that = this
                      if(loginres == 1){
                          //console.log(res.data)
                          uni.showToast({
                              title: '登录成功',
                              icon: 'none',
                              duration:2000,
                            
                          });
                        
                        this.$globals.us = this.username;
                        
                        
                        uni.navigateTo({
                        url:"/pages/menu/menu/menu"
       
                        });
                        this.loginres = 0;
                        }
                        else if(loginres != 1){
                            uni.showToast({
                                title: '登录失败',
                                icon: 'none',
                                duration:2000
                            });
                            this.loginres = 0;
                        };
                 },  
                 fail: () => {console.log('登录失败'+this.username+this.password);},  
                 complete: () => {console.log('完成');}  
                });  
            },
        }
    }
</script>

在分析login方法时我们首先需要看一下Script怎么定义的数据：

 export default {
        data() {
            return {
                loginMode: 1,
                usernameType:"text",
                codeBut:"获取验证码",
                loginImage:"../../static/logo.png",
                codeClick:true,
                phone:"",
                password:"",
                code:"",
                username:"",
                loginres:0,
            }
        }

这个方法中我们可以看到所有在界面中会适用的参数及类型。

在来看一下method：{}中的方法：

methods: {
            gotoMenu(){
                    uni.navigateTo({
                    url:"/pages/menu/menu/menu"
            
                    })
                },
            login()
            {
                
                uni.request({
                 url: 'http://127.0.0.1:5034/Login/Login2',
                 method: 'GET',      
                data: { g_UserID: this.username, g_Password: this.password},
                 success: (res) => {  
                      console.log('数据:'+this.username+this.password);  
                      //console.log(res.data);
                      var loginres = res.data.loginres;
                      console.log('loginres:'+loginres);  
                      //var _that = this
                      if(loginres == 1){
                          //console.log(res.data)
                          uni.showToast({
                              title: '登录成功',
                              icon: 'none',
                              duration:2000,
                            
                          });
                        
                        this.$globals.us = this.username;
                        
                        
                        uni.navigateTo({
                        url:"/pages/menu/menu/menu"
       
                        });
                        this.loginres = 0;
                        }
                        else if(loginres != 1){
                            uni.showToast({
                                title: '登录失败',
                                icon: 'none',
                                duration:2000
                            });
                            this.loginres = 0;
                        };
                 },  
                 fail: () => {console.log('登录失败'+this.username+this.password);},  
                 complete: () => {console.log('完成');}  
                });  
            },
        }

method的中有两个方法：

 gotoMenu(){
                    uni.navigateTo({
                    url:"/pages/menu/menu/menu"
            
                    })
                },

这个方法从名称中可以看到是一个跳转功能，跳转的页面是项目下/pages/menu/menu/menu页面：

uni.request({
                 url: 'http://127.0.0.1:5034/Login/Login2',
                 method: 'GET',      
                data: { g_UserID: this.username, g_Password: this.password},
                 success: (res) => {  
                      console.log('数据:'+this.username+this.password);  
                      //console.log(res.data);
                      var loginres = res.data.loginres;
                      console.log('loginres:'+loginres);  
                      //var _that = this
                      if(loginres == 1){
                          //console.log(res.data)
                          uni.showToast({
                              title: '登录成功',
                              icon: 'none',
                              duration:2000,
                            
                          });
                        
                        this.$globals.us = this.username;
                        
                        
                        uni.navigateTo({
                        url:"/pages/menu/menu/menu"
       
                        });
                        this.loginres = 0;
                        }
                        else if(loginres != 1){
                            uni.showToast({
                                title: '登录失败',
                                icon: 'none',
                                duration:2000
                            });
                            this.loginres = 0;
                        };
                 },  
                 fail: () => {console.log('登录失败'+this.username+this.password);},  
                 complete: () => {console.log('完成');}  
                });  
            },

另一个方法是request一个路径，data: { g_UserID: this.username, g_Password: this.password}是传入的对应参数，可以看到：

success: (res) => {  
                      console.log('数据:'+this.username+this.password);  
                      //console.log(res.data);
                      var loginres = res.data.loginres;
                      console.log('loginres:'+loginres);  
                      //var _that = this
                      if(loginres == 1){
                          //console.log(res.data)
                          uni.showToast({
                              title: '登录成功',
                              icon: 'none',
                              duration:2000,
                            
                          });
                        
                        this.$globals.us = this.username;
                        
                        
                        uni.navigateTo({
                        url:"/pages/menu/menu/menu"
       
                        });
                        this.loginres = 0;
                        }
                        else if(loginres != 1){
                            uni.showToast({
                                title: '登录失败',
                                icon: 'none',
                                duration:2000
                            });
                            this.loginres = 0;
                        };
                 },

这段逻辑意思是登录成功后，首先在控制台打印调用接口时的参数，在根据 res.data.loginres的值判断进行弹窗显示，弹窗部分的代码：

 uni.showToast({
                              title: '登录成功',
                              icon: 'none',
                              duration:2000,
                          });

接着是this.$globals.us = this.username;别看只有一句代码，这句的意思是将用户名放入到global中，这个后期可做全局对象处理页面之间的权限验证等功能，按住alt+鼠标左键可以看到，对应的文件config.js

 接着是登录成功后跳转对应的menu菜单页面：

uni.navigateTo({
                        url:"/pages/menu/menu/menu"
       
                        });

 因此我按照前台数据类型，写了一个登录成功的方法，先看看菜单栏的功能，后台代码如下：

成功跳转后的功能如图：

码字不易，如果您觉的我的文章对您有帮助的话，建议您在经济能力之内慷慨打赏一元给我买瓶水， 这将是我下一步继续书写本题目的动力；如果您囊肿羞涩也没有关系，希望您点个关注，写点评论；您的支持将是我创作之路上的无线动力；青山依旧绿水长流，希望我们下期来能再见。

A_nanda
关注
  • 30
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
使用uni-app快速Vue项目输出到小程序和H5
03-29
跨端彻底，直接发行，无需二次开发； 通过Tree-Shaking摇出最小化内置组件等优化策略，提升性能 这应该是uni-app在H5平台的相对其他小程序框架更友好的地方   背景 随着微信小程序的火爆及百度、头条小程序的持续推进，跨端开发的需求愈发迫切，业界随之出现了一系列的跨端框架，但对于H5平台跨端支持的都不太彻底：   Vue技术栈的小程序框架：对于H5平台支持普遍较弱 部分React技术栈的小程序框架：虽支持生成可在H5端运行的代码，但仅仅是代码可运行，离项目直接发行上线的目标还存在一定差距。 鉴于客观需求及现状，DCloud前端团队响应开发者彻底跨端的呼声，经过连续奋战，uni-ap
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试能访问到本地的数据，由于微信小程序官方限制，如果打算做上线的应用请购买服务器，域名解析数据，这里不在细讲，适合新手和初学者当试手项目，大家可以交流学习！ git下载： https://gitee.com/lhxzlhm/juhuigou.git
uni-app-master：uni-app是使用Vue语法开发小程序，H5，App的统一框架
11-25
uni-app是一个使用Vue.js开发小程序，H5，App的统一前端框架。官网地址： : Vue.js 开发者使用Vue语法编写代码， uni-app框架将其编译到小程序（微信/支付宝/百度/字节跳动/ QQ /钉钉），App（iOS / Android），H5等多个平台，保证其正确运行并达到优秀体验。 uni-app的特点 开发者和案例更多：HBuilder装机量500万台，开发者社区月活百万，70多个QQ微信群承载10万人。案例众多，uni统计月活100亿（） 性能更高（见） 更丰富的周边生态，千款插件 提供比小程序原生开发更好的开发体验，更高的工程化效率 跨端抹平度更完善，且各端特色发挥更灵活，可真正实现一套代码多端覆盖，无需各端多头维护升级 官方认可：阿里小程序官方工具内置uni-app（），腾讯课堂官方自制uni-app培训视频（） 扫码体验 开发一次，编译到10个平台。依次扫描10个二维码，亲自体验最全面的跨平台效果！
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的
uni-preset-vue-master uniapp项目模板
12-02
uni-preset-vue-master uniapp项目模板
如何从零开始拆解uni-app开发的vue项目（二）
A_nanda的博客
03-20 1044
设备编码:设备编码:设备信息:
uni-preset-vue:vue的uni-app预设
04-29
@ uni-app / vue-cli-preset-uni-app vue-cli的uni-app预设
前端技术浪潮与应用
LittleRoundFace的博客
11-28 2136
2020年前端技术浪潮与应用 文章目录2020年前端技术浪潮与应用一、前端基建01.前端可视化01-1.页面可视化搭建①页面可视化背景-前端行业提效分析②业界-前端行业提效轮子：[前端可视化搭建工具业界的轮子](https://juejin.im/post/6858881797490098190)③背景-提效轮子总结归纳④智能化相关行业提效分析⑤举例可视化搭建其中的一个例子来看前端可视化——imgcookimgcook介绍-产品大图imgcook介绍-产品大图核心技术难点-智能识别表达拆解核心技术难点-智能
前端求职难？那是你没看见这个
weixin_51689029的博客
06-29 3354
相信大部分在学习的时候都会面临这样的问题，毕竟学习完的最终目的还是能够找到一个心仪的工作~ 不过也不用头疼~ 找工作除了你自身的技术条件要过关之外，面试简历可以说的非常重要的了~ 一份优秀的简历可以让HR对你眼前一亮~给你提供下简历的思路和模板~1.项目类型：1后台管理系统2移动端（webapp）3微信小程序4微信公众号2.工作年限3年工作经验5个项目以上 2年工作经验项目4个项目个人能力提升 团队能力提升 高要求、清晰的目标 团队建设3.技术栈Vue+vuex+vue-router+webpack+ES6
自己搜集的一些前端面试题 初中级(较多)
Eminem7的博客
06-01 125
自己整理的一些前端面试题
持续更新｜UNIAPP适配APP遇到的问题以及解决方案
灵壹Eli的博客
04-29 327
在使用UNIAPP开发APP的时候遇到的一些奇奇怪怪问题记录。
uniapp微信小程序开发踩坑日记：由于图表数据渲染不出来，我第一次在项目中用watch函数监听数据变化
lbcbjtlhmjq的博客
04-28 538
图表的数据不是响应式的。有时候后端数据还没返回，图表就已经渲染好了，那时候数据还是空。所以要用watch监听数据变化，等数据从空变为有值的时候再渲染图表
uniapp 微信开发工具上访问正常，真机调试一直跨域报错
最新发布
weixin_44565776的博客
05-04 213
Accept-Ranges头部的作用就是告诉客户端，服务器是否支持这种“只请求部分资源”的操作。真机调试加上了这种限制。其主要作用：大文件的下载、流媒体的播放以及节省带宽和流量。
uniapp 桌面应用插件 Ba-Launcher
三杯五岳
05-01 501
Ba-Launcher 可以让你的应用成为简单的桌面应用。
uniapp 安卓手机 input type=“number“ 没有点，不能输入小数
lmy_loveF的博客
04-29 425
修改后：type="digit" inputmode="decimal"
uniapp视频播放器（h5+app）
farme_guan的博客
04-27 1309
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
uniapp获取当前位置及检测授权状态
Smile_ping的博客
04-26 1079
uniapp App端获取当前位置、检测当前定位是否授权，并给予弹窗提示用户；
uniapp自定义返回事件（封装）
farme_guan的博客
04-28 788
在我们使用uniapp时，我们导航栏一般都是自定义的，比如用uview框架的导航栏，那么返回事件通常会遇到以下几个问题 - [ ] 返回事件前需要做一些额外的处理 - [ ] h5项目刷新页面后返回失效 - [ ] 返回按钮点击后到指定页面
vite创建 uni-app vue3项目
08-17
要使用 Vite 创建一个基于 Uni-app 和 Vue 3 的项目，你可以按照以下步骤进行操作： 1. 确保你已经安装了 Node.js，版本要求大于等于 12.0.0。 2. 打开命令行工具，进入到你想要创建项目的目录。 3. 运行以下命令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

A_nanda

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

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

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

打赏作者

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

抵扣说明：

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

余额充值