uni-app小零碎(包括封装网络请求)

uni-app项目和pages同级的static不能放css js 只能放静态文件，比如图片
可以新建同级文件夹common 来存放css和js

父子 子父
兄弟传值 还有高阶用法 provide inject

全局注册
在main.js中

// 导入模块
import global from "./utils/global.js"
Vue.prototype.$global=global
1
2
3

在global.js中

// 全局的公共数据存储模块

const baseUrl="http://localhost:3000";



export default{
	baseUrl,
}

1
2
3
4
5
6
7
8
9
10

在Index.vue中使用

mounted(){
			console.log(this.$global.baseUrl)
		},
1
2
3

引入静态资源

css:
绝对路径：
@ /根
相对路径：
./ …/ …/…/
js
绝对路径
@
相对路径
…/…/ ./

图片
绝对路径
@/ /
相对路径
./ …/ …/…/
js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';
1
2
3
4

css
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>
1
2
3
4
5
6
7

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
1
2
3
4
5

环境判断
直接判断是生产环境还是开发环境：在mounted中打印这句话，其他vue项目也是这个吗 明天看看

平台判断

	
		
		
		小程序按钮
		
		
		
		H5按钮
		
		
	
	
		
		
		除了h5
		
		点击
		
		
			
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在methods中

	_click(){
				// #ifdef H5
				console.log('h5打印')
				// #endif
				// #ifdef MP-WEIXIN
				console.log('小程序打印')
				// #endif
			}
1
2
3
4
5
6
7
8

style中

1
2
3
4
5
6
7
8
9
10
11
12
13

也就是说编译期判断可以在template js css中包括json中也可以做判断
不只是能在单单的vue中
如果想判断ios或者安卓 那需要在 运行期判断中

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

		mounted(){
			// console.log(process.env.NODE_ENV)
			console.log(this.$global.baseUrl)
			let platform=uni.getSystemInfoSync().platform
			console.log(platform,'运行期判断')  //在小程序开发工具中，打印为devtools 在模拟器上切换为安装就打印android,切换为ios就打印ios 不切换手机状态就打印window
			switch(platform){
				case 'android':
						console.log('运行Android上');
						break;
				case 'ios':
						console.log('运行iOS上');
						break;
				case "devtools":
						console.log('小程序')
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

页面样式与布局–尺寸单位

设计稿尺寸为750px时，就是px=rpx，直接改成rpx即可

200px=200rpx

但是如果设计稿宽度不是750,那就用实际宽度除以750，比如是640px

就设计成0.85


同样得到宽度尺寸

封装网络请求
1，新建utils文件夹
在utils文件夹下新建global.js

// 全局的公共数据存储模块

// const baseUrl="http://localhost:3000";
let baseUrl=null;
// development 开发环境 production生产环境
if(process.env.NODE_ENV== "production"){
	baseUrl="https://test.api.com"  //随便写的
}else{
	baseUrl="http://localhost:3000"
}



export default{
	baseUrl,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

http.js中写网络请求

// 封装网络请求
import global from "./global.js"
const http=(options={})=>{
	/*
	options={
		url,
		data,
		method,
		header
	}
	
	*/
	return new Promise((resolve,reject)=>{
		// 发起请求，
		uni.request({
			url:global.baseUrl+options.url,
			method:options.method || "get",
			data:options.data || {},
			header:options.header || {
				"content-type":"application/json"
			},
			success:resolve,
			fail:reject,
		})
	})
}

export default http;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

然后在api.js中写接口管理

// 统一接口管理
import http from "./http.js"
import global from "./global.js"
// 测试
const _getProducts=()=>{
	let options={
		url:"/v2/products",
		method:"get",
		data:{}
	}
	
	return http(options)
}

export default{
	_getProducts,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在main.js中挂载网络请求

// 导入模块
import global from "./utils/global.js"
Vue.prototype.$global=global
1
2
3

在页面中使用

async _apiData(){
				let res=await this.$api._getProducts()
				console.log(res)
			}
1
2
3
4

能用的在线api ----aslegou这个可以用

如果循环数组用 v-for = for 如果循环数组套对象用 of

<block v-for="(item,ind)  of  fisrtCate" :key="ind">
					<view class="uni-tab-item" @click="_toProductPage(ind+1,item.id)">
						<text class="uni-tab-item-title" :class="firstCateAtiveIndex == ind+1 ? 'uni-tab-item-title-active' :''">{{ item.catename }}</text>
					</view>
				</block>
1
2
3
4
5