关于uniapp的总结

uniapp 专栏收录该内容
3 篇文章 0 订阅

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

tabbar导航栏问题

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

解决方法

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

路径跳转出现问题

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

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

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

使用软件

我自己是在HBuilder X中开发

创建uniapp项目
在这里插入图片描述
运行uniapp项目
在这里插入图片描述

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

如何打包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
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值