微信小程序基础知识

一. .wxml 文件中的基本语法

  
   {{ msg }} 

  
  

  
  

  
  flag为1时显示
  flag为2时显示
  flag不是以上两种情况时显示

  
  
  
  
  
  
    
    
      {{ item }}, {{ index }}
    

    
    
      {{ list }}, {{ ind }}
    
  

  
  
  点击触发handle自定义方式

  
  点击触发handle自定义方式

二. .js 文件中的常用属性

Page({

  // 自定义: handle处理函数（绑定的点击事件的处理函数）
  handle( ev ){
    // 获取传递的参数的值
    const id = ev.target.dataset.id;
  },

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 自定义数据
    msg: "自定义的msg变量",
    scrollTop: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 2. 获取data中的数据
    const msg = this.data.msg;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 3. 需要在app.json中开启 window.enablePullDownRefresh 值为 true
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 4. 当前页面滚动到底部时自动触发
  },

  // 5. 页面滚动时自动触发的函数
  onPageScroll: function(ev) {

    // 6. 修改data中的数据
    this.setData({
      scrollTop: ev.scrollTop
    });

    // 7. 设置滚动
    [wx.pageScrollTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html)
  }

})

三、小程序的全局配置和页面局部配置

官方网址: 全局配置

// app.json中对小程序进行全局配置
{
  "pages":[
    "pages/index/index",
    "pages/profile/profile"
  ],
  "window":{
    "navigationBarBackgroundColor": "#FF6600",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"white",

    "backgroundColor": "#ccc",
    "backgroundTextStyle": "dark",

    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#ff6600",
    "list": [{
      "pagePath": "pages/indArticle/indArticle",
      "text": "首页",
      "iconPath": "imgs/index.png",
      "selectedIconPath": "imgs/index_active.png"
    },{
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "imgs/concat.png",
      "selectedIconPath": "imgs/concat_active.png"
    }]
  }
}

四、页面跳转及携带参数

网址: [navigator](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)

// 2. 编程式跳转
网址:[wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html)

// 示例:
wx.navigateTo({
  url: `/pages/article/article?id=1&a=2`,
})

// 跳转后，在页面中接收的方式
Page({
  onLoad (options) {
    // options就是 {id: 1, a: 2}
    const id = options.id
  }
})


// 注意: 不能跳转到tabBar对应的页面中，如果要跳转到tabBar，请使用
网址: [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html)
wx.switchTab({
  url: '/index'
})

五、微信小程序父子通信和子父通信

自定义组件

// 假设页面index中需要引入article组件
// 1. 则在index.json中进行如下配置
{
  "usingComponents": {
      "article-detail": "/components/article/article"
  }
}
// 2. 然后在index.wxml中使用即可

  

1. 向组件中传递值

  


// 然后在article.js中接收
properties: {
  msg:{
    type: String,
    value: ""
  }
}

2. 向父页面中传递值

// 首先在子组件中
this.triggerEvent("getArticleById", { id: id });

// 然后在父组件中

  
  // 或者
  


// 最后自定义处理函数接收参数
getArticleById(ev) {
  const id = ev.detail.id;
}