小程序基本内容详解

小程序窗口配置
每一个小程序页面都可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,下面上代码
在这里插入图片描述

在这里插入图片描述

如上图所示第一张是在当前页面的json中配置的属性,第二张是在app.json中配置的属性,箭头所指的就是小程序页面的名字,再看下面的图片
在这里插入图片描述
可以看到在当前页面配置的页面名称覆盖了在app.json中设置的页面名称

再来说一下如何生成页面的文件以及每个页面有几个文件
在这里插入图片描述
如上图所示,在app.json文件中的pages属性中配置好路径再保存就回生成一个页面的文件夹,看下图
在这里插入图片描述
每一个生成的页面文件夹中都有4个文件
js文件是用来写事件
json文件是用来配置当前页面的
wxml文件是用来写页面内容的
wxss文件是用来写页面内容样式的就和html中的css文件一样

小程序的生命周期有那些

  // 生命周期函数--监听页面加载
  onLoad(options){
    console.log("test1 onLoad");
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady(){
    console.log("test1 onReady");
  },
  // 生命周期函数--监听页面显示
  onShow(){
   console.log("test1 onShow");
  },
  // 生命周期函数--监听页面隐藏
  onHide(){
     console.log("test1 onHide");
  },
  // 生命周期函数--监听页面销毁
  onUnload(){
     console.log("test1 onUnload");
  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh() {
     console.log("test1 onPullDownRefresh");
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
     console.log("test1 onReachBottom");
  }

注意
1.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
2.不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。
3.通过 getApp() 获取实例之后,不要私自调用生命周期函数。

页面的生命函数我没理解错的话应该是data()函数因为不确定所以如果有不同意见的话勿喷

数据请求

话不多说直接上代码

 wx.request({
        url: 'https://api.it120.cc/dly/banner/list', //仅为示例,并非真实的接口地址
        // header: {
        //   'content-type': 'application/json' // 默认值
        // },
        success: (res) => {
          console.log(res.data)
          this.setData({
            list: res.data.data.splice(3, 3)
          })
        }
      }),

上面代码就是简单的一个数据请求,url里面写入请求的接口,header请求头可以根据需要自行添加参数然后成功回调函数返回数据

路由跳转和路由跳转传递参数
先说一下路由跳转,
小程序里面的路由跳转有很多种方式,今天先说一下简单的点击事件跳转
先在要点击的标签里写入点击事件bindtap=“xxx”,这个代码里bindtap是小程序里的一个点击事件,在点击事件的后面写一个自定义属性data-id="{{xxx}}"来写要传递的参数,然后在js文件中写点击事件的函数,下面上代码

   //事件处理函数
  xxx: function (e) {
    console.log(e.currentTarget.dataset);
    let id = e.currentTarget.dataset
    wx.navigateTo({
      url:'../xiangqing/xiangqing?id='+id.id
    })
  },

在代码中可以看到我们的点击函数,里面的wx.navigateTo是小程序的固定跳转方法,这个方法有一个缺点就是他不能跳转到我们页面底部导航定义的页面
路由跳转传参的话是如何获取参数呢,其实这个点击事件有一个参数e,打印一下就可以看到里面有很多数据,其中e.currentTarget.dataset就是我们自己定义的属性参数,怎么传递到跳转后的页面呢,其实很简单就是路径拼接路径和参数名用?隔开然后拼接我们的参数值。如果有多个参数的话不同参数之间用&隔开是不是很简单

小程序数据缓存

api备注
wx.clearStorage清理本地数据缓存
wx.clearStorageSyncwx.clearStorage 的同步版本
wx.getStorage从本地缓存中异步获取指定 key 的内容
wx.getStorageInfo异步获取当前storage的相关信息
wx.getStorageInfoSyncwx.getStorageInfo 的同步版本
wx.getStorageSyncwx.getStorage 的同步版本
wx.removeStorage从本地缓存中移除指定 key
wx.removeStorageSyncwx.removeStorage 的同步版本
wx.setStorage将数据存储在本地缓存中指定的 key
wx.setStorageSyncwx.setStorage 的同步版本
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值