uni-app 0基础学习

2020-02-17 本文已影响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.基础组件

<template>
<!-- 
1.vue文件：自定义的文件类型，类html语法，描述的一个vue
2.三部分组成：
    - template 视图层 组件
    - script 逻辑层
    - style 样式层
3.常用的基础组件
    -view  ->  div  容器组件
    -text  ->  span  文字组件
    -image  ->  img  图片组件
 -->
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }   
</style>

9.生命周期

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

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        //当uni-app 初始化完成时触发（全局只触发一次）
        onLaunch() {},
        //当 uni-app 启动，或从后台进入前台显示
        onShow() {},
        //当 uni-app 从前台进入后台
        onHide() {},
      //当 uni-app 报错时触发
        onError() {}
    }
</script>

页面生命周期

<!-- 
两个页面，A页面 B页面
A  进入  B
1.A onHide
2.B onLoad
3.B onShow
4.B onReady

B  进入  A
1.B onUnload
2.A onShow
-->
<script>
   export default {
        //页面加载
        onLoad(e) {
          //接收上个页面传来的参数（比如从路由传过来的{id:566}）
          //请求后台接口
          //渲染前的操作
        },
        //页面显示
        onShow() {},
        //页面渲染完成
        onReady() { //获取节点信息},
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {}
  }
</script>

WechatIMG155.jpeg

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

10.路由

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

<template>
    <navigator url="../../App">组件跳转</navigator>
    <button type="primary" @click="open">navigateTo跳转</button>  
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        methods: {
            //uni.navigateTo保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
            open(){
                uni.navigateTo({
                    url:'../../App'
                })
            },
            //uni.redirectTo关闭当前页面，跳转到应用内的某个页面。
            //uni.reLaunch关闭所有页面，打开到应用内的某个页面。   
            //uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。    
            //uni.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 
        }
    }
</script>

10.语法(和vue一样)

<template>
    <view>
        <!-- 动态绑定数据 -->
        <text class="title">{{title}}</text>
        <!-- 动态绑定属性 -->
        <image class="logo" :src="src"></image> 
        <!-- 动态class -->
        <view :class="content"></view>
        <view :class="[content,background]">会把数组里的都渲染</view>
        <view :class="{content:flag}">flag是一个布尔值，如果是true样式就会渲染，否则样式就不被渲染</view>
        <!-- 动态style 还有数组和对象的绑定方式没有展示-->
        <view style="border: 1px solid red">111</view>
        <view :style="{'background': 'red'}">222</view>
        <view :style="{'background': background1}">333</view>
        <!-- 条件渲染 -->
        <view v-if="show">条件渲染show是布尔值</view>
        <view v-else></view>
        <!-- 列表渲染 必须加key属性-->
        <view v-for="(item,i) in arr" :key="i">{{item}}</view>
        <!-- 事件绑定 绑定的方法需要写在methods里-->
        <view @click="onClick('uni')">点击</view>
        <input type="text" value="" @input='change'/>
    </view> 
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                src:'/static/logo.png',
                // class
                content:'content',
                background:'background',
                flag:true,
                // style
                background1:'green',
                show:true,
                arr:[111,222,333,444,555]
            }
        },
        methods: {
            onClick(e){
                console.log("参数",e)
            },
            change(e){
                //方法和属性都是用this调用
                this.onClick()
                this.title="改变title"
                console.log('事件对象',e)
            }
            
        }
    }
</script>

<style>
    .content {
        border: 1px solid yellow;
    }
    .background{
        background-color: green;
    }
</style>

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 这个文件即可使用这些样式变量。

<!-- App.vue -->
<script>
    export default {}
</script>

<style>
    /*1.每个页面公共css，可以直接在其他页面使用 */
      .border{
        border: 1px solid red;
    }
    /*2.不想在App.vue里写的话可以在外面新建一个base.css ,然后在这里引进来，也可以在某个组件里引用*/
    @import './common/base.css'
</style>

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

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

//pages/index/index.vue
<template>
    <view>
        <list :name="11" @onClick='onClick'></list>
        <list :name="22"></list>
    </view> 
</template>
<script>
    /**1.在项目根目录创建components目录
    2.创建组件
    3.引入组件
    4.注册组件
    5.传参
    6.事件通讯
    **/
    import list from '@/components/list.vue'
    export default {
        components:{list},
        methods: {
            onClick(val){
                console.log(val)
            }
        }
    }
</script>

//components/list.vue
<template>
    <view class="list" @click="onClick">{{name}}</view>
</template>

<script>
    export default {
        props:{
            name:{
                type:Number,
                default:null
            }
        },
        methods: {
            onClick(){
                this.$emit('onClick',this.name)
            }
        }
    }
</script>
<style>
.list{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}
</style>

13.散碎知识点

最近需要获取小程序页面中胶囊的 frame (y,x,w,h)等数据,可以通过wx提供的能力

var data = wx.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)

2.计算头部高度
    在app.vue中
    onLaunch: function() {
            uni.getSystemInfo({ //获取手机的状态栏高度单位px
                success: function(e) {
                    Vue.prototype.statusHeight = e.statusBarHeight;
                    let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
                    Vue.prototype.menu = menu;
                    Vue.prototype.barHeight = menu.bottom + menu.top - e.statusBarHeight;
                    console.log(111, Vue.prototype.barHeight)
                }
            })
        },

小程序右上角的胶囊颜色怎么修改,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 穿透可以成功修改：

<style scoped>
/deep/ .uni-combox__input {
    font-size: 14px;
}
</style>

17.url参数传递对象

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

1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码，这样可以控制url参数的长度，参考示例代码（uni-app书写方式，微信小程序自己改。）
```
<navigator :url="'/pages/base/baseEdit/baseEdit?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
```
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样式修改

<input type="text" style="font-size: 34upx;" placeholder-style="font-size:16px;" placeholder="患者姓名" confirm-type="search"></input>

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

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

<input confirm-type="search" @confirm="search()">