3.1.1 组件生命周期 组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。 3.1.2定义生命周期方法 注意： 在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。 Component({ lifetimes: { attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }, // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, // ... })生命周期 参数 描述 最低版本 created 无 在组件实例刚刚被创建时执行 1.6.3 attached 无 在组件实例进入页面节点树时执行 1.6.3 ready 无 在组件在视图层布局完成后执行 1.6.3 moved 无 在组件实例被移动到节点树另一个位置时执行 1.6.3 detached 无 在组件实例被从页面节点树移除时执行 1.6.3 error Object Error 每当组件方法抛出错误时执行 2.4.1
3.2.1 小程序页面的生命周期 onLoad 生命周期函数–监听页面加载 onShow 生命周期函数–监听页面显示 onReady 生命周期函数–监听页面初次渲染完成 onHide 生命周期函数–监听页面隐藏 onUnload 生命周期函数–监听页面卸载
cofing。js文件中
const http = '公共路径'; //公共路径 //post封装 function postRequest(url,data){ var promise = new Promise((resolve,reject)=>{ var that = this; var postData = data wx.request({ url:http + url, data:postData, method:"POST", //每次请求都要带的参数 header:{ 'content-type': 'application/x-www-form-urlencoded', 'token':wx.getStorageSync("token") }, //成功回调 success:function (res){ resolve(res) }, err:function (e){ reject('网络请求出错') } }) }) return promise; } //get封装 function getRequest(url,data){ var promise = new Promise((resolve,reject)=>{ var that = this; var postData = data wx.request({ url:http + url, data:postData, methods:'GET', header:{ 'content-type': 'application/json' }, success:function (res){ resolve(res) }, err:function (e){ reject('网络请求错误') } }) }) return promise } //抛出两种请求 module.exports = { getRequest, postRequest, }在http文件中
//先引入 上面的文件 let config = require('./config') //轮播图 let banner = function (e){ return config.getRequest('banner/list',e) } //抛出 module.exports = { banner, }在那个页面使用就在那个相应的 js文件中引入
import http from "../../utils/http.js"; //在生命周期中使用 http.banner().then(res => { let benner = res.data.data that.setData({ swiperList: benner.splice(3, 3) }) // console.log(benner); })在首页先给某个元素一个点击事件（bindtap=“gotoclassfity”）和拿到id ( data-alphaBeta="{{item.id}}")
<view class="radio"> <view wx:for="{{gridlist}}" wx:key="i" class="radio_item" bindtap="gotoclassfity" data-alphaBeta="{{item.id}}"> <view> <image src="{{item.icon}}"></image> </view> <view>{{item.name}}</view> </view> </view>在js文件中
gotoclassfity: function (e) { //这里是点击元素的id let id =e.currentTarget.dataset.alphabeta // console.log(id); //z这里是本地存储 因为wx.switchTab这个事件不能传参 wx.setStorageSync('id', id) wx.switchTab({ url: '../classify/index', }) },在分类页的onshow生命周期中
// 生命周期函数--监听页面显示 onShow: function () { let that=this var classifyid=wx.getStorageSync('id') http.list({categoryId:classifyid}).then(res => { let list = res.data.data if(list ==undefined){ that.setData({ isw: true, id:classifyid }) }else{ if(res.data.code ==0){ that.setData({ goodsList: list.reverse(), isw:false, id:classifyid }) } } }) },在taber属性中配置
"tabBar": { "borderStyle":"black", //边框颜色 "selectedColor": "#D9240D", //选中颜色 "color": "#707070", //默认颜色 "list": [{ // 有几个主要页面就创建几个对象 "pagePath": "pages/home/home", //路径 "text": "首页", // 显示文字 "iconPath": "./imgs/shouye.png", // 显示未选中图片 "selectedIconPath": "./imgs/shouye(1).png" // 显示选中图片 }, ] },以上就是.路由配置 ，希望对大家有帮助！
**一级分类 **
<view class="main-left"> <view class="main-left-item {{id==item.id?'active':'old'}}" wx:for="{{gridlist}}" wx:key="index" bindtap="addlist" data-id="{{item.id}}">{{item.name}}</view> </view>js文件
addlist:function(e){ let ids =e.currentTarget.dataset.id // console.log(ids); http.list({categoryId:ids}).then(res => { let list = res.data.data if(list ==undefined){ this.setData({ isw: true, id:ids }) }else{ if(res.data.code ==0){ this.setData({ goodsList: list.reverse(), isw:false, id:ids }) } } }) },以上就是点击获取参数 ，希望对大家有帮助！
需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
1、同步 （1）wx.setStorageSync(); //存储值
try { wx.setStorageSync('key', 'value') } catch (e) { }（2）wx.removeStorageSync(); // 移除指定的值
try { wx.removeStorageSync('key') } catch (e) { // Do something when catch error }（3）wx.getStorageSync(); // 获取值
try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { // Do something when catch error }（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
try { const res = wx.getStorageInfoSync() console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) } catch (e) { // Do something when catch error }（5）wx.clearStorageSync(); // 清除所有的key
try { wx.clearStorageSync() } catch(e) { // Do something when catch error }2、异步 （1）wx.setStorage(); //存储值 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
wx.setStorage({ key:"key", data:"value"})（2）wx.removeStorage(); // 移除指定的值
wx.removeStorage({ key: 'key', success (res) { console.log(res) }})（3）wx.getStorage(); // 获取值
wx.getStorage({ key: 'key', success (res) { console.log(res.data) }})（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
wx.getStorageInfo({ success (res) { console.log(res.keys) console.log(res.currentSize) console.log(res.limitSize) }})（5）wx.clearStorage(); // 清除所有的key
wx.clearStorage()以上就是微信给我们提供的本地存储的方法，希望对大家有帮助！
