Uniapp 小程序

目录

页面路由以及标题/tab栏配置

应用与页面的生命周期

条件编译（跨端）

导入外部样式

实现全局变量

小程序Https

---

---

页面路由以及标题/tab栏配置

pages底下所有的页面都要在pages.json中配置页面路由，实际上创建页面时，框架也会为我们自动创建：

{
    "pages": [ 
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{ 
            //自动创建
            "path" : "pages/hello/hello",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "私有页面标题",  //覆盖全局标题
                "enablePullDownRefresh": false
            }
            
        }
    ]

}

{
    "page": [],
    "globalStyle": {   //标题栏
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",   //导航栏颜色
		"backgroundColor": "#F8F8F8"  //窗口背景色
	}
}

{
    "pages": [],
    "globalStyle": {},
    "tabBar":{		
        "color":"#8F8F94",		
        "selectedColor":"#007AFF",		        
        "backgroundColor":"#FFFFFF",		
        "borderStyle":"black",		
        "list":[{				
            "pagePath":"pages/index/index",				
            "text":"首页",	                        
            "iconPath":"static/tabBar/index1.png",
            "selectedIconPath":"static/tabBar/index2.png"			
         },			
        {
            "pagePath":"pages/me/me",				
            "text":"我的",
            "iconPath":"static/tabBar/mine1.png",
            "selectedIconPath":"static/tabBar/mine2.png"			
        },{
            "pagePath":"pages/search/search",
            "text":"搜索",
            "iconPath":"static/tabBar/search1.png",
            "selectedIconPath":"static/tabBar/search2.png"			
            }		
        ]}
}

应用与页面的生命周期

应用的生命周期    app.vue中的函数触发时机:

<script>
	export default {
		onLaunch: function() { //当uni-app 初始化完成时触发（全局只触发一次）
			console.log('App Launch')
		},
		onShow: function() { //当 uni-app 启动，或从后台进入前台显示
			console.log('App Show')
		},
		onHide: function() { //当 uni-app 从前台进入后台
			console.log('App Hide')
		},
		onError: function() { //当 uni-app 报错时触发
			console.log('onError')
		},
		onPageNotFound: function() { //	页面不存在监听函数
			console.log('onPageNotFound')
		}
	}
</script>

页面的生命周期 

onLoad() {
    console.log('页面加载')
},
onShow() {
    console.log('页面显示')
},
onReady() {
    console.log('页面初次渲染完成')
},
onHide() {
    console.log('页面隐藏')
},
onUnload() {
    console.log('页面关闭')
},
onShareAppMessage() {
    console.log('页面分享')
},
onPageScroll() {
    console.log('页面滚动')
},
onBackPress() {   // 不支持小程序，通常写在onLoad中
    console.log('页面返回')
},

条件编译（跨端）

// **写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾

// #ifdef：if defined 仅在某平台存在
// #ifndef：if not defined 除了某平台均存在
// %PLATFORM%：平台名称

//.vue

 <!-- #ifdef H5  -->  
  <view> 只在H5编译 </view>  
 <!-- #endif -->  

 <!-- #ifdef MP-WEIXIN  -->  
  <view> 只在微信小程序编译 </view>   
 <!-- #endif -->  

 <!-- #ifndef MP  -->   
     <view> 不在小程序全端编译，只在IOS、Android、H5编译 </view> 
 <!-- #endif -->


//.js

onLoad() {		
    // #ifdef H5		
    console.log("只在H5编译");		
    // #endif	
},

//  .css

<style>	
    /* 在多端显示不同的颜色 */	
.color {  		
    /* #ifdef H5 */		
    background-color: #4CD964;		
    /* #endif */				

    /* #ifdef APP-PLUS */		
    background-color: #007AFF;		
    /* #endif */				
    width: 200upx;		
    height: 200upx;	
}
</style>

导入外部样式

<style>	
    @import url("flex.css");
</style>

实现全局变量

方式一：在commons/commons.js中提取全局变量

const doubanUrl ="https://images.weserv.nl";

export default {	doubanUrl }


//  在需引入的文件中导入common： 
import common from "../../commons/commons.js"

//拼接使用"image":

common.doubanUrl+"/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp"

方式二：在main.js中挂载到Vue：

Vue.prototype.doubanUrl="https://images.weserv.nl";

// 所有页面都可以获取Vue对象（this.即可，无需import）：

"image":this.doubanUrl+"/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",

小程序Https

需要登录之后对域名进行配置，并且只支持Https协议。

一旦允许某些域名之后，就可以不用勾选“不校验合法域名、HTTPs证书”。

滚动穿透事件touch-action

手动写弹窗的时候，透明黑色背景fixed定位，以隔绝对页面的点击影响

但页面过长的时候，在黑色背景上下滑动页面，底下一层内容也跟着滚动，期望不滚动

可以利用css的touch-action来禁止

.layout {
    touch-action: none; // 禁用浏览器处理所有平移和缩放手势。
}

auto: 启用浏览器处理所有平移和缩放手势。

manipulation: 启用平移和缩放手势，但禁用其他非标准手势，例如双击缩放。

pinch-zoom: 启用页面的多指平移和缩放。

内容超过2M的处理方式之一

咱们可以通过配置 project.config.json 文件，可以忽略某些文件（如图片等）以减少预览发布资源所占空间的大小

"packOptions": {
  "ignore": [
    {
      "type": "folder",
      "value": "static"
    }
  ]
}