关于uniapp的总结

程序员文章站 2022-07-12 14:48:54

...

一 .开发过程中项目出现得问题

tabbar导航栏问题

在写项目的时候前期需求要求底部导航栏中间部分凸起，样式为一个蓝色的圈圈，而原生的uniapp不支持自定义底部导航栏，于是需要进行自定义修改。

解决方法

在uniapp官网的插件市场中，根据别人写的插件，使用非原生的方式自行实现底部导航栏和页面跳转（此时pages.json对底部导航栏的功能将不再使用）。

路径跳转出现问题

1、
在使用navigator标签还有uni.navigateTo的时候，页面跳转不成功，pages.json中已经注册过相应页面，没有反应。
解决方法：
在路径前边加上 / 而不使用 …/

2、
自定义底部导航栏，在页面跳转之后，原来没有返回按钮的页面出现了返回按钮。解决方法：
将跳转方法改为返回方法，即将navigateTo改为navigateBack。

二 . 从uniapp使用的开发软件，到创建，到运行，如何打包不同平台的代码，如何打包apk，云打包，如何运行在不同的端

使用软件

我自己是在HBuilder X中开发

创建uniapp项目
关于uniapp的总结
运行uniapp项目

如何打包不同平台的代码
1.需要使用编辑器HBuilder X，和掌握uniapp语法来编写
2.写完以后如何打包上线
先要点击util文件夹下的manifest.json文件完成项目配置
然后点击发行就可以打包成各种类型的版本了
关于uniapp的总结

如何打包apk

云打包，如何运行在不同的端
1. uni-app 云打包流程:

发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包名 -> 去除广告选项 -> 打包
（如果显示已经成功上传到云平台，只需要等待打包的结果即可） - 打包的结果会显示在控制台内，打包成功就会返回一个网址，从网址中可以下载打包的apk文件如果失败
很多时候是manifeast.json文件没有配置成功

2. uni-app mainfeast.json文件配置方法

基础配置中： uni-app标识符(可以云端自动获取)，应用名称(最后显示在- 手机上的应用名称), 版本号什么的自己填即可
app图标配置，在手机上显示的你的app的图标,导入后点击自动生成，即可将所有端的app图标都自动生成
启动sdk的配置，例如地图，进入高德地图的开发者官方自己申请一个即可

三. uniapp怎么进行路由跳转

一、uni.navigateTo(OBJECT)
保留当前页面（跳转新的页面），跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面（非tabBar注册页面使用该方法）

methods: {
	toPath(){
		//跳转非pages.json>tabbar>配置过的页面，使用navigateTo
		//跳转时保留老页面，一般用于需要返回
		uni.navigateTo({
			url:"../one/one"
		})
	}
}

二、uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。（url参数必须填写）

methods: {
			toPath(){
				uni.redirectTo({
					url:"../two/two"//关闭当前页面跳转到two页面
				})
			}
		}

三、uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。（url参数必须填写）

uni.reLaunch({
    url: 'test?id=1'//带参数(如果跳转的页面路径是 tabBar 页面则不能带参数)
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}
**

四、uni.switchTab(OBJECT)**
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（url参数必须填写）
跳转到 tabBar 页面只能使用 switchTab 跳转

methods: {
	toPath(){
		//跳转pages.json>tabbar>配置过的页面，使用switchTab
		 uni.switchTab({
			url:"../news/news"//需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
		 })
	}
}

提示：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。

四 . 怎么配置tabbar

1 配置 pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/message/message",
            "style":{
                "navigationBarTitleText":"信息页",
                "navigationBarBackgroundColor":"#007AFF",
                "h5":{
                    "pullToRefresh":{
                        "color":"#7D26CD"
                    }
                }
            }
        },
        {
            "path": "pages/index/index"
        },
        {
            "path": "pages/contact/contact"
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "绿帽子",
        "navigationBarBackgroundColor": "#7FFF00",
        "backgroundColor": "#7CCD7C",
        "enablePullDownRefresh": true,
        "backgroundTextStyle":"light"
    },
    "tabBar":{
        "color":"#F0AD4E",
        "selectedColor":"#4CD964",
        "backgroundColor":"#007AFF",
        "borderStyle":"black",
        "list":[
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/1237644.png",
                "selectedIconPath":"static/tabs/1237719.png"
            },
            {
                "text":"信息页",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/1246271.png",
                "selectedIconPath":"static/tabs/1262419.png"
            },
            {
                "text":"我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/1262419.png",
                "selectedIconPath":"static/tabs/1289167.png"
            }
        ]
    }
}

2 新建 contact.vue

<template>
	<view>联系我们</view>
</template>
 
<script>
</script>
 
<style>
</style>

五.如何请求接口

const commonUrl = "https://www.xxxxxx/upload/"; //公共路径 

// post请求封装
function postRequest(url, data) {
    var promise = new Promise((resolve, reject) => {
        var that = this;
        var postData = data;
        uni.request({
            url: commonUrl + url,
            data: postData,
            method: "POST",
            header: {
                "content-type": "application/x-www-form-urlencoded",
                token: uni.getStorageSync("token")
            },
            success: function(res) {
                //返回什么就相应的做调整
                if (res.statusCode == 200) {
                    resolve(res.data);
                } else {
                    // 请求服务器成功，但是由于服务器没有数据返回，此时无code。会导致这个空数据
                    //接口后面的then执行
                    // 不下去，导致报错，所以还是要resolve下，这样起码有个返回值，
                    //不会被阻断在那里执行不下去！
                    resolve(res.data.msg);
                }
            },
            error: function(e) {
                reject("网络出错");
            }
        });
    });
    return promise;
}

// get请求封装
function getRequest(url, data) {
    var promise = new Promise((resolve, reject) => {
        var that = this;
        var postData = data;
        uni.request({
            url: commonUrl + url,
            data: postData,
            method: "GET",
            dataType: "json",
            header: {
                "content-type": "application/json"
            },
            success: function(res) {
                if (res.statusCode == 200) {
                    resolve(res.data);
                } else {
                    resolve(res.data);
                }
            },
            error: function(e) {
                reject("网络出错");
            }
        });
    });
    return promise;
}

module.exports = {
    post: postRequest,
    get: getRequest
};

页面引用

import request from '../js/require.js'

使用方式

async onLoad() {
     let {data} = await request("api/user/login")
			console.log(data)
		},

六.如何使用组件

在uniapp官网找到组件市场下载自己需要的组件，根据提示引入组件
详细请看官方网址

七. uniapp基础语法

八.生命周期

应用生命周期函数
监听整个应用,在App.vue中

onLaunch 	当uni-app 初始化完成时触发（全局只触发一次）
onShow 	    当 uni-app 启动，只要应用消失就会触发(如切换其他应用、按了home键等)
onHide 	    当 uni-app ，只要应用消失就会触发(如切换其他应用、按了home键等)
onError 	当 uni-app 报错时触发

页面生命周期函数

onLoad 	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）,触发一次
onShow 	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 		
onReady 	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 	，触发一次	
onHide 	监听页面隐藏 		
onUnload 	监听页面卸载 		
onResize 	监听窗口尺寸变化   App和小程序

九.uniapp中 nvue是什么？描述一下他的特点

nvue是什么

uni-app 的 nvue 说白了就是 weex 的那一套东西，uni-app 集成了 weex 的 SDK，也就实现了 App 端的原生渲染能力。
weex 支持的东西，在 nvue 里大多都是支持的，所以这里就不详细讲述 weex 的相关组件和 api 调用，只讲述一些在实际开发过程中遇到的一些小问题。
特点
不用写display:flex; 自动就是flex布局，但是自动加入了flex-- -derection:column,需要自己覆盖修改
没有%，最好通过获取屏幕宽度动态绑定宽度
border不能简写，分成border-style,border-color,border-width(border-top)
文字显示和绑定只能通过text标签绑定
nvue向vue页面传输许多数据并跳转时，可以使用仓库储存，在onUnload时清空(判断对象是否为空，JSON.stringify(data)==’{}’)
swiper的很多属性不能使用，duration，previous-margin，display-multiple-items等属性

十.如何进行存储数据，获取数据

存储:

uni.setStorage({
key:“属性名”，
data:“值”
})

获取：

uni.getStorage({
key:“属性名”,
success(e){
e.data//这就是你想要取的token
}
})

十一 .css像素单位使用什么最合适

使用rpx

关于uniapp的总结

一 .开发过程中项目出现得问题

tabbar导航栏问题

二 . 从uniapp使用的开发软件，到创建，到运行，如何打包不同平台的代码，如何打包apk，云打包，如何运行在不同的端

三. uniapp怎么进行路由跳转

四 . 怎么配置tabbar

五.如何请求接口

六.如何使用组件

七. uniapp基础语法

八.生命周期

九.uniapp中 nvue是什么？描述一下他的特点

十.如何进行存储数据，获取数据

十一 .css像素单位使用什么最合适

PHP抓取网页、解析HTML常用的方法总结_php实例

css 关于外边距合并的问题

JavaScript全总结之DOM的Element

注解入坑笔记：关于注解使用必须了解的——Annotation、AbstraceProcessor、APT

关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法_PHP教程

[C语言]那些关于函数我们容易忽略的基础知识

PHP关于简单的页面缓冲技术_PHP教程

关于url的解析问题

Java开发项目实例中的技术总结

关于CoordinatorLayout AppBarLayout原理的一些分析