微信小程序入门篇

一个完整的微信小程序是由一个App实例和多个Page实例构成，其中App实例表示该小程序应用，多个Page表示该小程序的多个页面。

微信小程序的基础知识主要有以下几个部分：

• 两种配置文件 && 两个核心函数

• app.json 应用的全局配置文件
  它是针对微信小程序的全局配置，主要包含以下几个配置：
  ✦pages：页面路径的数组，表示小程序要加载的所有页面，其中数组第一项代表小程序的初始页面。
  ✦window：微信原生功能，定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。
  ✦tabBar：微信原生功能，定制化不强。适用于常规的Tab应用，Tab栏可置于顶部或底部；tabBar是一个数组，仅支持2-5个tab。
  ✦networkTimeout：配置小程序网络请求的超时时间。
  ✦debug：调试模式开关，开发模式下建议开启，正式发布别忘了关闭。

• page.json 页面的全局配置文件
  page.json只能对window配置，有两个比较有用的配置项分别是：
  ✦enablePullDownRefresh：是否开启下拉刷新
  ✦disableScroll：只能在page.json配置，禁止页面上下滚动，猜测可以实现完美滑屏滑动（未验证）

• App() 小程序注册入口，全局唯一

   // 注册微信小程序，全局只有一个
   let appConfig = {
     // 小程序生命周期的各个阶段
     onLaunch: function(){},
     onShow: function(){},
     onHide: function(){},
     onError: function(){},
     // 自定义函数或者属性
     ...
   };
   App(appConfig);
  
   // 在别的地方可以获取这个全局唯一的小程序实例
   const app = getApp();

• Page() 页面注册入口

  // 注册微信小程序，全局只有一个
  let pageConfig = {
     data: {},
     // 页面生命周期的各个阶段
     onLoad: function(){},
     onShow: function(){},
     onReady: function(){},
     onHide: function(){},
     onUnload: function(){},
     onPullDownRefresh: function(){},
     onReachBottom: function(){},
     onShareAppMessage: function(){},
     // 自定义函数或者属性
     ...
  };
  Page(pageConfig);
  
  // 获取页面堆栈，表示历史访问过的页面，最后一个元素为当前页面
  const page = getCurrentPages();

• WXML模板语法，页面渲染
  小程序虽然是hybrid模式，但并不使用HTML渲染，而是全部通过自定义标签来渲染页面。
  和所有的模板语言一样，WXML支持数据绑定、条件渲染、循环、模块化等功能。

  • 数据绑定
    在 WXML 中可以使用{{}}将 Page 的变量或者表达式包裹起来，实现数据绑定。
  • 条件渲染
    条件渲染，适合根据数据输出不同状态的 WXML
  • 循环渲染
    循环渲染，适合遍历数据输出多段 WXML
  • 模块化
    WXML的模块化，可以让我们复用一些wxml片段

• 页面间的跳转
  小程序以栈的形式维护了历史访问的所有页面，并提供了多种页面间的跳转方式；结合前文提到的App()和Page()的各个生命周期，不同的跳转方式和不同的生命周期关联，如下图：
  

• 交互事件
  事件绑定

  // bindtap 和 catchtap的区别在于 
  // bindtap 不会阻止事件冒泡 
  // catchtap会冒泡事件冒泡 
  <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 
  <view id="tapTest" data-hi="WeChat" catchtap="tapName"> Click me! </view> 
  // 绑定的函数tapName只是一个函数名称，默认接受一个event对象作为参数 
  Page({ 
  tapName: function(event) { 
   console.log(event) 
  } 
  })

  事件传参
  传递自定义参数主要有两种方式：
  第一种：将参数绑定到wxml标签上，然后通过event.target.dataset获取
  第二种：直接使用Page.data或其他数据

• 官方组件和官方API
  官方组件：https://developers.weixin.qq.com/miniprogram/dev/component/?t=20161222
  官方API：https://developers.weixin.qq.com/miniprogram/dev/api/?t=20161222

参考链接：https://www.zhihu.com/question/50907897/answer/140010208