uni-app第二篇补充（平台判断、网络请求、骨架屏）

2021-05-16 20:32:25 阅读：284 来源： 互联网

标签：http 编译 app 骨架 baseurl platform uni 第二篇

运行环境判断

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(可选)，该类名用于页面的矩形带圆角元素，供骨架组件描绘出矩形带圆角的骨架块
```

标签：http,编译,app,骨架,baseurl,platform,uni,第二篇
来源： https://blog.csdn.net/weixin_49030317/article/details/116902222

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9