uni-app 知识点uniapp介绍最新一代Hybrid开发其中的热门框架, 由Dcloud公司研发, 目前国内混合

uniapp介绍

最新一代Hybrid开发其中的热门框架, 由Dcloud公司研发, 目前国内混合开发top3的框架
节点驱动时代 - DOM操作,直接获取DOM并操作
数据驱动时代 - 数据驱动,把要变化的值抽到状态管理,修改数据自动更新视图
混合开发时代 - Hybrid,1套代码编译为移动端多端(H5APP，各类小程序，APP)
vue的语法 + 小程序的标签, 书写移动端全平台应用

uniapp项目创建

下载HbuilderX IDE
新建 - 项目 - uniapp
运行 - 根据当前开发需求,运行浏览器|微信小程序|手机|模拟器

介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage就是打包目录，在这里有各个平台的打包文件
pages所有的页面存放目录
static静态资源目录，例如图片等
components组件存放目录

uniapp的数据驱动

uniapp是基于VUE(MVVM)进行二次封装的全新框架, 它俩的数据驱动保持一致
- 把要变化的数据抽取到data中
- 使用{{ }}（模版表达式）, this.xxx可以访问到此动态数据
- 直接修改this.xxx, 改变数据并自动通知视图更新(因为有MVVM的原因)
MVVM: 是一种架构模式, 把一个应用拆分为Model(数据模型),View(视图层), ViewModel(视图模型层)

uniapp的标签

uniapp为了适配各类小程序(因为小程序的标签有一些特殊能力,HTML标签没有),所以采用的标签都是小程序的原始标签
- view、swiper、swiper-item、navigator、button、icon、text ……

uniapp的生命周期

pages页面生命周期
- onInit: 初始化加载(比onLoad更早) 百度小程序专享生命周期,其他没有
- onLoad: 初始化加载
- onShow: 页面显示
- onReady: DOM加载完毕
- onHide: 页面隐藏
- onUnload: 页面卸载(删除DOM)
- onPullDownRefresh: 拉头
- onReachBottom: 下拉到底部
- onShareAppMessage: 点击分享
components组件生命周期
- beforeCreate: 数据创建前
- created: 数据拦截完毕
- beforeMount: 视图挂载前
- mounted: 初次挂载完毕
- beforeUpdate: 数据变化,即将开始更新视图
- updated: 视图更新完毕(用户可以看到新的视图)
- beforeDestory: 销毁前
- destoryed: 销毁完毕

uniapp工程化

路由配置(pages.json 文件里)

"tabBar": {
        ...其他配置
        "list":[
            {"text": "按钮文字", "pagePath": "点击切换的页面路径", "iconPath": "默认图标", "selectedIconPath": "选中图标"}
            ]
        }
        //tabbar: 只能有2-5个按钮图标
        //uniapp的静态资源只能放在static文件夹下
        //图标只支持本地图片,<=40kb,不支持网络图片及字体图标

API封装

1. 配置服务器IP  
    export const baseURL = 'xxxx'
                
2. 请求+拦截器配置
    export const req = (...参数) => {
                //--------请求拦截器的代码----------//      
                return new Promise((resolve, reject) => {
                    uni.request({
                        ....参数,
                        success(res){ 
                            //--------响应拦截器的代码----------//
                            resolve(res)  
                        },  //成功
                        fail(err){ reject(err) }  //失败
                    })
                })
            }
            
3. 业务逻辑封装
    根据自己不同的业务,新建 业务.js 
    import { req } from './request'
    export const $_函数名1 = (...参数) => req(...参数)
    export const $_函数名2 = (...参数) => req(...参数)

uniapp在小程序中获取用户所在城市

1.获取经纬度

uni.getLocation() //获取经纬度

配置manifest.json

1. 配置微信小程序AppID
2. 勾选位置接口,填写描述（准备授权）
3. 2022.7.14日后,小程序还要求配置requiredPrivateInfos才能定位
打开最下面源码视图
"permission" : {
    ...
},
    "requiredPrivateInfos": [   //新增此配置
        "getLocation"
    ]
    //如果配置后仍然定位失败,降低小程序IDE调试内库为稳定版,2.25.0等...

2.把经纬度转换城市数据(使用第三方API)

1. 找到高德免费API,转换坐标
    https://lbs.amap.com/api/webservice/summary/
2. 注册账号,申请对应的key,注意key的范围不要选错了(这里用的是web服务 key)
3. 找到接口,发送请求,携带对应参数

例：获取天气 https://restapi.amap.com/v3/weather/weatherInfo  {key:您的key,city:xxxx}

小程序懒加载

先渲染第一页数据（最优先）
确认懒加载的时机（用户在什么时候加载下一页数据）
在懒加载的触发时机中，加载并渲染下一页数据
- onReachBottom(){ 请求下一页数据判断 }

页面跳转方式

uni.navigateTo：保留当前页面，跳转到应用内的某个页面。
uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch：关闭所有页面，打开到应用内的某个页面。
uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack：关闭当前页面，返回上一页面或多级页面。

获取地理位置

uni.getLocation：使用之前要现在 manifest.json 文件里面配置一下，然后直接使用就行了

// manifest.json文件中：
// 找到源码视图
// 找到mp-weixin

"mp-weixin":{
    // 配置获取经纬度
    "requiredPrivateInfos":["getLocation"]
}

// 需要获取位置的文件中使用
uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});

事件传参

/** 默认如果没有传递参数，事件函数第一个形参为事件对象 */
<template>
    <button @click="tapHandle">点我啊</button>
</template>

<script>
    export default {
        methods: {
            tapHandle (e) {
            console.log(e)
              }
        }
    }
</script>

/** 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据 */
<template>
    <button @click="tapHandle(1)">点我啊</button>
</template>
<script>
    export default {
        methods: {
          tapHandle (num) {
            console.log(num)
          }
        }
    }
</script>

/** 如果获取事件对象也想传递参数 */
<template>
    <button @click="tapHandle(1,$event)">点我啊</button>
</template>

<script>
    export default {
        methods: {
          tapHandle (num,e) {
            console.log(num,e)
          }
        }
    }
</script>

网络请求

在uni中可以调用uni.request方法进行请求网络请求

组件的通讯

父传子

// 通过props来接受外界传递到组件内部的值
<template>
    <view>
        这是一个自定义组件 {{msg}}
    </view>
</template>

<script>
    export default {
        props: ['msg']
    }
</script>

<style>
</style>

// 其他组件在使用login组件的时候传递值
<template>
    <view>
        <test :msg="msg"></test>
    </view>
</template>

<script>
    import test from "@/components/test/test.vue"
    export default {
        data () {
            return {
                msg: 'hello'
            }
        },
        
        components: {test}
    }
</script>

子传父

// 通过$emit触发事件进行传递参数

<template>
    <view>
        <button type="primary" @click="sendMsg">给父组件传值</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                status: '打篮球'
            }
        },
        methods: {
            sendMsg () {
                this.$emit('myEvent',this.status)
            }
        }
    }
</script>

// 父组件定义自定义事件并接收参数
<template>
    <view>
        <test @myEvent="getMsg"></test>
    </view>
</template>
<script>
    import test from "@/components/test/test.vue"
    export default {
        methods: {
            getMsg (res) {
                console.log(res)
            }
        },
        
        components: {test}
    }
</script>

兄弟组件传值（乱传）

<!-- 兄弟组件通讯使用uni.$emit与uni-$on的方式进行操作 -->

<!-- 例如：A组件 与 B组件是兄弟组件 - 演示 A组件向B组件传递信息，B组件接收 -->
<!-- A组件 --> 
<template>
    <view>
        <button @click="handleClickBtn">点击发送信息</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name: '法外狂徒-张三'
            };
        },
        methods: {
            handleClickBtn() {
                uni.$emit('name', this.name);
            }
        }
    }
</script>

<!-- B组件 --> 
<template>
    <view>获取到的内容：{{name}}</view>
</template>

<script>
    export default {
        data() {
            return {
                name: ''
            };
        },
        created() {
            uni.$on('name', value => {
                this.name = value;
            });
        }
    }
</script>

uni-app 知识点

uniapp介绍

uniapp项目创建

介绍项目目录和文件作用

uniapp的数据驱动

uniapp的标签

uniapp的生命周期

uniapp工程化

uniapp在小程序中获取用户所在城市

小程序懒加载

页面跳转方式

获取地理位置

事件传参

网络请求

组件的通讯

父传子

子传父

兄弟组件传值（乱传）