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

谁借莪１个温暖的怀抱￠ 2022-10-23 02:56 73阅读 0赞

> **uniapp是个啥**

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

3. ![621a9d31b542deac4b54c1455fc98a66.png][]

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

**5. uniapp是多页，vue是单页**

> ** 我的实战开发之旅**

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

> **重要文件解读**

*  package.json : 包管理器，和vue里面差不多
 *  main.js : 入口文件，与vue同。里面可以配置一些全局的东西
 *  pages.json : 与vue的router.js差不多，配置路由的
    
     *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]
 *   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.navigateTo_OBJECT]：常用，保留当前页面，跳转到应用内的某个页面。
     *  [uni.redirectTo(OBJECT)][uni.redirectTo_OBJECT]：不保留当前页面，跳转到应用内的某个页面。（与上面的区别一样，场景不同的）
     *  window.location.href：跳转站外，还得原生JS
 *  内置提示
    
     *  uni.showToast(): 提示框
     *  uni.showLoading(): 过渡动画，需要手动关掉 uni.hideLoading()

>  **FAQ**

由于uniapp本身没啥ui插件，大家可以在社区找：[社区地址][Link 1]（找评分高的就行）

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

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

[621a9d31b542deac4b54c1455fc98a66.png]: /images/20221022/140fc9af3da24e54b800ae3f93c4efd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221022/5d72287d789841e8a9ba32c3ee872524.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221022/5c3714b2a00143a3ad4019653d5506d4.png
[uni.navigateTo_OBJECT]: https://uniapp.dcloud.io/api/router?id=navigateto
[uni.redirectTo_OBJECT]: https://uniapp.dcloud.io/api/router?id=redirectto
[Link 1]: https://ext.dcloud.net.cn/