uni-app入门学习总结

uni-app知识点总结

来源：bilibili-Uni-App从入门到实战-黑马程序员杭州校区出品

官方文档：uni-app官网

配置文件

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

• 配置pages和globalStyle字段
  • navigationBarBackgroundColor 导航栏背景颜色（同状态栏背景色）
  • navigationBarTitleText 导航栏标题文字内容
  • enablePullDownRefresh 是否开启下拉刷新，详见页面生命周期。
  • onReachBottomDistance 页面上拉触底事件触发时距页面底部距离
  • …
• tabBar字段
  • iconPath 图片路径
  • selectedIconPath 选中的图片路径
  • …

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

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

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

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss全局变量预置。

pages所有的页面存放目录

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

components组件存放目录

组件

text

属性

• selectable 文本是否可选
• space 是否显示连续空格
• decode 是否解码

text 组件相当于行内标签、在同一行显示，除了文本节点以外的其他节点都无法长按选中

view

类似于 div

其他属性见官方文档

image

• src 地址
• mode 裁剪方式

页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

样式、数据绑定

• 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， 需开发者自己转换，否则使用将不生效；

  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

~@/static/iconfont.ttf

直接在data的return中定义数据即可，和vue一样

插值表达式也和vue一样，同样也可以进行基本运算和三元运算

也可以进行动态渲染和事件传参

上拉加载、下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

	export default {
   
		data () {
   
			return {
   
				arr: ['前端','java','ui','大数据']
			}
		},
		methods: {
   
			startPull () {
   
				uni.startPullDownRefresh()
			}
		},
		
		onPullDownRefresh () {
    // 下拉刷新
			this.arr = []
			setTimeout(()=> {
   
				this.arr = ['前端','java','ui','大数据']
				uni.stopPullDownRefresh()
			}, 1000);
		},
        	onReachBottom () {
     // 上拉加载
			console.log('触底了')
		}
	}

利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

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

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

goAbout () {
   
  uni.navigateTo({
   
    url: '/pages/about/about',
  })
}

通过switchTab跳转到tabbar页面

跳转到tabbar页面

<button type="primary" @click