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

在global.js中

// 全局的公共数据存储模块const baseUrl="http://localhost:3000";export default{baseUrl,}

在Index.vue中使用

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

引入静态资源

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

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

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

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

<style>    @import "../../common/uni.css";    .uni-card {        box-shadow: none;    }</style>

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>

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

平台判断

小程序按钮H5按钮除了h5点击

在methods中

_click(){// #ifdef H5console.log('h5打印')// #endif// #ifdef MP-WEIXINconsole.log('小程序打印')// #endif}

style中

/*  */.box{width: 200px;height: 200px;/* #ifdef H5 */background: #00FFFF;/*  #endif*//* #ifdef MP-WEIXIN */background: #ff0;/* #endif */}

也就是说编译期判断可以在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().platformconsole.log(platform,'运行期判断')  //在小程序开发工具中，打印为devtools 在模拟器上切换为安装就打印android,切换为ios就打印ios 不切换手机状态就打印windowswitch(platform){case 'android':console.log('运行Android上');break;case 'ios':console.log('运行iOS上');break;case "devtools":console.log('小程序')}},

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

设计稿尺寸为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,}

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;

然后在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,}

在main.js中挂载网络请求

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

在页面中使用

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

能用的在线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>