uni-app是一个基于Vue.js的多端开发框架，允许开发者编写一次代码，发布到多个平台，包括iOS、Android、Web和各种小程序。它具有丰富的周边生态、优秀的性能体验和较低的学习及开发成本。文章详细介绍了uni-app的项目创建、运行、发布流程，以及使用过程中可能遇到的问题和解决方案，特别强调了HBuilderX作为官方编辑器的重要性和一些使用技巧。
目录
一、框架简介
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
二、为什么要选择uni-app？
uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
1、开发者/案例数量更多
数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数。
2、平台能力不受限
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。
3、性能体验优秀
加载新页面速度更快、自动diff更新数据。
App端支持原生渲染，可支撑更流畅的用户体验。
小程序端的性能优于市场其他框架。
4、周边生态丰富
插件市场数千款插件。
支持NPM、支持小程序组件和SDK。
微信生态的各种sdk可直接用于跨平台App。
5、学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。
6、开发成本低
不止开发成本，招聘、管理、测试各方面成本都大幅下降。
HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。
三、为什么要学习uni-app？
uni-app相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。
四、uni-app的使用
uni-app支持通过 可视化界面、vue-cli命令行两种方式快速创建项目。
可视化的方式比较简单，在这里就介绍可视化的方式。
如果对vue-cli命令行感兴趣的可行到uni-app官网自行查看学习。
开始之前，需要自行下载 HBuilderX。
HBuilderX
https://dcloud.io/hbuilderx.html
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
1、项目创建
打开HBuilderX在点击工具栏里的文件 -> 新建 -> 项目：
选择uni-app类型，输入工程名，选择模板，选择Vue的版本，点击创建，即可成功创建。
当然，如果你不想用以上的模板，或者说你想偷懒，可以自行的到插件市场下载导入哦。
亲测好用，能省去很多写代码的时间。
当然，具体情况，还要看插件的兼容性。
2、运行uni-app
完成创建项目之后点击工具栏的运行，可选择运行的方式：
1.运行到浏览器
2.运行到内置浏览器
3.运行到手机或者模拟器
4.运行到小程序模拟器
5.运行到终端
个人认为，1、2、4比较常用，2要下载内置浏览器插件，第一次运行一般会提示并跳转下载如果没有提示也可以到工具栏的工具插件安装自行下载。4要下载小程序模拟器，这里推荐微信开发者工具
3、发布uni-app
在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
发布uni-app博主也没怎么用过，大家可以自行体验一下哈。
4、uni-app其他功能的使用
uni-app官方文档自带许多功能，其中的组件功能，可以在我们写代码的时候提供非常大的帮助，特别是对刚刚学习uni-app的同学来说简直快速掌握uni-app好东西。
五、 uni-app踩坑记录
由于博主也是刚刚学习uni-app不久，所以在使用 uniapp 的过程中踩了不少坑，这里做下记录，希望帮助到有缘人。
1、编辑器的选择
1.HBuilderX，作为 uniapp 官方编辑器，作为初学者，使用HBuilderX会浪费前期一定的时间，如果你不喜欢使用HBuilderX，你也可以继续使用 vscode 。因此你需要使用 cli 方式来创建项目，而不是在 HbuildX 中创建并使用其他编辑器打开文件，因为HBuilderX 创建的项目文件结构只适用于 HBuilderX（不敢说这是100%正确的，只是我目前理解是如此的）。那是不是使用vscode或者其他软件就使用不了插件市场或者组件了呢。按照我目前的理解插件市场好像确实是用不了的，不过也可能是我不知道，因为博主本人我也是初学者，见谅，见谅。置于组件还有uView可以提供使用。
HBuilderX作为官方编辑器，我还是推荐你下载 HBuilderX 来使用，即使你不将他作为主力开发工具，但是在打包或者其他一些场景下有它的优势和好处。
2、组件问题
1.uni-app官方自带的组件和uView不要混合使用，可能是因为不兼容的原因，组件经常报错。当然如果你是大佬或者能处理兼容问题就当我没说。
2.uniapp组件，在使用的时候可能会遇到，明明没有报错，组件就是出不来的情况，反正博主是经常遇到这个情况，重新启动一下项目就好了或者关闭HBuilderX重新打开。
3.跳转问题
1.有些时候明明代码没问题就是跳转不了。页面跳转路径有层级限制，不能无限制跳转新页面。而且页面和页面之间的跳转也是有要求的 如：
- 跳转到 tabBar 页面只能使用 switchTab 跳转
"tabBar": { "color": "#999", "selectedColor": "#434343", "borderStyle": "white", "backgroundColor": "#fff", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/img/tab1.png", "selectedIconPath": "static/img/tab1-cur.png", "text": "首页" }, { "pagePath": "pages/classify/classify", "iconPath": "static/img/tab2.png", "selectedIconPath": "static/img/tab2-cur.png", "text": "分类" }, { "pagePath": "pages/found/found", "iconPath": "static/img/tab3.png", "selectedIconPath": "static/img/tab3-cur.png", "text": "发现" }, { "pagePath": "pages/PersonalCenter/PersonalCenter", "iconPath": "static/img/tab5.png", "selectedIconPath": "static/img/tab5-cur.png", "text": "我的" } ] } - uni.redirectTo 关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({ url: "/pages/login/login" }) - 更多详情信息大家可以去看uni-app官方文档API的页面和路由，这里就不过多解释了
4.pages.json配置文件
1.如果你要进行 uniapp 的开发，那么 pages.json 将是一个非常重要的全局配置文件，如果使用不当，会有很多坑在等着你。uniapp 官网有完整的配置示例，所以这里拿我的举例，这里更贴合实际业务，也更能表达我遭遇的问题。
先来看下我的 pages.json 文件有哪些配置：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "途说柳州"
}
}, {
"path": "pages/classify/classify",
"style": {
"navigationBarTitleText": "分类"
}
}, {
"path": "pages/found/found",
"style": {
"navigationBarTitleText": "发现"
}
}, {
"path": "pages/PersonalCenter/PersonalCenter",
"style": {
"navigationBarTitleText": "我的"
}
}, {
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}, {
"path": "pages/login/register",
"style": {
"navigationBarTitleText": "注册"
}
}, {
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情"
}
}, {
"path": "pages/increase/increase",
"style": {
"navigationBarTitleText": "新增发布"
}
},
{
"path": "pages/Search/Search",
"style": {
"navigationBarTitleText": "搜索"
}
},
{
"path": "pages/Myarticle/Myarticle",
"style": {
"navigationBarTitleText": "我的文章"
}
},
{
"path": "pages/PersonalLnformation/PersonalLnformation",
"style": {
"navigationBarTitleText": "个人信息"
}
},
{
"path": "pages/Modify/modify",
"style": {
"navigationBarTitleText": "修改个人信息"
}
},
{
"path": "pages/classify/CategoryDetails",
"style": {
"navigationBarTitleText": "分类详情"
}
},
{
"path": "pages/collection/collection",
"style": {
"navigationBarTitleText": "我的收藏"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"color": "#999",
"selectedColor": "#434343",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/img/tab1.png",
"selectedIconPath": "static/img/tab1-cur.png",
"text": "首页"
},
{
"pagePath": "pages/classify/classify",
"iconPath": "static/img/tab2.png",
"selectedIconPath": "static/img/tab2-cur.png",
"text": "分类"
},
{
"pagePath": "pages/found/found",
"iconPath": "static/img/tab3.png",
"selectedIconPath": "static/img/tab3-cur.png",
"text": "发现"
},
{
"pagePath": "pages/PersonalCenter/PersonalCenter",
"iconPath": "static/img/tab5.png",
"selectedIconPath": "static/img/tab5-cur.png",
"text": "我的"
}
]
}
}
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
