初探uniapp,做了第一个项目,总结下经验(一)

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插件,大家可以在社区找:社区地址(找评分高的就行)

  1. 不要想着用uniapp搞一些花里胡哨的操作
  2. 尽量使用原生的组件,兼容性好,稳一些
  3. 不要去引一些花里胡哨的查件库,都容易出问题

今天先说到这,以后会边使用边更新文章,觉得有用的小伙伴可以点赞、收藏一波,感谢感谢~

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

欧阳呀

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

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

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

打赏作者

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

抵扣说明:

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

余额充值