简单了解uni-app

官网链接

现在uniapp的多端开发深受前端选手喜爱，那么我们先看看和Vue相比幽什么独特之处吧

①uniapp使用小程序的标签，vue使用web端的标签；除此之外，还新增了一批手机端常用的新组件。uniapp的api是参考小程序的，因而与浏览器端的api有所不同。uni不支持vue-router，使用自带的路由

②uni使用的是小程序标签，vue使用的是HTML标签

③js的变化，分为运行环境变化、数据绑定模式变化、api变化 三部分

 

1、如何创建，两种方法

①利用编写工具HBuilderX 官网下载 

    (文件--- 新建---- 项目--- uniapp-uni-ui项目（模式可多选）)

②通过vue-cli命令

    npm install -g @vue/cli

    vue create -p dcloudio/uni-preset-vue my-project （话不多说，官网很详细）

2.直接在hbuilderX中工具栏选择运行 选择运行的浏览器

3.配置目录

 common目录：用来放一些js css json文件 (使用scss 和vue的下载一样)

  公共文件components没有的话自己新建一个

4.pages.json配置

页面的导航栏和页面之间会有一条白线，可添加

   "app-plus": {
            "titleNView": false
        } 

    //添加这段代码到“globalStyle”中就可以去掉头部导航栏

 

5.路由  uniapp路由与页面跳转

说一下返回上一级页面的操作。

back（）{

 uni.navigateBack({ delta: 1});

 }

写完上面的方法没效果，可以尝试下面的方法

 view: <u-button class="back" :hair-line="false" @tap="navigateBack"> < </u-button>

 methods：

       navigateBack() {
            uni.navigateBack();
       },

6.UI-uview是一个多平台UI框架  uView

7.生命周期

 · 应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

· 页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数，详情请参考页面生命周期