uniapp

 

uni-app开发，graceUI和uViewUI 哪一个更好呢？

graceUI要收费

 uViewUI免费

 

初入uniapp踩过的坑

https://www.jianshu.com/p/0dfa73779a0b

 

 

1.资源使用绝对路径（有利于兼容）

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>

 

2.单位使用px和rpx（类似rem）

 

3.官方插件地址

https://ext.dcloud.net.cn/

 

4.微信小程序配置

如果不配置自己的微信小程序AppID（manifest.json），则微信开发者工具无法打开。

 

5.封装request请求

https://www.jianshu.com/p/575ac612bc82

 

6.下拉刷新和上拉加载

uniapp页面生命周期 onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新

uniapp页面生命周期 onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

api：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

实现上拉加载更多，下拉刷新

视频：https://www.bilibili.com/video/BV1CC4y1476y?p=39

 

7.地图

api: https://uniapp.dcloud.io/component/map

 

8.拨打电话

uni.makePhoneCall(OBJECT)

api: https://uniapp.dcloud.io/api/system/phone?id=makephonecall

uni.makePhoneCall({
    phoneNumber: '114' //仅为示例
});

 

9. 图片

api:https://uniapp.dcloud.io/api/media/image?id=chooseimage

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

uni.previewImage(OBJECT)

预览图片。

uni.getImageInfo(OBJECT)

获取图片信息。

uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。

 

10.获取地址栏参数

使用页面生命周期 onLoad

export default {
        data() {
            return {};
        },
        onLoad(obj){
            console.log(obj)
        },
    }

api:https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

 

11.vue.js和uniapp导入自定义组件以及使用

uniapp导入vue自定义组件

https://blog.csdn.net/zf118/article/details/108574548

 

12.获取路由，当前路由

let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由

 

https://www.it610.com/article/1279421714601623552.htm

 

13.页面通讯 uni$emit(), uni$on()

https://uniapp.dcloud.io/api/window/communication?id=emit

 

uni.$emit(eventName,OBJECT)

触发全局的自定义事件，附加参数都会传给监听器回调函数。

 uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

 uni.$on('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$once(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

uni.$once('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$off([eventName, callback])

移除全局自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

 

uni.$off('update')

 

14.路由跳转

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

https://uniapp.dcloud.io/frame?id=%e8%b7%af%e7%94%b1%e8%b7%b3%e8%bd%ac

 

15.导航栏和tabBar 高度

uni-app 中以下组件的高度是固定的，不可修改：

导航栏高度固定为 44px
tabBar 高度固定为 56px