这里写自定义目录标题
微信小程序
bindtap
1、bindtap传参通过data-xxx将参数xxx传递,然后具体方法通过`event.target.dataset.xxx`获取
2、修改变量通过this.SetData({xx:7})进行处理
3、<view bindtap="getInfo" data-cg="8"></view>
getInfo(){
let value =event.target.dataset.cg ;
this.SetData({
p:value
})
}
bindinput
1、通过`event.detail.vaue`获取输入的值
2、<input bindinput="getInfo" value="{{msg}}"></input>
wx:if条件渲染
1、<view wx:if="{{view}}">True</view>
2、<view wx:elif="{{view}}">TrueElseIf</view>
3、<view wx:else="{{view}}">TrueElse</view>
block标签
类似于vue中的template标签在html不存在渲染的元素
hidden
控制元素的显示和隐藏、类似于vue的`v-show`、不移除`dom`元素、只是通过控制`display`的内容;
<view hidden="{{isHidden}}">true</view>
而`wx:if`则类似于`v-if`会实时移除和创建dom元素;
wx:for
<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="index">
{{item.label}}</view>
rpx和px的区别
rpx会把屏幕分成750等分、这可以实现在不同设备的分辨率下自适应
tabBar配置项
1、顶部tabbar或底部tabbar(底部tabbar不显示icon)
2、backgroundColor:背景色
3、selectedIconPath:选中时的图片路径
4、iconPath:未选中时
5、borderStyle:tabbar上边框的颜色
6、color:未选中时的文字yanse
7、selectedColor:选中时的文字颜色
页面跳转
1、申明式跳转
<navigator url=""></navigator>
2、编程式跳转
wx.navigateto({ 左上角可以返回
url:''
})
wx.redirectTo 重定向跳转、无返回按钮
wx.switchTab 跳转到tabbar页面
wx.reLaunch 关闭所有页面 打开到应用内的某个页面
wx.navigateBack({ //回退历史某个页面
delta: 1 //默认为1
})
web基础知识
常见但不常记的选择器
:valid 表单验证通过时
:invalid 表单验证未通过时
:required 表单必填项时
:optional 表单非必填项时
:read-only 表单只读时
:read-write 表单允许编辑时
::before
::after
:placeholder-shown
A+B:B必须是紧跟在A后面的兄弟元素,必须是紧跟+后面
A~B:B和A必须是同一个父元素、且B必须在A的后面
a[attr^=value]:匹配属性attr以value开头的
a[attr$=value]:匹配属性attr以value结尾的
a[attr*=value]:匹配属性attr包含value这几个字的
a[attr~=value]:匹配属性attr存在和value相同值的
a[attr]
关于this指向的问题
- this关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总是指向调用它的对象
- 根据不同的使用场合,this有不同的值,主要有以下场合
- 默认绑定
全局环境定义函数function ,内部使用的this关键字会指向window,注意:严格模式下,不能将全局对象用于默认绑定,this会指向 undefined 而不是window,只有在非严格模式下,默认绑定才能绑定到全局对象上!
- 隐式绑定
函数还可以作为**某个对象**的方法调用,这时this就指这个上级对象!
- new绑定
通过构建函数new 关键字生成一个实例对象,此时this指向这个实例对象!
举例子1:如果函数return 了一个对象,此时this指向为返回的对象:
function fn(){
this.user = 'xxx';
return {};
}
var a = new fn();
console.log(a.user); // undefined; this指向了{}里面并没有 user这个属性
举例子2:如果函数return的是一个简单类型||null,则this指向实例对象:
function fn(){
this.user = 'xxx';
return 1; //or return null
}
var a = new fn()
console.log(a.user);//xxx
- 显示绑定
apply()、call()、bind()是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此,这时this指的就是这第一个参数。他们之间的小结:
- 三者都可以改变函数的this对象指向
- 三者的第一个参数都是this要指向的对象,如果没有这个参数或者参数为undefined或null,则默认指向全局window
- 三者都可以传参但是apply是数组、call是参数列表、且apply和call是一次性传入参数,而bind可以分为多次传入(多次传入????)
- bind是返回绑定this之后的函数,而apply和call是立即执行!
优先级对比:new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认绑定优先级
display:grid;弹性布局的使用方式
{
display:grid;
grid-template-columns:1fr 2fr; //第一列占据1/3 第二列占据2/3;
grid-template-columns:100px auto 200px; //第一列100px 第二列自适应 第三列200px;
}
结合uniapp+vue3+小程序的开发简记
1、微信小程序可以自动生成骨架屏,然后前端根据生成的骨架屏页面xx.skeleton.wxml 以及.wxcss文件封装成vue文件-------骨架屏作用是缓解用户等待时的焦虑情绪,属于用户体验优化方案
2、pages.json 内配置参数 "navigationStyle": "custom",选择custom的时候则自定义导航栏、隐藏默认导航栏;`custom和none页面将失去返回按钮和标题栏,你需要自己实现返回按钮和导航栏的功能`
3、uni.getSystemInfoSync() 获取屏幕边界到安全区的距离---不同手机的安全区域不同,适配安全区域能防止页面重要内容被遮挡。