uniapp笔记和坑

最新推荐文章于 2024-05-08 23:39:44 发布

小曲曲

最新推荐文章于 2024-05-08 23:39:44 发布

阅读量1.5k

点赞数 2

分类专栏： uniapp

本文链接：https://blog.csdn.net/weixin_43848576/article/details/107424925

版权

uniapp 专栏收录该内容

38 篇文章 6 订阅

订阅专栏

bug

固定时间转时间戳 new Date(2020-12-20 12:10:10).getTime() 在ios手机获取不到时间戳，
需要采用 new Date(2020，12，20，12，10，10).getTime()

注意事项（重难点）

需要下载 HBuildX 和微信开发工具
可运行在浏览器（H5）,微信开发工具（小程序），手机或模拟器（app）

微信运行

新建 uniapp 项目后，点击运行在微信编辑器的时候，若是第一次，会弹窗输入微信编辑器安装包所在的文件目录
如果在微信编辑器运行失败，需要编辑器——设置——安全设置——开启服务器端口
小程序上传后，需要配置安全域名并且在微信开放平台绑定小程序才能获取uniID登录

手机运行

第一次连接手机，设置——关于手机——连续点击版本号激活开发者模式
设置——系统和更新——开发人员选项——USB调试开启——信任当前计算机
重新插上连接线——运行在手机——运行后会在手机安装调试工具，点击手机上的工具即可打开
如果使用第三方需要打自定义调试基座运行，更接近真机

安卓证书

不同项目可以使用一个安卓证书，但是包名不能重复，否则手机安装不上第二个app

微信登录和支付

微信登录和支付需要配置appid和ios通用链接
申请需要咋微信开放平台——管理中心——创建应用——填写资料（需要一个简单官网，一个页面即可有名称就行，包名和应用签名）——等待审核
获取应用签名：安卓证书——打包app——安装在手机——下载微信工具安装在手机（GenSignature）——输入app包名——即可获取

生命周期

建议使用onLoad代替created 调接口；使用onReady代替mounted

在任何页面均可以使用vue生命周期，组件中只能使用vue生命周期，页面中推荐小程序的生命周期
监听app卸载可以在app.vue文件使用beforeDestroy()
tabbar页面没有onUnload()卸载页面的方法，所以app打开之后主页面只会执行一次onLoad，只会执行onShow和onHide，所以如果需要刷新页面，在onShow里初始化或者下拉刷新，如果需要传参，只能使用uni.$emit()

bug

如果不用自定义基座正常，用自定义基座出问题，就是key有问题（安卓可以申请sha1问题）

基础语法

单位 750rpx
全局样式引入：app.vue文件style标签中加入 @import url(相对路径) 或 @import “相对路径”
根目录文件 /static 或者@/static
js文件引入：绝对或相对路径，例如：import add from ‘@/common/add.js’
js文件不支持使用/开头的方式引入
css引入绝对和相对均可 @import url(’/common/uni.css’); 或 @import url(’@/common/uni.css’);
小程序背景图不支持本地图片
可以使用less或sass，插件安装即可
less声明变量 @color:red; sass 声明变量 $color:red;

重要语法

data，methods，computed,components语法都和vue相同![生命周期和路由和小程序相同]
全局组件注册使用以及父子组件传值和vue相同
动态类 :class="{ active: isActive }"
动态样式 :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"

app自定义头部右边内容

在这里插入图片描述

//
{
			"path": "pages/home/mem-detail",
			"style": {
				"navigationBarTitleText": "会员详情",
				"app-plus": {
					"titleNView": {
						"buttons": [ //原生标题栏按钮配置,
							{
								"text": "保存", //
								"color":"#0072FF",
								"fontSize":"14px",
								"width":"40px"
							}
						]
					} //禁用原生导航栏
				}
			}
		},

//vue页面
		methods:{
			onLoad(options){
				this.id = options.id;
			},
		},
		onNavigationBarButtonTap(){  //与methods平级
			console.log(this.id);
		}

自定义navbar

状态栏占位

<!-- #ifdef APP-PLUS -->  
<view class="status_bar">  
    <view class="top_view"></view>  
</view>  
<!-- #endif -->

.status_bar {  
    height: var(--status-bar-height);  
    width: 100%;  
    background-color: #F8F8F8;  
}  
.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    background-color: #F8F8F8;  
    top: 0;  
    z-index: 999;  
}

原生导航栏自定义按钮带红点和角标

{  
    "path" : "nav-dot/nav-dot",  
    "style" : {  
        "navigationBarTitleText" : "导航栏带红点和角标",  
        "app-plus" : {  
            "titleNView" : {  
                "buttons" : [  
                    {  
                        "text" : "消息",  
                        "fontSize" : "14",  
                        "redDot" : true  
                    },  
                    {  
                        "text" : "关注",  
                        "fontSize" : "14",  
                        "badgeText" : "12"  
                    }  
                ]  
            }  
        }  
    }  
}

目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
 common                 公共的css、js文件

自定义组件

可以在根目录的components文件夹中创建全局组件，在main.js中全局注册
可以在每一个模块建一个components文件夹，创建局部组件，然后在页面中引入并注册
父子组件传值和vue相同，使用props和this.$emit
兄弟组件传值，使用全局方法uni. $e m i t 和 u n i .$ on,也可用于页面间传值

在需要接受的组件的created或onLoad函数中，定义监听方法
uni.$on('方法名',(参数)=>{
	处理函数
})
在需要触发的组件中，在合适的时机去触发
uni.$emit('方法名',参数)

onUnload() {  
    // 移除监听事件  
    uni.$off('方法名');  
},

开发环境和开发平台

// 开发环境
if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

// 开发平台
switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

引入UI库uview

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init -y

// 安装
npm install uview-ui

// 更新
npm update uview-ui

安装sass

==uView依赖SASS==

如果您的项目HBuilder X创建的，工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
如果您的项目是由vue-cli创建的，
// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

配置

// main.js
import uView from "uview-ui";
Vue.use(uView);

/* uni.scss */
@import 'uview-ui/theme.scss';

//app.vue
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

生命周期(重要)

建议使用onLoad代替created 调接口；使用onReady代替mounted

在任何页面均可以使用vue生命周期，组件中只能使用vue生命周期，页面中推荐小程序的生命周期
监听app卸载可以在app.vue文件使用beforeDestroy()
tabbar页面没有onUnload()卸载页面的方法，所以app打开之后主页面只会执行一次onLoad，只会执行onShow和onHide，所以如果需要刷新页面，在onShow里初始化或者下拉刷新，如果需要传参，只能使用uni.$emit()

执行顺序如下

App.vue  页面周期
onLaunch:function(){//当uni-app 初始化完成时触发（全局只触发一次）
   console.log('App onLaunch')
}
onShow: function() {//当 uni-app 启动，或从后台进入前台显示
   console.log('App Show')
},

页面中的生命周期函数:
created() {//vue生命周期  页面创建时调用
   console.log('created');
},
onLoad() {//监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参
   console.log('onLoad');
 },
 onShow(){//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
   console.log('onShow');
 },
 mounted() {//vue 生命周期 ,html挂载的时候 调用
   console.log('mounted');
},
onReady(){//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
   console.log('onReady');            
 },

应用生命周期（app.vue中）

onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

应用生命周期仅可在App.vue中监听

页面生命周期

onLoad	监听页面加载，参数类型为Object（用于页面传参option）
onShow	监听页面显示，页面返回
onHide	监听页面隐藏
onUnload	监听页面卸载
onReady	页面初次渲染完成
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

路由（小程序一样）

在这里插入图片描述

uni-app已支持代码块

tag

uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper

uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay

小曲曲

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
uniapp笔记和坑

注意事项需要下载 HBuildX 和微信开发工具可运行在浏览器（H5）,微信开发工具（小程序），手机或模拟器（app）新建 uniapp 项目后，点击运行在微信编辑器的时候，若是第一次，会弹窗输入微信编辑器安装包所在的文件目录如果在微信编辑器运行失败，需要编辑器——设置——安全设置——开启服务器端口运行在手机，需要连接手机，点击项目选中状态在运行，运行后会在手机安装调试工具，点击手机上的工具即可打开...
复制链接

扫一扫