uniapp学习

uniapp

vue2语法里面的结构template里面只能有一个根标签
下面这个只适合开发h5页面 不适合小程序

<divclass=“box”>

uniapp<spanclass=“row”>零基础 入门

750rpx会占满全屏幕 rpx单位会进行响应式
• rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。
如果设置边框后 边框紧贴屏幕或者超过屏幕 设置box-sizing:border-box;
scroll-view
横向滑块 纵向滑块
swiper
轮播图
默认高度450px 如果光修改图片的高度并不会有效果 需要设置swiper的高度
image
uimage组件会有默认的宽高 不指定图像大小就是320*240 解决办法
• 添加类 设置宽高即可
• 也可以设置宽度同时设置mode属性
◦ 默认 scrollToFill 不保持横纵比
◦ 大多数 短边显示出来 而且保持纵横比aspectFill（指定图像宽高）
◦ 高度不变宽度自适应 适合我们已知宽度或者不设置宽高的时候
lazy-load懒加载
video
他的很多属性和image差不多
表单组件
navigator
该组件类似HTML中的 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
url属性：应用内的跳转链接，值为相对路径或绝对路径，如：“…/first/first”，“/pages/first/first”，注意不能加 .vue 后缀
open-type 确定是否保存历史记录 是否可以跳转到tabBar包含的页面 等等 跳转tabbar页面，必须设置open-type=“switchTab”
uniapp中tabBar配置无效：tabBar.list数组的第一项必须和pages配置中的第一项要相同。
“pagePath”: “pages/index/index”,同时没有”./pagePath": “pages/index/index”,有时候默认会生成需要注意
v-html用来支持解析html标签
v-once渲染一次
v-bind动态绑定 属性做动态绑定就是v-bind
v-on用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件
框架组件上支持使用 style、class 属性来控制组件的样式。
• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view:style=“{col or:color}”/>
• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<viewclass=“normal_view”:class=“{isactive：istrue}”/>

1. form标签绑定@submit（对应事件的默认参数 打印出来会包含表单里面的数据）
2. input textarea要有name属性
3. button 要用form-type的属性

uniapp里面封装的公共组件只需要使用 不需要引入注册
组件传值 子组件定义props:[‘title’] 父组件 title="标题"或者:thtli=“message”
props:{
type：String,
default:简单类型
default(){
return 复杂类型}
}
如果想让自定义组件的原生事件起作用 需要加.native
<myevent@click.native=“onclick”>
.sync修饰符（当父组件给子组件传 子组件绑定对应事件修改数据后给父组件修改）比如弹窗事件
子组件 对应点击事件触发后 this.$emit(‘update:name’,params)
父组件

子组件


我是孩子 弹出框样式
view:class="{isclass:show}"1111111111111
<button@click=“ss”>开启样式
​


​

​
<stylelang=“scss”>
.isclass{
width: 300rpx;
height: 300rp;
border:1pxsolidred;
}

父组件

mychild:show.sync=“mystate”
methods:{
changestates(){
this.mystate=!this.mystate
},
// mm(s){
// this.mystate=s
// }
}
onLoad(e){
console.log(e)这里面可以获取到页面跳转的参数
getCurrentPages()页面栈(拿到相应的路径)
}
组件的success方法一般用箭头函数 这样this指向会正确
tabBar：里面
icon需要下载iconfont.ttf到static 然后在配置文件里面iconFontSrc:对应的路径
iconfont：{
text:“\ue6f9”
selecttext:“\ue6f9”}
当从列表页面跳转详情页面 /detail?id=xxx传递参数的话 是从详情页面的onLoad函数的参数里面进行获取
声明式导航跳转navigator标签等同于a标签
编程式导航uni.navigatorTo({url:“”})
下拉触底是一个函数 在生命周期附近 页面触底后 当前页面需要++ 还需要把新获取数据和之前数据进行拼接
this.newArr=[…this.newArr,res.data]
解决其他导航受影响：点击导航进行初始化，把当前的页数设置1 同时把this.newArr=[] 然后执行对应的函数获取数据
uni.request({url:“”,data:{}(传递的参数 是对象类型)})
富文本 rich-text
rich-text:node=“detail.content”