项目目录

pages所有的页面存放目录

static静态资源日录，例如图片等

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的。是页面入口文件，可以调用应用的生命周期 函数。

main.js是我们的项目入口文件。主要作用是初始化vue实例并使用富要的插件。

manifest.json文件是应用的配置文件。用于指定应用的名称、图标、权限等。

pages.json文件用来对uni-app进行全局配置。决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar等

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边枢风格。uni.scss 文件里预置了一批 SC变量预置. unpackage就是打包目录。在这里有各个平台的打包文件

新建文件

components 组件文件夹

**组件存放目录 为了实现多蹦兼容。综合考虑编译速度、运行性能等因素，uni -app约定了如下开发规范: ●页面文件遵循Yue单文件组件(SFO规范 ●组件标签歡近小程序规范，详见uni-app组件规范 ●按口能力(JS API)靠近微信小程序规范。但雷将前缀wox 普换为uni. 详见uni-app按口规范 ●数据绑定及事件处理同Wue.js 规范，同时补充了App及页面的生命周期 ●为兼容多端运行，建议使用flex布局进行开发

组件引入

<Test/>
import Test from '/pages/test/test'
components:{
    Test
}

组件通信

父传子

<son :msg="信息">    父组件传输信息
​
exprot default{
    prop:['msg']    子组件接受信息
} 

子传父

<button @click="fn">发送信息<button>
<script>
export default{
    method{
        fn(){
            this.$emit(msg,'信息')  //子组件发送信息 msg:信息
        }
    }
}
</script>
​
<son @aaa='msg'/>
<script>
export default{
    method{
        aaa(msg){
            console.log(msg)     父组件接受数据 信息
        }
    }
}
</script>

uni.$emit(eventName,OBJECT) 触发自定义事件

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback) 注册自定义事件

监听全局的自定义事件。回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',data=>{
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

pages.json

pages 页面节点

"pages": [{                             //pages数组中第一项表示应用启动页
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件位置"
        }
}],

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

style 每个页面的状态栏

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

globalStyle 总状态栏

用于设置应用的状态栏、导航条、标题、窗口背景色等。

tabBar 导航栏

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级，以及 tab 切换时显示的对应页。

• 当设置 position 为 top 时，将不会显示 icon

• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

  "tabBar": {
      "color":"#fff",
          "list":[{
              "text":"首页",
              "pagePath":"pages/index/index",
              "iconPath":"",
              "selectedIconPath":""
          },{
              "text":"我的",
              "pagePath":"pages/aaa/aaa",
              "iconPath":"",
              "selectedIconPath":""
      }]
  }

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

condition 启动模式配置 仅开发期间生效

仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

"condition":{
    "current":0，        //list索引值
    "list":[
        {
            "name":"",  //名字
            "path":"",  //地址
            "query":""  //参数
        }
    ]
}

list说明：

组件基本使用

text

text组件相当于行内标签，在同一行显示

除了文本节点以外的其他节点都无法长按选中

space 值说明

view

视图容器 类似于传统html中的div

button

rich-text 富文本

image

mode 有效值

有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

scroll-view 可滚动视图区域。用于区域滚动。

样式

●rpx 即响应式px.一种 根据屏幕寬度自适应的动态单位。以750宽的屏幕为基准。750rpx恰好为屏幕宽度。屏 幕变寬。rpx实际显示效果会等比放大。 ●使用@import语句可以导入外联精式表，@import 后跟需要导入的外联样式表的相对路径。用;表示语句结 束 ●支持基本常用的选择器class. id. element等 ●在uni-app 中不能使用。选择器。 ●page相当于body 节点 ●定义在App.vue中的样式为全局样式，作用于每一“个页面。 在pages目录下的vue文件中定义的样式为局部 样式，只作用在对应的页面。并公覆蓝App.vue中相同的选择器。 ●uni-app支持使用字体图标，使用方式与普通web项目相同。需要注意以下儿点: 。字体文件小于40kb. uni-app 公自动将其转化为base64格式: 。字体文件大于等于40kb. 雷开发者自己转换，否则使用将不生效: 。字体文件的引用路径推荐使用以~@开头的绝对路径。

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}

应用生命周期

// 只能在App.vue里监听应用的生命周期
	export default {
		onLaunch: function(options) {
			console.log('App Launch')
			console.log('应用启动路径：', options.path)
		},
		onShow: function(options) {
			console.log('App Show')
			console.log('应用启动路径：', options.path)
		},
		onHide: function() {
			console.log('App Hide')
		}
	}

页面生命周期

函数

下拉刷新

onPullDownRefresh()函数 监听该页面用户下拉刷新事件

uni.stopPullDownRefresh() 函数 停止当前页面下拉刷新。

onPullDownRefresh(){
    console.log('触发刷新了')
    setTimeout(()=>{
        uni.stopPullDownRefresh()   //停止刷新
    },2000)
    
}

上拉加载

onReachBottom() 函数 监听页面底部触底事件

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance

onReachBottom(){
    console.log('页面触底了')
}

网络请求

uni.request({})

uni.request({
    url: 'http://127.0.0.1:3000/list',
	success(res) {
		console.log(res);
	}
})

本地数据缓存

uni.setStorage({}) 异步存储

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.setStorageSync(KEY,DATA) 同步存储

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

uni.getStorage(OBJECT) 获取

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

success 返回参数说明

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

uni.getStorageSync('key');

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

uni.removeStorageSync('storage_key');

uni.clearStorage()

清理本地数据缓存。

媒体

uni.chooseImage({})

从本地相册选择图片或使用相机拍照。

• count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

uni.previewImage(OBJECT)

预览图片。

<image v-for="(item,index) in list" :src="item" mode="" @click="preview(item)"></image>
preview(current){
    uni.previewImage({
        current,
        urls:this.list 
    })
}

跨端兼容

条件注释实现跨端兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法： 以 #ifdef 加平台标识开头，以 #endif 结尾

template
<!-- #ifdef H5 -->
<text>只能在H5中看到</text>
<!-- #endif -->
script
// #ifdef H5
console.log("只在H5中打印")
// #endif
style
/* #ifdef H5 */
div{
    width:100%
}
/* #endif */

导航跳转

navigator 声明式导航

页面跳转。

<navigator url="/pages/list/index">跳转</navigator>

open-type 有效值

uni.navigateTo({})编程式导航 onLoad(url) 接收数据

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.navigateTo({
    url:'/pages/index/index?id=1&a=2'
})

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: '/pages/index/index?id=1&a=2'
});

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
	url: '/pages/index/index?id=1&a=2'
});

request 全封装异步方法

// const baseUrl = "http://127.0.0.1:8080/";
const baseUrl = 'http://localhost:3000' //api的固定前部地址
const request = (url, method = "get", data) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + url, //拼接请求路径
			data: data,
			method: method,
			header: {
				// 'content-type': 'application/json',
				//token: uni.getStorageSync('token')!= null ? uni.getStorageSync('token'): ''//请求头发送token，可选
			},
			success: (res) => {
				resolve(res)
			},
			fail: (error) => {
				reject(error)
			}
		})
	})
}
let post = (url, data) => {
	return request(url, "post", data);
}
let get = (url, data) => {
	return request(url, "get", data);
}

//暴露函数
export default {
  post,
  get,
};

使用方法

与pages目录同级创建api文件目录 内js文件内容

import request from '@/utils/request.js'

//列表数据
export const  CatList_api = data => request.get("/CatList", data);

//图片数据
export const  CatImg_api = data => request.post("/CatImg", data);

在使用的组件中导入js文件

<script>
	import {
		CatGoods_api
	} from '@/api/list.js'  //导入
	export default {
		data() {
			return {
				CatShop: [], 
				currentPage: 1,
				total: 0,
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
                //currentPage传参数
				let CatShop = await CatGoods_api({currentPage: this.currentPage})   
                //将后台数据赋值
                this.CatShop=CatShop              
			}
		},


</script>