微信小程序学习笔记

页面的生命周期函数

onLoad    页面加载的时候执行

onReady    页面初次渲染完成

onShow   监听页面显示,

onHide  监听页面隐藏

onUnload   监听页面卸载

下面是监听页面相关事件处理函数

onPullDownRefresh  监听用户下拉动作

onReachBottom   页面上拉触底事件的处理函数

onShareAppMessage用户点击右上角分享

组件的生命周期

lifetimes:{
    created(){
      // 可以使用this.data
      console.log("在组建实例刚刚被创建的时候触发",this.data.a);
      // 如果发送请求，必须添加异步修改数据;
      // setTimeout(()=>{
      //   this.setData({a:90});
      // },0)
    },
    attached(){
        console.log("组件实例在进入页面节点树的时候执行,此时可以通过setData进行数据的修改");
    },
    
    ready(){
      console.log("在组件在视图层布局完成后执行,可以获取节点信息，也可以操作节点");
    },

    moved(){
      console.log("在组件实例被移动到节点树另一个位置时执行");
    },
    detached(){
      console.log("在组件实例被从页面节点树移除时执行");
    },
  }
})

tabBer 配置

在app.json 中配置

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",  //页面路径
        "text": "首页", 
        "iconPath": "/public/home.png",   
        "selectedIconPath": "/public/home-h.png"  //选中之后的icon路径
      },
      {
        "pagePath": "pages/douyu/douyu",
        "text": "斗鱼",
        "iconPath": "/public/home.png",
        "selectedIconPath": "/public/home-h.png"
      }
    ]
  },

配置组件是否样式隔离

在component({}) 配置

 options:{  //配置组件样式时候为隔离样式;
    // styleIsolation:"isolated",  //默认值 样式为隔离的,但是页隔离全局的样式   
    // styleIsolation:"apply-shared"   //，页面的的wxss会影响组件的样式，自定义组件样式不会影响到页面 
    // styleIsolation:"shared"  // 样式不隔离，将会互相影响
    // 一般使用样式隔离,
  },  

配置开启下拉刷新和触底加载更多的距离

  "enablePullDownRefresh": true,
   "onReachBottomDistance":50,  //50px  number类型

开启生物验证

wx.startSoterAuthentication({
      challenge: '我是因子',  //密钥
      requestAuthModes: ["fingerPrint","facial"],
      success:(res)=>{
        wx.vibrateLong();  //长震动
        // 跳转到展示私密相册页面
        wx.navigateTo({   //验证通过跳转路由;
          url: '/pages/photo/photo',
        })
      }
    })
    

定义工具文件

我们可以使用js文件，但是不能在wxml中直接计算出结果，返回到页面，我们也可以使用插件，如果需求较少的话，我们也可以使用wxs文件，进行计算结果或者filter的封装使用;

1. 创建一个wxs文件夹 并将函数进行导出;本例子写的添加两位小数

function num(number){
  if(number%1==0){
    return number +".00";
  }
  return number.toFixed(2)
}

module.exports = num
    
2. 在需要使用的页面添加<wxs>组件
 modeule 是我们导出的函数名
<wxs module="num" src="../../utils/wxs/numberfilter.wxs"></wxs>

3 在页面直接使用函数 

<view >{{num(10)}}</view>

微信小程序状态管理

使用wxministore 插件完成小程序的状态管理;

// 导出创建仓库创建的函数
import Store from "wxministore";
let store = new Store({
  state:{   //仓库的公共数据
  
  },
  methods:{   //公共函数
  
  }
})
在app.js 文件中进行注入
 globalData: {
    userInfo: null
  },
  store:store,  //注入到app中 

访问和修改

// 直接访问  不能同步到页面
console.log(store.$state.msg);
// 推荐使用
console.log(store.getState().msg);  

在其他页面使用

  <text>{{$state.xxx}}</text>
  
在template 使用

 <template name="t1">
    <text>{{$state.xxx}}</text>
  </template>
  <template is="t1" data="{{$state}}"></template>

在其他页面修改

app.store.setState({
      msg:"你好",
      user:user
    })

使用公共函数
 直接使用
<button bindtap="sayHello">调用公共函数</button>