去掉button组件自带的边框

# 去掉button组件自带的边框

button::after { border: none }

# 全局背景颜色设置方式

page {
	background-color: #F0AD4E;
}

# 隐藏⼿机最顶部的系统状态栏

如果页⾯需要全屏显⽰，需要去掉⼿机最顶部⼿机⾃带的系统状态栏，可以单个页⾯隐藏，也可以整个应⽤隐藏

// 设置单个页全屏
onShow() {
  plus.navigator.setFullscreen(true);
}
// 如果不加这句，会导致跳转到别的页后也是全屏
onUnload() {
  plus.navigator.setFullscreen(false);
}

// 整个应用隐藏需要到onLaunch这个生周期函数
onLaunch: function() {
  plus.navigator.setFullscreen(true);
}

# 横竖屏设置

// 整个项目的横竖屏设置
onLaunch: function() {
  // 锁定横屏
  plus.screen.lockOrientation("landscape-primary");  
  // 锁定竖屏   
  plus.screen.lockOrientation("portrait-primary");
}

//单个页面设置横屏
onLoad(option) {
  setTimeout(function(){
    plus.screen.lockOrientation('landscape-primary');
  },10)
}
// 监听页面返回
onBackPress(e) {
  // plus.screen.unlockOrientation(); // 解除屏幕方向的锁定，但是不一定是竖屏；
  uni.redirectTo({
    url: 'login'
  });
  plus.screen.lockOrientation('portrait'); // 锁死屏幕方向为竖屏
  return true;
},

# 禁止页面穿透

<view class="mask" catchtouchmove="true" ></view>

# 清除定时器

onHide() {
	clearInterval(this.interval);
}

# 利用adb无线连接android手机进行调试

手机和我们的电脑要处于同一网络，就是两个设备之间的ip地址能够连通
手机端下载安装ADB工具下载 (opens new window)
将HBuilderX带的adb程序路径（D:\编程\HBuilderX\HBuilderX\plugins\launcher\tools\adbs）复制，放到Path中（环境变量）
查看adb的版本（测试是否能使用）：adb version
使用adb命令查看连接的设备：adb devices
使用adb命令让手机连接上电脑：adb connect 172.25.238.3:5555
查看连接的设备：adb devices
配置HBuilderX的ADB路径，然后运行到Android App基座

# 真机运行提示Connection refused

java.net.ConnectException: Connection refused

修改真机运行的端口：工具->设置->运行配置->Android模拟器端口->26944

# 保持屏幕常亮方法-NoSleep插件

移动端在浏览H5网页时，经过一段时候后系统会黑屏，手机进入休眠模式。NoSleep插件旨在让任何Android ，iOS浏览器不进入休眠状态，保持屏幕常亮

# 原理

NoSleep插件激活时会在H5网页中生成一段mp4视频，从而保证设备常亮

# 使用

引入NoSleep库，库在这里 (opens new window)

<script src="js/NoSleep.min.js"></script>

初始化组件

// init noSleep
var noSleep = new NoSleep();
// Enable wake lock.
// (must be wrapped in a user input event handler e.g. a mouse or touch handler)
// noSleep.enable()初始化方法必须绑定在鼠标事件或触摸事件内，
// 当点击页面时就会激活不休眠功能
document.addEventListener('click', function enableNoSleep() {
	document.removeEventListener('click', enableNoSleep, false);
	noSleep.enable();
	console.log('enable noSleep');
}, false);

# uni.navigateBack返回后刷新页面数据的实现

列表页

<view v-for="(item,i) in data" :key="index">
  <view :item="item"></view>
</view>
<script>
data(){
	return{
		data:[]
	}
}
</script>

子页面

uni.navigateBack({
    delta: 1, // 返回层数，2则上上页
    success() {
        uni.$emit('update',{msg:'页面更新'})
    }
})

父页面

mounted() {
	let that = this;
	uni.$on('update', function(data) {
		console.log('触发更新后')
		
		// 清空当前数据
		that.data= []
		that.list()
	})
},
// 为了优化代码，可以加上移除事件，避免重复监听事件
onUnload() {
	// 移除监听事件  
	uni.$off('update');
},
methods:{
	list(){
	
	}
}

← 基础介绍