uni-app 0基础学习

1.uni-app是什么

官网链接：https://uniapp.dcloud.io/component/README
微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/component/

前端跨端框架
使用vue.js开发所有前端应用的框架
跨端解决方案
只需开发一套代码，即可发布多平台

2.uni-app的主要特征

截屏2020-02-17上午11.01.04.png

3.uni-app解决了什么问题

多平台统一的开发（微信，百度，支付宝，字节跳动，QQ小程序，）
过去的跨端框架性能不够优秀
生态不丰富

4.创建uni-app工程

最好使用HBuilderX开发工具
一般为了稳定使用正式版，标准版只是简单的一个编辑器，不能进行app开发，因为没有预装app开发的环境，所以可以下载app开发版，它已经集成了相关的插件

WechatIMG19.jpeg
创建项目
方法一：通过 HBuilderX 可视化界面
1.在点击工具栏里的文件 -> 新建 -> 项目
2.选择uni-app，输入工程名，如：hello-uniapp，点击创建，即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

WechatIMG26.png

方法二：通过vue-cli命令行

// 1.使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
// 2.使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
// 接下来选择模版

5.运行平台

H5
APP
小程序（微信，支付宝，百度，头条，QQ）

6.目录结构说明

WechatIMG36.jpeg

WechatIMG34.jpeg

7.页面配置（pages.json）

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。（所有的页面必须要在pages.json里面注册，否则页面将不会展示）

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

pages的配置说明（所有的页面必须要在pages里面注册，否则页面将不会展示）

WechatIMG49.png

18619776-70a4345b0a58e47d.png
globalStyle
用于设置应用的状态栏、导航条、标题、窗口背景色等。会被pages里style的样式覆盖

截屏2020-02-17下午1.05.42.png
tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

"tabBar": {
    "color": "#7A7E83",//颜色
    "selectedColor": "#3cc51f",//选中后的颜色
    "borderStyle": "black",
    "backgroundColor": "#ffffff",//背景色
    "list": [{
        "pagePath": "pages/component/index",//组件路径
        "iconPath": "static/image/icon_component.png",//未选中时的图标
        "selectedIconPath": "static/image/icon_component_HL.png",//选中时的图标
        "text": "组件"//中文文案
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}
/**
注意：
1.list下最多配置5项，最少配置2项；
2.tabbar显示一次就会保存到内存中，以后每次打开不会重新请求资源，如果需要重新加载页面，需要在onshow的生命周期中做逻辑运算，达到刷新页面的操作
3.有些属性在某些平台是不支持的
**/

8.基础组件

9.生命周期

应用生命周期
应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面生命周期

WechatIMG155.jpeg

组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

10.路由

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

10.语法(和vue一样)

添加样式

//style样式设置
//对象方式
:style="{ backgroundImage:`url(${topBgImg})` }"
:style="{ left:`${iconDistance}rpx` }"
:style="{ paddingTop: paddingTopNum + 'px' }"
//对象数组方式
:style="[{ color: activeColor, fontSize: fontSize + 'px' }]"
//calc
:style="{height:'calc(100vh - ' + pageTopHeight +'px - 140rpx)'}"

//class样式设置
//对象方式
:class="{ active: isActive, 'text-danger': hasError }" 
:class="[activeClass, errorClass]"

//三元运算方式
:class="[isActive ? activeClass : ' ', errorClass]"
//数组加三元运算方式
:class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"

//数组加对象方式
:class="[{ active: isActive }, errorClass]"

11.布局与样式

尺寸单位

（1）px 即屏幕像素
（2）rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
uni-app 规定屏幕基准宽度 750rpx。
（3）开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：
（1）若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx
（2）若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx
（3）若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。
HBuilderX有自带的可以配置px和rpx的转换，不用每次手动计算

WechatIMG243.png

样式导入
uni-app 内置了常用的样式变量，采用 scss 预处理方式，文件名为 uni.scss，在代码中无需 import 这个文件即可使用这些样式变量。

12.基础API（自行参考文档）

12.自定义组件(和vue一样)

//pages/index/index.vue

//components/list.vue

13.自定义导航栏

image.png

最近需要获取小程序页面中胶囊的 frame (y,x,w,h)等数据,可以通过wx/uni提供的能力(如果用的是原生,则将以下代码中的uni换为wx即可)

//胶囊的位置信息
var data = uni.getMenuButtonBoundingClientRect()
    console.log('胶囊宽度：',data.width)
    console.log('胶囊高度：',data.height)
    console.log('胶囊上边界坐标：',data.top)
    console.log('胶囊右边界坐标：',data.right)
    console.log('胶囊下边界坐标：',data.bottom)
    console.log('胶囊左边界坐标：',data.left)
//获取状态栏高度
uni.getSystemInfo({
    success(res) {
        console.log("状态栏的高度：" + res.statusBarHeight)
    }
})

//2.计算头部高度
//在app.vue中
onLaunch: function() {
    uni.getSystemInfo({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight //状态栏高度
        const menuButton = uni.getMenuButtonBoundingClientRect() //胶囊的信息
        //(menuButton.top - res.statusBarHeight) * 2//导航栏上下内边距
        const navHeight = menuButton.height + (menuButton.top - res.statusBarHeight) * 2 // 导航栏高度
        const headerHeight = navHeight + statusBarHeight // 总高度(状态栏+导航栏)
        // 存储到Vue里
        Vue.prototype.navData = { statusBarHeight, navHeight, headerHeight }
        // 存储到本地存储
        uni.setStorage({
          key: 'navData',
          data: { statusBarHeight, navHeight, headerHeight }
        })
      }
    })
  }

自定义导航栏组件
app.vue中获取个高度

封装导航组件

小程序右上角的胶囊颜色怎么修改,pakeage.json

{
  "navigationBarBackgroundColor": "#f83e06",
  "navigationBarTitleText": "服务中心",
  "navigationBarTextStyle": "white"
}

修改效果：
"navigationBarTextStyle":"white"

image.png

"navigationBarTextStyle":"black"

image.png

14.封装全局登录检查函数

WechatIMG218.jpeg

WechatIMG219.jpeg

WechatIMG220.jpeg

WechatIMG221.jpeg

15.定位

想获取用户的位置，首先需要获取权限，该权限需要在manifest.json里设置

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

image.png

之后参考官网：https://uniapp.dcloud.io/api/location/location

16.修改uniapp组件样式

自己尝试了很多种方式，最后经过查阅资料发现，style标签上加scoped，同时使用 deep 穿透可以成功修改：

17.url参数传递对象

开发小程序和uni-app时，遇到需要在navigaor组件中传递对象参数到下一个页面的需求，传递对象时如果不JSON.stringify的话，接收到的对象会被转化成[object,object]形式。但是使用字符串化往往还会带来另一个问题，那就是超出规定的长度。那么怎么解决呢？方案如下，两步走：

1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码，这样可以控制url参数的长度，参考示例代码（uni-app书写方式，微信小程序自己改。）
2.接受信息的页面使用JSON.parse()以及decodeURIComponent()接收和解码参数。
```
onLoad(option){
  const item = JSON.parse(decodeURIComponent(option.item));
}
```

上述两步即可解决url传递的对象的被编码和长度超长问题了
参考：https://blog.csdn.net/qq_16371909/java/article/details/91361734

18.获取从哪跳转过来的页面地址

 var pages = getCurrentPages(); // 当前页面
 var beforePage = pages[pages.length - 2]; // 前一个页面
 var route=pages[pages.length - 2].route;//前一个页面的路由

 wx.navigateBack({
     success: function() {
         beforePage.onLoad(); // 执行前一个页面的onLoad方法
     }
 });

19.placeholder样式修改

19.uni如何执行input中回车键的监听

按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
那如果有一个需求，希望在input中输入之后，按回车键执行一个查询，应该如何实现？

uni-app 0基础学习

1.uni-app是什么

2.uni-app的主要特征

3.uni-app解决了什么问题

4.创建uni-app工程

5.运行平台

6.目录结构说明

7.页面配置（pages.json）

8.基础组件

9.生命周期

10.路由

10.语法(和vue一样)

11.布局与样式

12.基础API（自行参考文档）

12.自定义组件(和vue一样)

13.自定义导航栏

14.封装全局登录检查函数

15.定位

16.修改uniapp组件样式

17.url参数传递对象

18.获取从哪跳转过来的页面地址

19.placeholder样式修改

19.uni如何执行input中回车键的监听

你可能感兴趣的:(uni-app 0基础学习)