!uniapp
uni-app 中可以使用$refs，但是需要注意的是在小程序和App平台不能引用内置组件 在自定义组件中能用
uni本身就不支持操作dom，但可以获取dom信息请用uni.createSelectorQuery()
使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
！！自定义组件编译模式（默认模式），需要使用到 selectorQuery.in(component) 方法。
//指向自定义组建内可以用this 与自定义组建名
const query = uni.createSelectorQuery().in(this);
//在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息
const nodes= query.select('#id');
//在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
const nodes= query.selectAll(".class");
//获取节点的相关信息。第一个参数是节点相关信息配置；第二参数是方法的回调函数，参数是指定的相关节点信息
nodes.fields({
id:false,//是否返回节点 id
dataset:id:false,//是否返回节点 dataset //App、微信小程序、H5
rect:true,//是否返回节点布局位置（left right top bottom）
size:true,//是否返回节点尺寸（width height）
scrollOffset:false//是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
}, data => {
this.itemWidth=data.width;
this.itemStyle = `height:${data.width}px;line-height:${data.width}px;margin: 10rpx calc((100% - ${data.width*7}px) / 14);`
}).exec();
//添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。
nodes.boundingClientRect(data => {
/*id String 节点的 ID
dataset Object 节点的 dataset
left Number 节点的左边界坐标
right Number 节点的右边界坐标
top Number 节点的上边界坐标
bottom Number 节点的下边界坐标
width Number 节点的宽度
height Number 节点的高度*/
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();//执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
eg:
let view = uni.createSelectorQuery().in(this).select(".test");
view.fields({
size: true,
scrollOffset: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的宽为" + data.width);
}).exec();
view.boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();
/*scroll-view
1.纵向滚动
，<scroll-view scroll-y style="height: 400rpx;"> 1231231231</scroll-view>
即 如果是纵向滚动，必须指定滚动区域的高度 动态绑定高度:style="{'height':clientHeight+ 'px' }"
let clientHeight=uni.getSystemInfoSync()
2.横向滚动
核心思想： 需要让scroll-view里的子元素在一行展示。
父元素设置 white-space: nowrap; //不换行
子元素设置display: inline-block;
->
页面返回并传参
当前页面
var pages = getCurrentPages();//获取pages列表
var prevPage = pages[pages.length - 2]; //上一个页面
prevPage.setData({//将当前页面的值传递到上一页面
param:this.param
});
uni.navigateBack({
delta: 1
})// 返回上一页面 默认返回上一级也就是delta默认为1
需要返回的页面
var pages = getCurrentPages();//获取pages列表
var currPage = pages[pages.length - 1]; //当前页面
let currDate = currPage.data.param; //传过来的值
this.param//当前页面的data中的某个属性
this.param= currPage.param; 跟新属性 onshow
在uni-app中使用字体图标 首先去iconfont下载字体文件，就是下面这几个.css .eot .svg .ttf .woff
在main.js中引入样式
使用 class="iconfont icon-xxx"
跨域的get post
get 直接在请求头中将数据传输 tcp连接一次
post 先tcp连接一次发送请求头成功了在发送请求主体
修改从后台返回的数据名变为在静态页面的数据名
let newData=[] //新建要保存的对象
for(let i=0;i<res.data.length;i++){//修改变量名
let obj={
newsbnimg:res.data[i].img_url,
newsbntit:res.data[i].title
}
newData.push(obj)
}
this. newsbanners=newData;
微信登录
uni.login({
provider: 'weixin',
success: function (loginRes) {
console.log(loginRes.authResult);
}
});
登录成功loginRes如下
{
"code":"***",
"authResult":{
"openid":"***",
"scope":"snsapi_userinfo",
"refresh_token":"**",
"code":"****",
"unionid":"***",
"access_token":"***",
"expires_in":7200
},
"errMsg":"login:ok"
}
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickName);
}
});
获取用户信息，通过上方的 uni.login 方法会得到用户 access_token，故 uni.getUserInfo 在此基础上获取用户的 openid、userInfo(头像、昵称) 等信息。
{
"errMsg":"getUserInfo:ok",
"rawData":"...
"userInfo":{
"openId":"***",
"nickName":"***",
"gender":1,
"city":"Xi'an",
"province":"Shaanxi",
"country":"China",
"avatarUrl":"头像",
"unionId":"oU5xxxxxxxxxxeLfFPqxo"
},
"signature":""
}
移动端横屏
onLaunch: function() {
console.log('App Launch');
plus.screen.lockOrientation('landscape-primary'); //锁定
}
orientation: ( String ) 必选 要锁定的屏幕方向值
锁定屏幕方向可取以下值：
"portrait-primary": 竖屏正方向；
"portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°；
"landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°；
"landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°；
"portrait": 竖屏正方向或反方向，根据设备重力感应器自动调整；
"landscape": 横屏正方向或反方向，根据设备重力感应器自动调整；
原生子窗体
使用场景：
覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。
弹出层内部元素可滚动,
在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。
解决方案：
在小程序中只能用 cover-view 来解决。App中，开发者希望有更强的解决方案。（可以用subNVue）
app端解决： pages.json 中
"app-plus": {
"subNVues":[{
"id": "concat", // 唯一标识
"path": "pages/index/subnvue/concat", // 页面路径
/*"type": "popup", 这里不需要*/
"style": {
"position": "absolute",
"dock": "right",
"width": "100upx",
"height": "150upx",
"background": "transparent"
//配置文档
[原生子窗体的样式配置文档](https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid)
}
}]
}
// 通过 id 获取 nvue 子窗体
const subNVue = uni.getSubNVueById('concat')
// 打开 nvue 子窗体
subNVue.show('slide-in-left', 300, function(){
// 打开后进行一些操作...
//值传递
// 在 subNVue/vue 页面触发事件
// $emit(eventName, data)
uni.$emit('children', {
videosrc:"...."
});
});
// 关闭 nvue 子窗体
subNVue.hide('fade-out', 300)
// 在 subNVue/nvue 页面注册事件监听方法
// $on(eventName, callback)
created() {
uni.$on('children', (data) => {
this.$nextTick(() => {
this.videoUrl = data.videosrc;
})
})
},
beforeDestroy() {
uni.$off('children')
},
要在页面卸载前，使用 uni.$off 移除事件监听器。
//自定义属性
//组件中 data-name=""
//在事件中 然后在事件处理程序中通过e.target.dataset读取自定义属性集合，如e.target.dataset.name
<text v-for="(item, index) in students" @click="menuClick" :id="index"
:data-name="item.name" :data-age="item.age" :key="index">
{{index}} - {{item.name}} - {{item.age}}
</text>
methods: {
menuClick: function (e) {
console.log(e.target.id);
console.log(e.target.dataset.name);
console.log(e.target.dataset.age);
}
},
扫一扫
2167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
