运行环境判断

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换

在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

devolopment   开发环境
production    生产环境

let baseurl = null
if(process.env.NODE_ENV=='development'){
	// 开发环境
	baseurl = "http://localhost:3000"
}else{
	// 生产环境
	baseurl="http://yangyayue.club"
}

四、平台判断

1编译期判断 （条件编译）

编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码

用途：
不同的平台  展示不同的效果
发布多端时，就微信小程序端有问题，就用条件编译单独解决这一端的问题
tempalte
		<!-- #ifdef H5 -->
			<button type="primary">只在h5显示</button>
		<!-- #endif -->
		
		
		
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary">只在微信小程序显示</button>
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
		
		<button type="default">除了h5端都显示</button>
		<!-- #endif -->


js
			_click(){
				// #ifdef H5
					uni.showToast({
						title:"点击了h5"
					})
				// #endif
			
				
				
				// #ifdef MP-WEIXIN
					uni.showToast({
						title:"点击了微信小程序"
					})
				// #endif
				
				
			}



css
        /* #ifdef  H5*/
        button.btn{
            background-color: red;
        }

        /* #endif */


    /* #ifdef MP-WEIXIN */
        button.btn{
            background-color: yellow;
        }
    /* #endif */

2运行期判断

运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）

    		let platform = uni.getSystemInfoSync().platform
			console.log(platform)
			if(platform=="android"){
				console.log("运行在安卓手机上")
			}else if(platform == "ios"){
				console.log("运行在苹果手机上")
			}else{
				console.log("运行在开发者工具上")
			}

五、网络请求

1数据请求

uni.request({
	url:"",
	method:"get、post",
	data:{},
	header:{"content-type":"application/json"},
	success(){},
	fail(){}
})

2、后端解决跨域

//  先下载  cors    npm install cors

app.js

const cors = require("cors")
app.use(cors())

2模块封装promise

config.js  主域名
    let baseurl = null
    if(process.env.NODE_ENV=='development'){
        // 开发环境
        baseurl = "http://localhost:3000"
    }else{
        // 生产环境
        baseurl="http://yangyayue.club"
    }

    export default baseurl

http.js    网络请求

import baseurl from "./config.js"
const http = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseurl + options.url,
			method:options.method || "GET",
			data:options.data  || {},
			header:options.header || {"content-type":"application/json"},
			success:resolve,
			fail:reject
		})
	})
}

export default http;

骨架屏

https://www.uviewui.com/components/skeleton.html  骨架屏位置

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。

​	该组件原理是通过uni的uni.createSelectorQuery接口，查询页面带有指定类名的元素的位置和尺寸， 通过绝对定位的方式，用同样尺寸的灰色块定位到相同的位置。所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置.

组件名称：

​	u-skeleton 

类名要求：

​```js
u-skeleton(必须)，该类名用于页面的最外层元素，供骨架屏组件查询和定位出绘制骨架的位置和尺寸
u-skeleton-circle(可选)，该类名用于页面的圆形元素，供骨架组件描绘出圆形的骨架块
u-skeleton-rect(可选)，该类名用于页面的矩形元素，供骨架组件描绘出矩形的骨架块
u-skeleton-fillet(可选)，该类名用于页面的矩形带圆角元素，供骨架组件描绘出矩形带圆角的骨架块
​```