学习笔记-uni-app

环境准备 安装HBuilderX安装插件 内置浏览器内置终端app真机运行prettierscss/sass编译 项目搭建 div h1标签都是web标签，无法自动转化未小程序，app必须使用官方兼容性标签 view text标签 viewtextnavigator 页面跳转url button button

<button type="default" @click="goDetail">详情页button>

methods: {
    goDetail() {
        // 页面跳转
    	uni.navigateTo({
    		url: '../detail/detail',
    		success: res => {},
    		fail: () => {},
    		complete: () => {}
    	});
    }
}

url参数传递

// 定义参数
data(){
    return {
        name:'xx',
        age:30
    }
}

navigator参数传递

<navigator :url="`../detail/detail?name=${name}&age=${age}`">详情页navigator>

uni.navigateTo参数传递

uni.navigateTo({
	url: `../detail/detail?name=${this.name}&age=${this.age}`,
});

获取url参数

data(){
  return {
      name:'',
      age:''
  }  
},
onLoad(e){
    console.log(e)
    const {age,name} = e;
    this.age = age
    this.name = name
}

pages.json tabBar

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/wx.png",
			"selectedIconPath": "static/wx_hl.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/my/my",
			"iconPath": "static/my.png",
			"selectedIconPath": "static/my_hl.png",
			"text": "我的"
		}]
	}

pages.style.enablePullDownRefresh 是否允许下来刷新 manifest.json h5 设置代理

"h5":{
    "devServer":{
        "proxy":{
            "/xxx":{
                "target":"https://xxx/xxx",
                "changeOrgin":true;
                "secure":true,
                "pathRewrite":{
                    "^/xxx":""
                }
            }
        }
    }
}

components easycom机制组件必须放入改文件夹 生命周期 应用生命周期 App.vue onLaunchonShowonHide 页面生命周期 onLoadonShowonHideonReachBottom 上拉触底 onPullDownRefresh 下来刷新 组件生命周期 vue相关 mounted 组件 uni_ui uni-badge 数字角标

<uni-badge size="small" :text="100" absolute="rightTop" type="primary">
	<button type="default">右下button>
uni-badge>

uni-card 卡片

<uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息">
	<text>这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。text>
uni-card>

uni-dateformat

日期

uni-collapse

uni-collapse-item折叠面版

uni-notice-bar

通告栏

uni-list

uni-list-item列表组件

uni-load-more

加载更多onReachBottom 监听页面触底

uni-rate

评分

uni-steps

步骤条

uni-popup

d出层open()close()

uni-grid

宫格

uni-swiper-dot

swiper swiper-item 轮播图

scroll-view

滚动栏

uni-search-bar

搜索栏

uni-index-list

索引列表

uni-goods-nav

商品导航 网络请求 uni.request

uni.request({
    url:'',
    method:'GET',
    data:{},
    success:res=>{
        // 成功时调用
        console.log(res)
    },
    fail:()=>{
        // 失败时调用
    },
    complete:()={
        // 不管成功失败都会调用
    }
})

条件编译 idndefiddef

// 如果不是h5,编译该url
#idndef H5
url:"https://xxx/xxx"
#endif
// 如果是h5,编译该url
#ifdef 
url:'/xx/xx'
#endif