uniapp是个啥
1. 基于vue开发的(懂vue的朋友问题是不大的)
2. 跨端:小程序,H5,QQ小程序啥的都可以用(会有小坑,毕竟兼顾这么多端)
3.
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()
-
FAQ
由于uniapp本身没啥ui插件,大家可以在社区找:社区地址(找评分高的就行)
- 不要想着用uniapp搞一些花里胡哨的操作
- 尽量使用原生的组件,兼容性好,稳一些
- 不要去引一些花里胡哨的查件库,都容易出问题
今天先说到这,以后会边使用边更新文章,觉得有用的小伙伴可以点赞、收藏一波,感谢感谢~