微信小程序攻略日记&基础web知识点学习

微信小程序

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() 获取屏幕边界到安全区的距离---不同手机的安全区域不同，适配安全区域能防止页面重要内容被遮挡。