初探uniapp，做了第一个项目，总结下经验（一）

最新推荐文章于 2025-03-01 16:01:07 发布

欧阳呀

最新推荐文章于 2025-03-01 16:01:07 发布

阅读量4.3w

点赞数 70

文章标签： uni-app uniapp踩坑 uni-app入门

本文链接：https://blog.csdn.net/qq_35942348/article/details/114967486

版权

uniapp是个啥

1. 基于vue开发的（懂vue的朋友问题是不大的）
2. 跨端：小程序，H5，QQ小程序啥的都可以用（会有小坑，毕竟兼顾这么多端）

4. 没有啥效果很棒组件，几乎都要自己写，也不建议去用其它花里胡哨的，容易出问题（能简则简）

5. uniapp是多页，vue是单页

我的实战开发之旅

1. 文档是要看的，我看了大半天吧（常用组件以及事件机制等）

2. 开发工具用的VScode（npm构造），建议还是.hbuilderx，毕竟是官方推荐

3. 先下载个模板来玩玩，里面会有它的展示效果和源码（与之前的mui如出一辙），还是蛮有用的，一顿ctrl+C，V操作，安逸的很

重要文件解读

package.json : 包管理器，和vue里面差不多
main.js : 入口文件，与vue同。里面可以配置一些全局的东西
pages.json : 与vue的router.js差不多，配置路由的
static: 放置静态文件，一般放些图片啥的
pages : 和vue的view文件夹差不多，放组件的
store : vuex

开发上需要注意的地方

uniapp里没有div，都是用view标签代替。
使用图片需要通过import引入，并在data()里返回，最后才能绑定到标签上去。（图片标签<image :src="">）
onLoad()为加载函数，用的多一点，其他生命周期函数的可以去官网看

接口请求（使用原生的即可）

uni.request({
		url: '',
		data: {},
		method: 'POST',
		success: (res) => {
			   // do something
		},
        fail: (err) => {
            console.log(err);
        }
});

页面跳转（讲几个用到的）
- uni.navigateTo(OBJECT)：常用，保留当前页面，跳转到应用内的某个页面。
- uni.redirectTo(OBJECT)：不保留当前页面，跳转到应用内的某个页面。（与上面的区别一样，场景不同的）
- window.location.href：跳转站外，还得原生JS
内置提示
- uni.showToast(): 提示框
- uni.showLoading(): 过渡动画，需要手动关掉 uni.hideLoading()