2020_08_07微信小程序学习总结

续：昨天遗漏的知识点
自定义组件样式隔离问题
默认的情况是自定义组件外部的样式不会污染到自定义组件内部的样式
如有需要还可以设置隔离方法：
1，在组件的options中开启styleIsolation选项
代码如下：

	Component({
    	options:{
        styleIsolation: 'isolated'，//表示样式隔离，默认隔离
      },
     ``     2. 通过外部样式类允许外部的某个类来影响自定义组件 ``
     方法：
     		  1.在自定义组件js中添加允许哪个外部类的自定义属性
    Component({
      externalClasses: ['my-bg']
    }）
    
    2.在引入页面的子组件上添加外部样式类属性
    
    <Dialog my-bg="bg"> </Dialog>
    
    3. 在子组件内部添加对应的外部样式类名
    
    <view class="my-bg">xxxx</view>

3，组件的生命周期：

created:组件创建完成,但不能setData

attached：在组件实例进入页面节点树时执行

ready:在组件在视图层布局完成后执行

detached:在组件实例被从页面节点树移除时执行

4，Behavior：相当于vue的mixins React中类似于HOC

主要目的是为了复用组件之间相同的方法    
参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.htmlhttps://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html

5，微信小程序第三方的UI组件
小程序UI组件的引入也是基于npm
第一步：

  初始化package.jsonnpm init -y

第二步：安装需要的小程序ui框架或第三方包

 npm install weui-miniprogram

第三步：配置小程序npm

打开开发者工具–详情–本地设置–勾选【使用npm模块】
打开开发者工具–工具–构造npm

第四步：在app.wxss中引入第三方的ui框架样式

第五步：在要引入的页面中添加相关组件并在页面上直接使用

   xxx.json中引入第三方组件路径

注：具体使用方法包括相关属性事件api

  - vant ui使用

vant ui（基于微信小程序）https://youzan.github.io/vant-weapp/#/intro

第一步：初始化package.json

npm init -y

第二步：安装需要的小程序ui框架或第三方包

npm i @vant-weapp -S --production

第三步：配置小程序支持npm

打开开发者工具–详情–本地设置–勾选【使用npm模块】

打开开发者工具–工具–构造npm

第四步：在要引入的页面中添加相关组件并在页面上直接使用

 xxx.json中引入第三方组件路径

注：具体使用方法包括相关属性事件参考api

  tabBar右上角的badge
  wx.setTabBarBadge({  index: 2,text: '10'})

小程序数据缓存：
1.存储
wx.setStorageSync(‘属性’, ‘值’)
2.获取
wx.getStorageSync(‘name’)
3.删除
wx.removeStorageSync(‘name’)
4.删除全部
wx.clearStorageSync()
小程序登录：
wx.login({
success:res=>{
code
}
})
获取用户信息：wx.getUserInfo()