学习笔记-uni-app

环境准备

• 安装HBuilderX
• 安装插件
  • 内置浏览器
  • 内置终端
  • app真机运行
  • prettier
  • scss/sass编译

项目搭建

• div h1标签都是web标签，无法自动转化未小程序，app
• 必须使用官方兼容性标签 view text
• 标签
  • view
  • text
  • navigator
    • 页面跳转
    • 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
    • onLaunch
    • onShow
    • onHide
• 页面生命周期
  • onLoad
  • onShow
  • onHide
  • onReachBottom
    • 上拉触底
  • 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

  • 弹出层
  • 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:()={
    
        // 不管成功失败都会调用
    }
})

条件编译

• idndef
• iddef

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