微信小程序（1）

一、标签

• view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
• text
  这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
• image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
• button 这个是按钮组件。
• input 这个是输入框组件。
• navigator 这个是导航组件。

二、事件

1.事件类别

• tap：点击事件；
• longtap：长按事件；
• touchstart：触摸开始；
• touchend：触摸结束；
• touchcansce：取消触摸；

2.事件绑定

• bind绑定 ----- bindtap
• catch绑定------能阻止事件冒泡

三、数据渲染页面

• 在小程序中数据存储在 data 中，方法与data同级，在方法中修改数据之后小程序不会自动渲染到页面上，需要自己手导出

  data: {   // 在data中进行存储数据
    active:0,
    value:"",
  },
  async get_left() {
    let { data: res_left } = await request("/shop/goods/category/all")
    console.log(res_left)
    this.setData({    // 使用this.setdata 将数据导出到页面上进行渲染
      left:res_left.data,
      active:this.data.active
    })
  },

四、路由页面跳转

1.navigateTo （有返回键，不可以跳转到tabBar页面）

//保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

2.switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）

wx.switchTab({  
      url: `/pages/detail/detail`,
    })

3.reLaunch (跳转任意页面， 没有返回， 有 首页 按钮)

wx.reLaunch({
      url: '/pages/detail/detail'
    })

4.redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)

    wx.redirectTo({
       url: `/pages/detail/detail`,
    })

5.navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级)

   wx.navigateBack({
       delta:1
    })

区别

• wx.navigator是开启一个新页面，那个页面是隐藏了,原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了
• wx.redirecTo是当前页面替换成新的页面，所以返回不去onunload(页面被卸载)
• tabBar无论跳哪个页面都是onHide

传递参数

• 跳转页面传递数组参数必须序列化

// 传递
 let  arr=[1,2,3,4,5]
      category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化
     wx.navigateTo({
         url: `/pages/detail/detail/?cate= ${category} `,
        })
// 接收
onLoad: function (options) {
  let   category = JSON.parse(options.cate);
 console.log(category)
}

• 参数值过长接收时候内容不全得问题

//传参
wx.navigateTo({//wx.redirectTo、wx.reLaunch
    url: '/pages/details/details?id=' + encodeURIComponent(id)
    })
//接收
onLoad(options) {
    var id = decodeURIComponent(options.id);
}

navigator标签实现路由跳转

<navigator url = "/pages/details/details">跳转到新页面</navigator>
  
<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
  
<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>

五、生命周期

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

详情：更多请查看点击查看该地址