精华内容
下载资源
问答
  • uni-app的基本使用笔记总结
    2021-05-26 11:24:11

    uni-app的基本使用

    课程介绍:

    基础部分:

    • 环境搭建
    • 页面外观配置
    • 数据绑定
    • uni-app的生命周期
    • 组件的使用
    • uni-app中样式学习
    • 在uni-app中使用字体图标和开启scss
    • 条件注释跨端兼容
    • uni中的事件
    • 导航跳转
    • 组件创建和通讯,及组件的生命周期
    • uni-app中使用uni-ui库

    项目:黑马商城项目

    uni-app介绍 官方网页

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

    即使不跨端,uni-app同时也是更好的小程序开发框架。

    具有vue和微信小程序的开发经验,可快速上手uni-app

    为什么要去学习uni-app?

    相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。

    环境搭建

    安装编辑器HbuilderX 下载地址

    HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

    下载App开发版,可开箱即用

    安装微信开发者工具 下载地址

    利用HbuilderX初始化项目
    • 点击HbuilderX菜单栏文件>项目>新建

    • 选择uni-app,填写项目名称,项目创建的目录

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjMXICDL-1621999433213)(./images/create.jpg)]

    运行项目

    在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

    注意:

    • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
    • 微信开发者工具在设置中安全设置,服务端口开启
    介绍项目目录和文件作用

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

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

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

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

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

    unpackage就是打包目录,在这里有各个平台的打包文件

    pages所有的页面存放目录

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

    components组件存放目录

    为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

    • 页面文件遵循 Vue 单文件组件 (SFC) 规范
    • 组件标签靠近小程序规范,详见uni-app 组件规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    全局配置和页面配置

    通过globalStyle进行全局配置

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

    属性类型默认值描述
    navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
    navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    navigationBarTitleTextString导航栏标题文字内容
    backgroundColorHexColor#ffffff窗口的背景色
    backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
    enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面生命周期
    onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
    创建新的message页面

    右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

    <template>
    	<view>
    		这是信息页面
    	</view>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
    
    通过pages来配置页面
    属性类型默认值描述
    pathString配置页面路径
    styleObject配置页面窗口表现,配置项参考 pageStyle

    pages数组数组中第一项表示应用启动页

    "pages": [ 、
    		{
    			"path":"pages/message/message"
    		},
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	]
    

    通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    		{
    			"path":"pages/message/message",
    			"style": {
    				"navigationBarBackgroundColor": "#007AFF",
    				"navigationBarTextStyle": "white",
    				"enablePullDownRefresh": true,
    				"disableScroll": true,
    				"h5": {
    					"pullToRefresh": {
    						"color": "#007AFF"
    					}
    				}
    			}
    		}
    	]
    
    配置tabbar

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

    Tips

    • 当设置 position 为 top 时,将不会显示 icon
    • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

    属性类型必填默认值描述平台差异说明
    colorHexColortab 上的文字默认颜色
    selectedColorHexColortab 上的文字选中时的颜色
    backgroundColorHexColortab 的背景色
    borderStyleStringblacktabbar 上边框的颜色,仅支持 black/whiteApp 2.3.4+ 支持其他颜色值
    listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
    positionStringbottom可选值 bottom、toptop 值仅微信小程序支持

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

    属性类型必填说明
    pagePathString页面路径,必须在 pages 中先定义
    textStringtab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
    iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
    selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

    案例代码:

    "tabBar": {
    		"list": [
    			{
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/home.png",
    				"selectedIconPath":"static/tabs/home-active.png"
    			},
    			{
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/message.png",
    				"selectedIconPath":"static/tabs/message-active.png"
    			},
    			{
    				"text": "我们",
    				"pagePath":"pages/contact/contact",
    				"iconPath":"static/tabs/contact.png",
    				"selectedIconPath":"static/tabs/contact-active.png"
    			}
    		]
    	}
    
    condition启动模式配置

    启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

    属性说明:

    属性类型是否必填描述
    currentNumber当前激活的模式,list节点的索引值
    listArray启动模式列表

    list说明:

    属性类型是否必填描述
    nameString启动模式名称
    pathString启动页面路径
    queryString启动参数,可在页面的 onLoad 函数里获得

    组件的基本使用

    uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用

    uni-app中的组件,就像 HTML 中的 divpspan 等标签的作用一样,用于搭建页面的基础结构

    text文本组件的用法
    001 - text 组件的属性
    属性类型默认值必填说明
    selectablebooleanfalse文本是否可选
    spacestring.显示连续空格,可选参数:enspemspnbsp
    decodebooleanfalse是否解码
    • text 组件相当于行内标签、在同一行显示
    • 除了文本节点以外的其他节点都无法长按选中
    002 - 代码案例
    <view>
      <!-- 长按文本是否可选 -->
      <text selectable='true'>来了老弟</text>
    </view>
    
    <view>
      <!-- 显示连续空格的方式 -->
      <view>
        <text space='ensp'>来了  老弟</text>
      </view>
      <view>
        <text space='emsp'>来了  老弟</text>
      </view>
      <view>
        <text space='nbsp'>来了  老弟</text>
      </view>
    </view>
    
    <view>
      <text>skyblue</text>
    </view>
    
    <view>
      <!-- 是否解码 -->
      <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
    </view>
    
    view视图容器组件的用法

    View 视图容器, 类似于 HTML 中的 div

    001 - 组件的属性

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yhi4Nfqt-1621999433215)(./images/2view.png)]

    002 - 代码案例
    <view class="box2" hover-class="box2_active">
      <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
    
      </view>
    </view>
    
    button按钮组件的用法
    001 - 组件的属性
    属性名类型默认值说明
    sizeStringdefault按钮的大小
    typeStringdefault按钮的样式类型
    plainBooleanfalse按钮是否镂空,背景色透明
    disabledBooleanfalse是否按钮
    loadingBooleanfalse名称是否带 loading t图标
    • button 组件默认独占一行,设置 sizemini 时可以在一行显示多个
    002 - 案例代码
    <button size='mini' type='primary'>前端</button>
    
    <button size='mini' type='default' disabled='true'>前端</button>
    
    <button size='mini' type='warn' loading='true'>前端</button>
    
    image组件的使用
    image

    图片。

    属性名类型默认值说明平台差异说明
    srcString图片资源地址
    modeString‘scaleToFill’图片裁剪、缩放的模式

    Tips

    • <image> 组件默认宽度 300px、高度 225px;
    • src 仅支持相对路径、绝对路径,支持 base64 码;
    • 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。

    uni-app中的样式

    • 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');
         }
        
    • 如何使用scss或者less

    uni-app中的数据绑定

    在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可

    export default {
      data () {
        return {
          msg: 'hello-uni'
        }
      }
    }
    
    插值表达式的使用
    • 利用插值表达式渲染基本数据

      <view>{{msg}}</view>
      
    • 在插值表达式中使用三元运算

      <view>{{ flag ? '我是真的':'我是假的' }}</view>
      
    • 基本运算

      <view>{{1+1}}</view>
      
    v-bind动态绑定属性

    在data中定义了一张图片,我们希望把这张图片渲染到页面上

    export default {
      data () {
        return {
          img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
        }
      }
    }
    

    利用v-bind进行渲染

    <image v-bind:src="img"></image>
    

    还可以缩写成:

    <image :src="img"></image>
    
    v-for的使用

    data中定以一个数组,最终将数组渲染到页面上

    data () {
      return {
        arr: [
          { name: '刘能', age: 29 },
          { name: '赵四', age: 39 },
          { name: '宋小宝', age: 49 },
          { name: '小沈阳', age: 59 }
        ]
      }
    }
    

    利用v-for进行循环

    <view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view>
    

    uni中的事件

    事件绑定

    在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@

    <button @click="tapHandle">点我啊</button>
    

    事件函数定义在methods中

    methods: {
      tapHandle () {
        console.log('真的点我了')
      }
    }
    
    事件传参
    • 默认如果没有传递参数,事件函数第一个形参为事件对象

      // template
      <button @click="tapHandle">点我啊</button>
      // script
      methods: {
        tapHandle (e) {
          console.log(e)
        }
      }
      
    • 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据

      // template
      <button @click="tapHandle(1)">点我啊</button>
      // script
      methods: {
        tapHandle (num) {
          console.log(num)
        }
      }
      
    • 如果获取事件对象也想传递参数

      // template
      <button @click="tapHandle(1,$event)">点我啊</button>
      // script
      methods: {
        tapHandle (num,e) {
          console.log(num,e)
        }
      }
      

    uni的生命周期

    应用的生命周期

    生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。

    生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数

    uni-app 支持如下应用生命周期函数:

    函数名说明
    onLaunchuni-app 初始化完成时触发(全局只触发一次)
    onShowuni-app 启动,或从后台进入前台显示
    onHideuni-app 从前台进入后台
    onErroruni-app 报错时触发
    页面的生命周期

    uni-app 支持如下页面生命周期函数:

    函数名说明平台差异说明最低版本
    onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
    onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    onReady监听页面初次渲染完成。
    onHide监听页面隐藏
    onUnload监听页面卸载

    下拉刷新

    开启下拉刷新

    在uni-app中有两种方式开启下拉刷新

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

    创建list页面进行演示

    <template>
    	<view>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    

    通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

    {
      "path":"pages/list/list",
        "style":{
          "enablePullDownRefresh": true
        }
    }
    
    通过API开启

    api文档

    uni.startPullDownRefresh()
    
    监听下拉刷新

    通过onPullDownRefresh可以监听到下拉刷新的动作

    export default {
      data () {
        return {
          arr: ['前端','java','ui','大数据']
        }
      },
      methods: {
        startPull () {
          uni.startPullDownRefresh()
        }
      },
      onPullDownRefresh () {
        console.log('触发下拉刷新了')
      }
    }
    
    关闭下拉刷新

    uni.stopPullDownRefresh()

    停止当前页面下拉刷新。

    案例演示

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		},
    		methods: {
    			startPull () {
    				uni.startPullDownRefresh()
    			}
    		},
    		
    		onPullDownRefresh () {
    			this.arr = []
    			setTimeout(()=> {
    				this.arr = ['前端','java','ui','大数据']
    				uni.stopPullDownRefresh()
    			}, 1000);
    		}
    	}
    </script>
    

    上拉加载

    通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

    通过onReachBottom监听到触底的行为

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
    			}
    		},
    		onReachBottom () {
    			console.log('触底了')
    		}
    	}
    </script>
    
    <style>
    	view{
    		height: 100px;
    		line-height: 100px;
    	}
    </style>
    

    网络请求

    在uni中可以调用uni.request方法进行请求网络请求

    需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。

    发送get请求

    <template>
    	<view>
    		<button @click="sendGet">发送请求</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			sendGet () {
    				uni.request({
    					url: 'http://localhost:8082/api/getlunbo',
    					success(res) {
    						console.log(res)
    					}
    				})
    			}
    		}
    	}
    </script>
    

    发送post请求

    数据缓存

    uni.setStorage

    官方文档

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			setStor () {
    				uni.setStorage({
    				 	key: 'id',
    				 	data: 100,
    				 	success () {
    				 		console.log('存储成功')
    				 	}
    				 })
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    
    uni.setStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			setStor () {
    				uni.setStorageSync('id',100)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    
    uni.getStorage

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				id: ''
    			}
    		},
    		methods: {
    			getStorage () {
    				uni.getStorage({
    					key: 'id',
    					success:  res=>{
    						this.id = res.data
    					}
    				})
    			}
    		}
    	}
    </script>
    
    uni.getStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			getStorage () {
    				const id = uni.getStorageSync('id')
    				console.log(id)
    			}
    		}
    	}
    </script>
    
    uni.removeStorage

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			removeStorage () {
    				uni.removeStorage({
    					key: 'id',
    					success: function () {
    						console.log('删除成功')
    					}
    				})
    			}
    		}
    	}
    </script>
    
    uni.removeStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			removeStorage () {
    				uni.removeStorageSync('id')
    			}
    		}
    	}
    </script>
    

    上传图片、预览图片

    上传图片

    uni.chooseImage方法从本地相册选择图片或使用相机拍照。

    案例代码

    <template>
    	<view>
    		<button @click="chooseImg" type="primary">上传图片</button>
    		<view>
    			<image v-for="item in imgArr" :src="item" :key="index"></image>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				imgArr: []
    			}
    		},
    		methods: {
    			chooseImg () {
    				uni.chooseImage({
    					count: 9,
    					success: res=>{
    						this.imgArr = res.tempFilePaths
    					}
    				})
    			}
    		}
    	}
    </script>
    
    预览图片

    结构

    <view>
    	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
    </view>
    

    预览图片的方法

    previewImg (current) {
      uni.previewImage({
        urls: this.imgArr,
        current
      })
    }
    

    条件注释实现跨段兼容

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

    **写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。

    平台标识

    平台参考文档
    APP-PLUS5+AppHTML5+ 规范
    H5H5
    MP-WEIXIN微信小程序微信小程序
    MP-ALIPAY支付宝小程序支付宝小程序
    MP-BAIDU百度小程序百度小程序
    MP-TOUTIAO头条小程序头条小程序
    MP-QQQQ小程序(目前仅cli版支持)
    MP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
    组件的条件注释

    代码演示

    <!-- #ifdef H5 -->
    <view>
      h5页面会显示
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>
      微信小程序会显示
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view>
      app会显示
    </view>
    <!-- #endif -->
    
    api的条件注释

    代码演示

    onLoad () {
      //#ifdef MP-WEIXIN
      console.log('微信小程序')
      //#endif
      //#ifdef H5
      console.log('h5页面')
      //#endif
    }
    

    样式的条件注释

    代码演示

    /* #ifdef H5 */
    view{
      height: 100px;
      line-height: 100px;
      background: red;
    }
    /* #endif */
    /* #ifdef MP-WEIXIN */
    view{
      height: 100px;
      line-height: 100px;
      background: green;
    }
    /* #endif */
    

    uni中的导航跳转

    利用navigator进行跳转

    navigator详细文档:文档地址

    跳转到普通页面

    <navigator url="/pages/about/about" hover-class="navigator-hover">
      <button type="default">跳转到关于页面</button>
    </navigator>
    

    跳转到tabbar页面

    <navigator url="/pages/message/message" open-type="switchTab">
      <button type="default">跳转到message页面</button>
    </navigator>
    
    利用编程式导航进行跳转

    导航跳转文档

    利用navigateTo进行导航跳转

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

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

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

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

    通过switchTab跳转到tabbar页面

    跳转到tabbar页面

    <button type="primary" @click="goMessage">跳转到message页面</button>
    

    通过switchTab方法进行跳转

    goMessage () {
      uni.switchTab({
        url: '/pages/message/message'
      })
    }
    

    redirectTo进行跳转

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

    <!-- template -->
    <button type="primary" @click="goMessage">跳转到message页面</button>
    <!-- js -->
    goMessage () {
      uni.switchTab({
        url: '/pages/message/message'
      })
    }
    

    通过onUnload测试当前组件确实卸载

    onUnload () {
      console.log('组件卸载了')
    }
    
    导航跳转传递参数

    在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收

    传递参数的页面

    goAbout () {
      uni.navigateTo({
        url: '/pages/about/about?id=80',
      });
    }
    

    接收参数的页面

    <script>
    	export default {
    		onLoad (options) {
    			console.log(options)
    		}
    	}
    </script>
    

    uni-app中组件的创建

    在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可

    • 创建login组件,在component中创建login目录,然后新建login.vue文件

      <template>
      	<view>
      		这是一个自定义组件
      	</view>
      </template>
      
      <script>
      </script>
      
      <style>
      </style>
      
    • 在其他组件中导入该组件并注册

      import login from "@/components/test/test.vue"
      
    • 注册组件

      components: {test}
      
    • 使用组件

      <test></test>
      
    组件的生命周期函数
    beforeCreate在实例初始化之后被调用。详见
    created在实例创建完成后被立即调用。详见
    beforeMount在挂载开始之前被调用。详见
    mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
    beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
    updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持
    beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
    destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

    组件的通讯

    父组件给子组件传值

    通过props来接受外界传递到组件内部的值

    <template>
    	<view>
    		这是一个自定义组件 {{msg}}
    	</view>
    </template>
    
    <script>
    	export default {
    		props: ['msg']
    	}
    </script>
    
    <style>
    </style>
    

    其他组件在使用login组件的时候传递值

    <template>
    	<view>
    		<test :msg="msg"></test>
    	</view>
    </template>
    
    <script>
    	import test from "@/components/test/test.vue"
    	export default {
    		data () {
    			return {
    				msg: 'hello'
    			}
    		},
    		
    		components: {test}
    	}
    </script>
    
    子组件给父组件传值

    通过$emit触发事件进行传递参数

    <template>
    	<view>
    		这是一个自定义组件 {{msg}}
    		<button type="primary" @click="sendMsg">给父组件传值</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				status: '打篮球'
    			}
    		},
    		props: {
    			msg: {
    				type: String,
    				value: ''
    			}
    		},
    		methods: {
    			sendMsg () {
    				this.$emit('myEvent',this.status)
    			}
    		}
    	}
    </script>
    

    父组件定义自定义事件并接收参数

    <template>
    	<view>
    		<test :msg="msg" @myEvent="getMsg"></test>
    	</view>
    </template>
    <script>
    	import test from "@/components/test/test.vue"
    	export default {
    		data () {
    			return {
    				msg: 'hello'
    			}
    		},
    		methods: {
    			getMsg (res) {
    				console.log(res)
    			}
    		},
    		
    		components: {test}
    	}
    </script>
    
    兄弟组件通讯

    uni-ui的使用

    uni-ui文档

    1、进入Grid宫格组件

    2、使用HBuilderX导入该组件

    3、导入该组件

    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    

    4、注册组件

    components: {uniGrid,uniGridItem}
    

    5、使用组件

    <uni-grid :column="3">
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
    </uni-grid>
    
    更多相关内容
  • 盘点:好用的笔记APP有哪些?

    千次阅读 2021-06-03 05:33:31
    原标题:盘点:好用的笔记APP有哪些?本文为「智活范」原创作品,欢迎关注我们!什么样的笔记APP好用?这是我身边那些热爱写作的新人们经常问的问题。然而每个人的喜好和需求都不一样,很难说哪款最好用,最重要...

    原标题:盘点:好用的笔记类APP有哪些?

    本文为「智活范」原创作品,欢迎关注我们!

    什么样的笔记类APP好用?这是我身边那些热爱写作的新人们经常问的问题。然而每个人的喜好和需求都不一样,很难说哪款最好用,最重要的还是找到适合自己的。

    不过,为了给他们一些参考,戎葵在自己的记者/文案朋友圈开展了一期小调查,“怂恿”他们晒出自己常用的笔记类APP。

    根据晒货结果,戎葵整理出一份名单,送给喜欢写写记记以及需要随时移动办公的泥萌!

    1、极简型代表选手:

    EverMemo(印象便签, 仅Android版)、爱墨日记(iMemo,仅IOS版)

    这俩APP没有太多花哨功能,点开就可以记录,也不用非要注册登录才能使用。而且你所记每一份笔记,最终都能以文字块形式排列在界面上,直观一目了然,方便查找。

    非常比较适合平时的碎片记录,比如待完成的琐碎事项、突然产生的灵感等。

    EverMemo简约到它的编辑功能除了输入文字,就只有添加项目符号,简约到极致,超节省时间。

    爱墨日记稍微多加了些小功能,比如背景变色、提醒、分享等。在它的分享园地“墨茶”里,能看到各式各样的人分享的笔记,闲来无事的时候看看别人的笔记会很有意思,可能还会获得一些启发。

    不过,如果你喜欢用系统自带的记事本,那这一型就不用考虑啦!

    2、中简型代表选手:

    随笔记(GNotes,仅Android版)、印记(仅Android版)

    这两款也是相对简洁实用的,只不过比以上两款极简型再多添加了些功能,可以用来做篇幅大一点的文字记录。

    随笔记,插入功能比较丰富,比如插入图片、录音、手写、涂鸦、附件等,并且支持分享到其他应用甚至是其他笔记类应用中。

    印记,一是在文字编辑功能上做了些花样,比如调整文字颜色、字号、字体,选择信纸模板等,可能让你更想用来写日记;二是有语音识别文字的功能,识别率比较高。

    另外它们让人惊喜的一点,就是支持批量导出,方便笔记打包搬家。

    3、多功能型代表选手:

    印象笔记、有道云笔记、为知笔记说到这类多功能型APP,大家都应该很熟悉了。它们在基础的文本编辑功能上,增加了更多附加功能,比如支持录音笔记、手写笔记、团队协作编辑等,适合比较系统的文档编辑需求。

    各自有特色的地方是,为知笔记有各种美观的图文模板,包括日记类、工作日志类、会议记录类、九宫格类、工作周报类、散文类等;

    有道云笔记,支持文档扫描,有较为丰富的文字编辑功能;印象笔记,除了前两者已有的功能,还包括添加地理位置、添加视频文件、工作群聊等。

    4、全能商务型代表选手:

    WPS Office移动办公利器, Word、TXT、Excel、PPT一应俱全,各种模板可选,电脑Office该有的功能,它都有,适合移动办公需求较强的盆友。不过最好是大屏手机使用,不然屏幕辣么小,功能再多,你也玩不来!

    0dd0d36663dfdaf7a061dc0d1e65c712.png

    图片为作者制作

    说完以上比较通用的类型,再说几款适合特殊需求的APP:

    5、时间线型代表选手:

    时光笔记(仅Android版)、青橙日记(仅IOS版)

    这类APP能将你的所有笔记以时间线的形式排列。查看的时候一目了然,有种心路历程的feel,特别适合喜欢写日记的盆友。

    青橙日记,包含的功能稍微复杂了点,结合了日历和日记,但点击时间轴,就可以有时间线排列的效果,但是现在有广告了,不太好。

    6、杂志页面型代表选手:

    美篇(仅Android版)、寻色(仅IOS版)

    两者走的都是“图文并茂撰文+社交”的路线,非常适合写旅行摄影图文。可以直接在APP中撰写图文发布,以及查看别家的图文,进而评论、转发、点赞。

    好了,名单已列完,大家可以从中挑选最适合自己的APP,也可以再去茫茫App Store海洋里寻找。

    找的时候记住一点就好,选背景强大一点的APP,免得过段时间办不下去停止服务了,你就尴尬了。

    文 | 戎葵@智活范

    图 | 正文图片来自作者

    注:本文为「智活范」原创作品,欢迎转发,喜欢的话就点个赞吧!

    想阅读更多有关个人成长/自由职业/生活方式的文章,欢迎关注我们哦,也可关注「智活范」微信公众号(名称:智活范,ID:zhihuofan)!返回搜狐,查看更多

    责任编辑:

    展开全文
  • uni-app笔记(黑马)

    千次阅读 2020-07-20 09:42:19
    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建...

    uni-app的基本使用

    课程介绍:

    基础部分:

    • 环境搭建
    • 页面外观配置
    • 数据绑定
    • uni-app的生命周期
    • 组件的使用
    • uni-app中样式学习
    • 在uni-app中使用字体图标和开启scss
    • 条件注释跨端兼容
    • uni中的事件
    • 导航跳转
    • 组件创建和通讯,及组件的生命周期
    • uni-app中使用uni-ui库

    项目:黑马商城项目

    uni-app介绍 官方网页

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

    即使不跨端,uni-app同时也是更好的小程序开发框架。

    具有vue和微信小程序的开发经验,可快速上手uni-app

    为什么要去学习uni-app?

    相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。

    环境搭建

    安装编辑器HbuilderX 下载地址

    HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

    下载App开发版,可开箱即用

    安装微信开发者工具 下载地址

    利用HbuilderX初始化项目
    • 点击HbuilderX菜单栏文件>项目>新建

    • 选择uni-app,填写项目名称,项目创建的目录

      在这里插入图片描述

    运行项目

    在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

    注意:

    • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
    • 微信开发者工具在设置中安全设置,服务端口开启
    介绍项目目录和文件作用

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

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

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

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

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

    unpackage就是打包目录,在这里有各个平台的打包文件

    pages所有的页面存放目录

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

    components组件存放目录

    为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

    • 页面文件遵循 Vue 单文件组件 (SFC) 规范
    • 组件标签靠近小程序规范,详见uni-app 组件规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    全局配置和页面配置

    通过globalStyle进行全局配置

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

    属性类型默认值描述
    navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
    navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    navigationBarTitleTextString导航栏标题文字内容
    backgroundColorHexColor#ffffff窗口的背景色
    backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
    enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面生命周期
    onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
    创建新的message页面

    右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

    <template>
    	<view>
    		这是信息页面
    	</view>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
    
    通过pages来配置页面
    属性类型默认值描述
    pathString配置页面路径
    styleObject配置页面窗口表现,配置项参考 pageStyle

    pages数组数组中第一项表示应用启动页

    "pages": [ 、
    		{
    			"path":"pages/message/message"
    		},
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	]
    

    通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    		{
    			"path":"pages/message/message",
    			"style": {
    				"navigationBarBackgroundColor": "#007AFF",
    				"navigationBarTextStyle": "white",
    				"enablePullDownRefresh": true,
    				"disableScroll": true,
    				"h5": {
    					"pullToRefresh": {
    						"color": "#007AFF"
    					}
    				}
    			}
    		}
    	]
    
    配置tabbar

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

    Tips

    • 当设置 position 为 top 时,将不会显示 icon
    • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

    属性类型必填默认值描述平台差异说明
    colorHexColortab 上的文字默认颜色
    selectedColorHexColortab 上的文字选中时的颜色
    backgroundColorHexColortab 的背景色
    borderStyleStringblacktabbar 上边框的颜色,仅支持 black/whiteApp 2.3.4+ 支持其他颜色值
    listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
    positionStringbottom可选值 bottom、toptop 值仅微信小程序支持

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

    属性类型必填说明
    pagePathString页面路径,必须在 pages 中先定义
    textStringtab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
    iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
    selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

    案例代码:

    "tabBar": {
    		"list": [
    			{
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/home.png",
    				"selectedIconPath":"static/tabs/home-active.png"
    			},
    			{
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/message.png",
    				"selectedIconPath":"static/tabs/message-active.png"
    			},
    			{
    				"text": "我们",
    				"pagePath":"pages/contact/contact",
    				"iconPath":"static/tabs/contact.png",
    				"selectedIconPath":"static/tabs/contact-active.png"
    			}
    		]
    	}
    
    condition启动模式配置

    启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

    属性说明:

    属性类型是否必填描述
    currentNumber当前激活的模式,list节点的索引值
    listArray启动模式列表

    list说明:

    属性类型是否必填描述
    nameString启动模式名称
    pathString启动页面路径
    queryString启动参数,可在页面的 onLoad 函数里获得

    组件的基本使用

    uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用

    uni-app中的组件,就像 HTML 中的 divpspan 等标签的作用一样,用于搭建页面的基础结构

    text文本组件的用法
    001 - text 组件的属性
    属性类型默认值必填说明
    selectablebooleanfalse文本是否可选
    spacestring.显示连续空格,可选参数:enspemspnbsp
    decodebooleanfalse是否解码
    • text 组件相当于行内标签、在同一行显示
    • 除了文本节点以外的其他节点都无法长按选中
    002 - 代码案例
    <view>
      <!-- 长按文本是否可选 -->
      <text selectable='true'>来了老弟</text>
    </view>
    
    <view>
      <!-- 显示连续空格的方式 -->
      <view>
        <text space='ensp'>来了  老弟</text>
      </view>
      <view>
        <text space='emsp'>来了  老弟</text>
      </view>
      <view>
        <text space='nbsp'>来了  老弟</text>
      </view>
    </view>
    
    <view>
      <text>skyblue</text>
    </view>
    
    <view>
      <!-- 是否解码 -->
      <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
    </view>
    
    view视图容器组件的用法

    View 视图容器, 类似于 HTML 中的 div

    001 - 组件的属性

    在这里插入图片描述

    002 - 代码案例
    <view class="box2" hover-class="box2_active">
      <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
    
      </view>
    </view>
    
    button按钮组件的用法
    001 - 组件的属性
    属性名类型默认值说明
    sizeStringdefault按钮的大小
    typeStringdefault按钮的样式类型
    plainBooleanfalse按钮是否镂空,背景色透明
    disabledBooleanfalse是否按钮
    loadingBooleanfalse名称是否带 loading t图标
    • button 组件默认独占一行,设置 sizemini 时可以在一行显示多个
    002 - 案例代码
    <button size='mini' type='primary'>前端</button>
    
    <button size='mini' type='default' disabled='true'>前端</button>
    
    <button size='mini' type='warn' loading='true'>前端</button>
    
    image组件的使用
    image

    图片。

    属性名类型默认值说明平台差异说明
    srcString图片资源地址
    modeString‘scaleToFill’图片裁剪、缩放的模式

    Tips

    • <image> 组件默认宽度 300px、高度 225px;
    • src 仅支持相对路径、绝对路径,支持 base64 码;
    • 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。

    uni-app中的样式

    • 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');
         }
        
    • 如何使用scss或者less

    uni-app中的数据绑定

    在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可

    export default {
      data () {
        return {
          msg: 'hello-uni'
        }
      }
    }
    
    插值表达式的使用
    • 利用插值表达式渲染基本数据

      <view>{{msg}}</view>
      
    • 在插值表达式中使用三元运算

      <view>{{ flag ? '我是真的':'我是假的' }}</view>
      
    • 基本运算

      <view>{{1+1}}</view>
      
    v-bind动态绑定属性

    在data中定义了一张图片,我们希望把这张图片渲染到页面上

    export default {
      data () {
        return {
          img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
        }
      }
    }
    

    利用v-bind进行渲染

    <image v-bind:src="img"></image>
    

    还可以缩写成:

    <image :src="img"></image>
    
    v-for的使用

    data中定以一个数组,最终将数组渲染到页面上

    data () {
      return {
        arr: [
          { name: '刘能', age: 29 },
          { name: '赵四', age: 39 },
          { name: '宋小宝', age: 49 },
          { name: '小沈阳', age: 59 }
        ]
      }
    }
    

    利用v-for进行循环

    <view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view>
    

    uni中的事件

    事件绑定

    在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@

    <button @click="tapHandle">点我啊</button>
    

    事件函数定义在methods中

    methods: {
      tapHandle () {
        console.log('真的点我了')
      }
    }
    
    事件传参
    • 默认如果没有传递参数,事件函数第一个形参为事件对象

      // template
      <button @click="tapHandle">点我啊</button>
      // script
      methods: {
        tapHandle (e) {
          console.log(e)
        }
      }
      
    • 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据

      // template
      <button @click="tapHandle(1)">点我啊</button>
      // script
      methods: {
        tapHandle (num) {
          console.log(num)
        }
      }
      
    • 如果获取事件对象也想传递参数

      // template
      <button @click="tapHandle(1,$event)">点我啊</button>
      // script
      methods: {
        tapHandle (num,e) {
          console.log(num,e)
        }
      }
      

    uni的生命周期

    应用的生命周期

    生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。

    生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数

    uni-app 支持如下应用生命周期函数:

    函数名说明
    onLaunchuni-app 初始化完成时触发(全局只触发一次)
    onShowuni-app 启动,或从后台进入前台显示
    onHideuni-app 从前台进入后台
    onErroruni-app 报错时触发
    页面的生命周期

    uni-app 支持如下页面生命周期函数:

    函数名说明平台差异说明最低版本
    onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
    onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    onReady监听页面初次渲染完成。
    onHide监听页面隐藏
    onUnload监听页面卸载

    下拉刷新

    开启下拉刷新

    在uni-app中有两种方式开启下拉刷新

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

    创建list页面进行演示

    <template>
    	<view>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    

    通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

    {
      "path":"pages/list/list",
        "style":{
          "enablePullDownRefresh": true
        }
    }
    
    通过API开启

    api文档

    uni.startPullDownRefresh()
    
    监听下拉刷新

    通过onPullDownRefresh可以监听到下拉刷新的动作

    export default {
      data () {
        return {
          arr: ['前端','java','ui','大数据']
        }
      },
      methods: {
        startPull () {
          uni.startPullDownRefresh()
        }
      },
      onPullDownRefresh () {
        console.log('触发下拉刷新了')
      }
    }
    
    关闭下拉刷新

    uni.stopPullDownRefresh()

    停止当前页面下拉刷新。

    案例演示

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		},
    		methods: {
    			startPull () {
    				uni.startPullDownRefresh()
    			}
    		},
    		
    		onPullDownRefresh () {
    			this.arr = []
    			setTimeout(()=> {
    				this.arr = ['前端','java','ui','大数据']
    				uni.stopPullDownRefresh()
    			}, 1000);
    		}
    	}
    </script>
    

    上拉加载

    通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

    通过onReachBottom监听到触底的行为

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
    			}
    		},
    		onReachBottom () {
    			console.log('触底了')
    		}
    	}
    </script>
    
    <style>
    	view{
    		height: 100px;
    		line-height: 100px;
    	}
    </style>
    

    网络请求

    在uni中可以调用uni.request方法进行请求网络请求

    需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。

    发送get请求

    <template>
    	<view>
    		<button @click="sendGet">发送请求</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			sendGet () {
    				uni.request({
    					url: 'http://localhost:8082/api/getlunbo',
    					success(res) {
    						console.log(res)
    					}
    				})
    			}
    		}
    	}
    </script>
    

    发送post请求

    数据缓存

    uni.setStorage

    官方文档

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			setStor () {
    				uni.setStorage({
    				 	key: 'id',
    				 	data: 100,
    				 	success () {
    				 		console.log('存储成功')
    				 	}
    				 })
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    
    uni.setStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			setStor () {
    				uni.setStorageSync('id',100)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    
    uni.getStorage

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				id: ''
    			}
    		},
    		methods: {
    			getStorage () {
    				uni.getStorage({
    					key: 'id',
    					success:  res=>{
    						this.id = res.data
    					}
    				})
    			}
    		}
    	}
    </script>
    
    uni.getStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			getStorage () {
    				const id = uni.getStorageSync('id')
    				console.log(id)
    			}
    		}
    	}
    </script>
    
    uni.removeStorage

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			removeStorage () {
    				uni.removeStorage({
    					key: 'id',
    					success: function () {
    						console.log('删除成功')
    					}
    				})
    			}
    		}
    	}
    </script>
    
    uni.removeStorageSync

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

    代码演示

    <template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script>
    	export default {
    		methods: {
    			removeStorage () {
    				uni.removeStorageSync('id')
    			}
    		}
    	}
    </script>
    

    上传图片、预览图片

    上传图片

    uni.chooseImage方法从本地相册选择图片或使用相机拍照。

    案例代码

    <template>
    	<view>
    		<button @click="chooseImg" type="primary">上传图片</button>
    		<view>
    			<image v-for="item in imgArr" :src="item" :key="index"></image>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				imgArr: []
    			}
    		},
    		methods: {
    			chooseImg () {
    				uni.chooseImage({
    					count: 9,
    					success: res=>{
    						this.imgArr = res.tempFilePaths
    					}
    				})
    			}
    		}
    	}
    </script>
    
    预览图片

    结构

    <view>
    	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
    </view>
    

    预览图片的方法

    previewImg (current) {
      uni.previewImage({
        urls: this.imgArr,
        current
      })
    }
    

    条件注释实现跨段兼容

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

    **写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。

    平台标识

    平台参考文档
    APP-PLUS5+AppHTML5+ 规范
    H5H5
    MP-WEIXIN微信小程序微信小程序
    MP-ALIPAY支付宝小程序支付宝小程序
    MP-BAIDU百度小程序百度小程序
    MP-TOUTIAO头条小程序头条小程序
    MP-QQQQ小程序(目前仅cli版支持)
    MP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
    组件的条件注释

    代码演示

    <!-- #ifdef H5 -->
    <view>
      h5页面会显示
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>
      微信小程序会显示
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view>
      app会显示
    </view>
    <!-- #endif -->
    
    api的条件注释

    代码演示

    onLoad () {
      //#ifdef MP-WEIXIN
      console.log('微信小程序')
      //#endif
      //#ifdef H5
      console.log('h5页面')
      //#endif
    }
    

    样式的条件注释

    代码演示

    /* #ifdef H5 */
    view{
      height: 100px;
      line-height: 100px;
      background: red;
    }
    /* #endif */
    /* #ifdef MP-WEIXIN */
    view{
      height: 100px;
      line-height: 100px;
      background: green;
    }
    /* #endif */
    

    uni中的导航跳转

    利用navigator进行跳转

    navigator详细文档:文档地址

    跳转到普通页面

    <navigator url="/pages/about/about" hover-class="navigator-hover">
      <button type="default">跳转到关于页面</button>
    </navigator>
    

    跳转到tabbar页面

    <navigator url="/pages/message/message" open-type="switchTab">
      <button type="default">跳转到message页面</button>
    </navigator>
    
    
    利用编程式导航进行跳转

    导航跳转文档

    利用navigateTo进行导航跳转

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

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

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

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

    通过switchTab跳转到tabbar页面

    跳转到tabbar页面

    <button type="primary" @click="goMessage">跳转到message页面</button>
    
    

    通过switchTab方法进行跳转

    goMessage () {
      uni.switchTab({
        url: '/pages/message/message'
      })
    }
    

    redirectTo进行跳转

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

    <!-- template -->
    <button type="primary" @click="goMessage">跳转到message页面</button>
    <!-- js -->
    goMessage () {
      uni.switchTab({
        url: '/pages/message/message'
      })
    }
    

    通过onUnload测试当前组件确实卸载

    onUnload () {
      console.log('组件卸载了')
    }
    
    导航跳转传递参数

    在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收

    传递参数的页面

    goAbout () {
      uni.navigateTo({
        url: '/pages/about/about?id=80',
      });
    }
    

    接收参数的页面

    <script>
    	export default {
    		onLoad (options) {
    			console.log(options)
    		}
    	}
    </script>
    

    uni-app中组件的创建

    在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可

    • 创建login组件,在component中创建login目录,然后新建login.vue文件

      <template>
      	<view>
      		这是一个自定义组件
      	</view>
      </template>
      
      <script>
      </script>
      
      <style>
      </style>
      
    • 在其他组件中导入该组件并注册

      import login from "@/components/test/test.vue"
      
    • 注册组件

      components: {test}
      
    • 使用组件

      <test></test>
      
    组件的生命周期函数
    beforeCreate在实例初始化之后被调用。详见
    created在实例创建完成后被立即调用。详见
    beforeMount在挂载开始之前被调用。详见
    mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
    beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
    updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持
    beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
    destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

    组件的通讯

    父组件给子组件传值

    通过props来接受外界传递到组件内部的值

    <template>
    	<view>
    		这是一个自定义组件 {{msg}}
    	</view>
    </template>
    
    <script>
    	export default {
    		props: ['msg']
    	}
    </script>
    
    <style>
    </style>
    

    其他组件在使用login组件的时候传递值

    <template>
    	<view>
    		<test :msg="msg"></test>
    	</view>
    </template>
    
    <script>
    	import test from "@/components/test/test.vue"
    	export default {
    		data () {
    			return {
    				msg: 'hello'
    			}
    		},
    		
    		components: {test}
    	}
    </script>
    
    子组件给父组件传值

    通过$emit触发事件进行传递参数

    <template>
    	<view>
    		这是一个自定义组件 {{msg}}
    		<button type="primary" @click="sendMsg">给父组件传值</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				status: '打篮球'
    			}
    		},
    		props: {
    			msg: {
    				type: String,
    				value: ''
    			}
    		},
    		methods: {
    			sendMsg () {
    				this.$emit('myEvent',this.status)
    			}
    		}
    	}
    </script>
    

    父组件定义自定义事件并接收参数

    <template>
    	<view>
    		<test :msg="msg" @myEvent="getMsg"></test>
    	</view>
    </template>
    <script>
    	import test from "@/components/test/test.vue"
    	export default {
    		data () {
    			return {
    				msg: 'hello'
    			}
    		},
    		methods: {
    			getMsg (res) {
    				console.log(res)
    			}
    		},
    		
    		components: {test}
    	}
    </script>
    
    兄弟组件通讯

    uni-ui的使用

    uni-ui文档

    1、进入Grid宫格组件

    2、使用HBuilderX导入该组件

    3、导入该组件

    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    

    4、注册组件

    components: {uniGrid,uniGridItem}
    

    5、使用组件

    <uni-grid :column="3">
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
    </uni-grid>
    
    展开全文
  • uni-app学习笔记

    2022-02-09 09:41:34
    uni-app学习笔记

    一、uni-app介绍 官方网页

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

    即使不跨端,uni-app同时也是更好的小程序开发框架。

    具有vue和微信小程序的开发经验,可快速上手uni-app

    为什么要去学习uni-app?

    相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。


    二、环境搭建

    安装编辑器HbuilderX 下载地址

    HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

    下载App开发版,可开箱即用

    安装微信开发者工具 下载地址


    三、利用HbuilderX初始化项目

    • 点击HbuilderX菜单栏文件>项目>新建

    • 选择uni-app,填写项目名称,项目创建的目录
      请添加图片描述


    四、运行项目

    在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

    在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

    注意:

    • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
    • 微信开发者工具在设置-安全设置,服务端口开启
      请添加图片描述

    五、介绍项目目录和文件作用

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

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

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

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

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

    unpackage就是打包目录,在这里有各个平台的打包文件

    pages所有的页面存放目录

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

    components组件存放目录

    为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

    • 页面文件遵循 Vue 单文件组件 (SFC) 规范
    • 组件标签靠近小程序规范,详见uni-app 组件规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    六、全局配置和页面配置

    通过globalStyle进行全局配置

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

    属性类型默认值描述
    navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
    navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    navigationBarTitleTextString导航栏标题文字内容
    backgroundColorHexColor#ffffff窗口的背景色
    backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
    enablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面生命周期
    onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期

    创建新的message页面

    右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

    <template>
    	<view>
    		这是信息页面
    	</view>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
    

    通过pages来配置页面

    属性类型默认值描述
    pathString配置页面路径
    styleObject配置页面窗口表现,配置项参考 pageStyle

    pages数组数组中第一项表示应用启动页

    "pages": [ 、
    		{
    			"path":"pages/message/message"
    		},
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"
    			}
    		}
    	]
    

    通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    		{
    			"path":"pages/message/message",
    			"style": {
    				"navigationBarBackgroundColor": "#007AFF",
    				"navigationBarTextStyle": "white",
    				"enablePullDownRefresh": true,
    				"disableScroll": true,
    				"h5": {
    					"pullToRefresh": {
    						"color": "#007AFF"
    					}
    				}
    			}
    		}
    	]
    

    配置tabbar

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

    Tips

    • 当设置 position 为 top 时,将不会显示 icon
    • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

    属性类型必填默认值描述平台差异说明
    colorHexColortab 上的文字默认颜色
    selectedColorHexColortab 上的文字选中时的颜色
    backgroundColorHexColortab 的背景色
    borderStyleStringblacktabbar 上边框的颜色,仅支持 black/whiteApp 2.3.4+ 支持其他颜色值
    listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
    positionStringbottom可选值 bottom、toptop 值仅微信小程序支持

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

    属性类型必填说明
    pagePathString页面路径,必须在 pages 中先定义
    textStringtab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
    iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
    selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

    案例代码:

    "tabBar": {
    		"list": [
    			{
    				"text": "首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/home.png",
    				"selectedIconPath":"static/tabs/home-active.png"
    			},
    			{
    				"text": "信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/message.png",
    				"selectedIconPath":"static/tabs/message-active.png"
    			},
    			{
    				"text": "我们",
    				"pagePath":"pages/contact/contact",
    				"iconPath":"static/tabs/contact.png",
    				"selectedIconPath":"static/tabs/contact-active.png"
    			}
    		]
    	}
    

    condition启动模式配置

    启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

    属性说明:

    属性类型是否必填描述
    currentNumber当前激活的模式,list节点的索引值
    listArray启动模式列表

    list说明:

    属性类型是否必填描述
    nameString启动模式名称
    pathString启动页面路径
    queryString启动参数,可在页面的 onLoad 函数里获得

    七、组件的基本使用

    uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用

    uni-app中的组件,就像 HTML 中的 divpspan 等标签的作用一样,用于搭建页面的基础结构

    text文本组件的用法

    001 - text 组件的属性

    属性类型默认值必填说明
    selectablebooleanfalse文本是否可选
    spacestring.显示连续空格,可选参数:enspemspnbsp
    decodebooleanfalse是否解码
    • text 组件相当于行内标签、在同一行显示
    • 除了文本节点以外的其他节点都无法长按选中

    002 - 代码案例

    <view>
      <!-- 长按文本是否可选 -->
      <text selectable='true'>来了老弟</text>
    </view>
    
    <view>
      <!-- 显示连续空格的方式 -->
      <view>
        <text space='ensp'>来了  老弟</text>
      </view>
      <view>
        <text space='emsp'>来了  老弟</text>
      </view>
      <view>
        <text space='nbsp'>来了  老弟</text>
      </view>
    </view>
    
    <view>
      <text>skyblue</text>
    </view>
    
    <view>
      <!-- 是否解码 -->
      <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
    </view>
    

    view视图容器组件的用法

    View 视图容器, 类似于 HTML 中的 div

    001 - 组件的属性

    在这里插入图片描述

    002 - 代码案例

    <view class="box2" hover-class="box2_active">
      <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
    
      </view>
    </view>
    

    button按钮组件的用法

    001 - 组件的属性

    属性名类型默认值说明
    sizeStringdefault按钮的大小
    typeStringdefault按钮的样式类型
    plainBooleanfalse按钮是否镂空,背景色透明
    disabledBooleanfalse是否按钮
    loadingBooleanfalse名称是否带 loading t图标
    • button 组件默认独占一行,设置 sizemini 时可以在一行显示多个

    002 - 案例代码

    <button size='mini' type='primary'>前端</button>
    
    <button size='mini' type='default' disabled='true'>前端</button>
    
    <button size='mini' type='warn' loading='true'>前端</button>
    

    image组件的使用

    image

    图片。

    属性名类型默认值说明平台差异说明
    srcString图片资源地址
    modeString‘scaleToFill’图片裁剪、缩放的模式

    Tips

    • <image> 组件默认宽度 300px、高度 225px;
    • src 仅支持相对路径、绝对路径,支持 base64 码;
    • 页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。

    八、uni-app中的样式

    • 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');
         }
        
    • 如何使用scss或者less


    九、uni-app中的数据绑定

    在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可

    export default {
      data () {
        return {
          msg: 'hello-uni'
        }
      }
    }
    

    插值表达式的使用

    • 利用插值表达式渲染基本数据

      <view>{{msg}}</view>
      
    • 在插值表达式中使用三元运算

      <view>{{ flag ? '我是真的':'我是假的' }}</view>
      
    • 基本运算

      <view>{{1+1}}</view>
      

    v-bind动态绑定属性

    在data中定义了一张图片,我们希望把这张图片渲染到页面上

    export default {
      data () {
        return {
          img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
        }
      }
    }
    

    利用v-bind进行渲染

    <image v-bind:src="img"></image>
    

    还可以缩写成:

    <image :src="img"></image>
    

    v-for的使用

    data中定以一个数组,最终将数组渲染到页面上

    data () {
      return {
        arr: [
          { name: '刘能', age: 29 },
          { name: '赵四', age: 39 },
          { name: '宋小宝', age: 49 },
          { name: '小沈阳', age: 59 }
        ]
      }
    }
    

    利用v-for进行循环

    <view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view>
    

    十、uni中的事件

    事件绑定

    在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@

    <button @click="tapHandle">点我啊</button>
    

    事件函数定义在methods中

    methods: {
      tapHandle () {
        console.log('真的点我了')
      }
    }
    

    事件传参

    • 默认如果没有传递参数,事件函数第一个形参为事件对象

      // template
      <button @click="tapHandle">点我啊</button>
      // script
      methods: {
        tapHandle (e) {
          console.log(e)
        }
      }
      
    • 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据

      // template
      <button @click="tapHandle(1)">点我啊</button>
      // script
      methods: {
        tapHandle (num) {
          console.log(num)
        }
      }
      
    • 如果获取事件对象也想传递参数

      // template
      <button @click="tapHandle(1,$event)">点我啊</button>
      // script
      methods: {
        tapHandle (num,e) {
          console.log(num,e)
        }
      }
      

    十一、uni的生命周期

    应用的生命周期

    生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。

    生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数

    uni-app 支持如下应用生命周期函数:

    函数名说明
    onLaunchuni-app 初始化完成时触发(全局只触发一次)
    onShowuni-app 启动,或从后台进入前台显示
    onHideuni-app 从前台进入后台
    onErroruni-app 报错时触发

    页面的生命周期

    uni-app 支持如下页面生命周期函数:

    函数名说明平台差异说明最低版本
    onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
    onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    onReady监听页面初次渲染完成。
    onHide监听页面隐藏
    onUnload监听页面卸载
    onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,示例
    onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据(上拉加载)。

    组件生命周期

    uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:


    十二、下拉刷新

    开启下拉刷新

    在uni-app中有两种方式开启下拉刷新

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

    通过配置文件开启

    创建list页面进行演示

    <template>
    	<view>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		}
    	}
    </script>
    
    <style>
    </style>
    

    通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

    {
      "path":"pages/list/list",
        "style":{
          "enablePullDownRefresh": true
        }
    }
    

    通过API开启

    api文档

    uni.startPullDownRefresh()
    

    监听下拉刷新

    通过onPullDownRefresh可以监听到下拉刷新的动作

    export default {
      data () {
        return {
          arr: ['前端','java','ui','大数据']
        }
      },
      methods: {
        startPull () {
          uni.startPullDownRefresh()
        }
      },
      onPullDownRefresh () {
        console.log('触发下拉刷新了')
      }
    }
    

    关闭下拉刷新

    uni.stopPullDownRefresh()

    停止当前页面下拉刷新。

    案例演示

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据']
    			}
    		},
    		methods: {
    			startPull () {
    				uni.startPullDownRefresh()
    			}
    		},
    		
    		onPullDownRefresh () {
    			this.arr = []
    			setTimeout(()=> {
    				this.arr = ['前端','java','ui','大数据']
    				uni.stopPullDownRefresh()
    			}, 1000);
    		}
    	}
    </script>
    

    十三、上拉加载

    通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

    通过onReachBottom监听到触底的行为

    <template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{{item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data () {
    			return {
    				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
    			}
    		},
    		onReachBottom () {
    			console.log('触底了')
    		}
    	}
    </script>
    
    <style>
    	view{
    		height: 100px;
    		line-height: 100px;
    	}
    </style>
    

    展开全文
  • 办公设备陆续换了好几次,笔记App也陆续尝试了多款,比如印象笔记、有道云笔记、OneNote、熊掌记、讯飞语记等等。在本文中,笔者将从自身工作角度,重点来对比一下用户群体较大且评价较好的印象笔记、OneNote、熊掌...
  • 一、什么是uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 即使不跨端,uni-app同时也...
  • uni-app基础使用和知识点(笔记

    千次阅读 2020-05-09 12:15:02
    【uni-app基础】 【uni-app之nvue】 【uni-app基础】 一、事件绑定 @click :点击 @langtap :长按 二、事件传参 不支持自定义事件,建议id传参。 e.target.id :获取的对象包含冒泡,穿刺。 e....
  • uni-app 学习笔记

    2021-09-24 17:15:15
    uni-app 基础1.1 什么是uni-app1.2 uni-app的优点 1. uni-app 基础 官方文档 1.1 什么是uni-app uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架) 开发者编写一套代码,可发布到iOS...
  • uniapp基础知识笔记
  • app专项测试笔记

    2019-08-15 12:34:50
    app专项测试 1、app测试需考虑 根据需求功能测试:等价,边界,场景等基本功能方法; 工具类测试:GT、appium、monkey、monkeyrunner、adb命令; 1)、monkey对app进行随机测试,即进行稳定测试, 常用的命令:adb ...
  • uni-app基础知识笔记

    2020-07-04 22:25:52
    ####uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件...
  • 我们整理了近期值得关注的 12 款 App,来看看有没有你感兴趣的 App。长按二维码关注少数派(ID:sspaime),在后台回复「App」即可获得下载链接。????iOS▍Vectornator X:也许是 iOS 上最好的矢量绘图工具Vectornator...
  • Whatsapp是基于chat的APP,了解了Whatsapp的design有助于了解其他所有聊天类APP的design。Whatsapp比较重要的两个功能是1) group chatting,2) read reciepts。Whatsapp也有其他一些功能。 本视频提到的主要有以下...
  • 背景最近在移动开发App时遇到一个问题:在服务端与客户端之间需要进行修改,删除,更新,添加等操作同步,为此研究了一番,其中Leanote参考了印象笔记App的同步原理。Leanote同步机制参考Evernote的机制, 关于...
  • 做了一个微信公众号的项目,需要上传用户的照片资料。使用了uploadifive.js插件做的图片上传。 具体操作如下: 参考文档:1.引入相关js <script type="text/javascript" src="static/js/jquery
  • 零、引子昨天看到老公票圈更新了一条段子:我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频、微课、教程还有得到专栏。这一年来我订阅的得到专栏不知不觉我订阅了17个得到专栏,每天听本书会员,还...
  • uni-app学习笔记—孙不坚1208 uni-app 官方网页是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
  • 使用云存储上传文件 如下,分别为选择图片,从执行结果中得到图片路径,依据此路径上传文件。 接着看 下面的代码是整体的,这样写避免this的指向问题。 this指向的是函数调用者的对象。所以两者是不同的。注意。...
  • 笔记--移动App

    2022-03-25 13:59:48
    移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的:使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 苹果...
  • 1、APP启动时间是一个重要的性能指标,学习了APP的启动流程; 2、总结对比了AMS日志、录屏分帧、代码埋点 三种测试方法的操作步骤,以及各自的特点和适合的测试场景。
  • 当然,等真正工作了忙成狗也就没这个闲情逸致了,最近刚好因为工作需要,便学了下app资源图片的获取,觉得还挺有用的,故整理成笔记,希望对大家有用,看完这篇以后相信你也可以去高仿任何一个你想仿照的项目。...
  • # 获得上传数据长度,以字节为单位, 这里是300k # 这里是限制所有文件总共大小 # ++++++ 新增下面这两行 ++++++ if request . content_length > 300 * 1000 : return "" , 403 ...
  • [个人笔记]origin学习 APP功能

    千次阅读 2020-07-12 11:41:35
    看了几个之后,才发现都是一些软件中可添加的功能选项(APP)所以本来其他内容的笔记改成APP专题,专门收录教程中更重插件使用的学习。 摘要 简单曲线拟合(Simple Fit App) 最佳拟合模型的选择(Rank Model App) ...
  • create-react-app学习笔记

    2018-10-12 14:04:30
    create-react-app学习笔记 1,开始 npm install -g create-react-app create-react-app aa cd aa npm start 通过http://localhost:3000/查看你的app 使用npm run build 编译打包程序 2,文件结构 ...
  • 卡顿,耗流量,启动慢等表现说明APP的性能出现了问题,在APP上市前对APP进行性能测试是必不可少的步骤。
  • 如果你也有同感,那么Notability这款被誉为最佳手写笔记 App就值得一试了!它支持 iOS 和 Mac,最吸引人的是提供了接近传统纸笔一样的自由手写特性,同时也支持输入文字、添加图片、录音、网页、导入文档、给...
  • 众所周知,APP兼容性覆盖测试一直以来被认为是一个高成本、耗时低效、耗人力的测试工作,且兼容性测试是一项必须要进行的测试项目,因为有不同的机型、系统平台、分辨率、网络、厂商、数据兼容以及不同兼容问题场景...
  • pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等 它类似微信小程序中app.json的页面管理部分 用代码举例 { "pages": [{ //设置页面路径及窗口表现...
  • android 笔记It happens to the best of us: you’re out and about, and suddenly you think of something you need to do at home. Or, you’re looking at your pantry, and want to make sure you get the right...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,864
精华内容 9,545
关键字:

得到app笔记如何上传图片

友情链接: TradeViewScraper.zip