结合 wx-demo-start 讲入门小程序开发

前言

本篇文章是一篇学习笔记的分享，主要包含：常用组件、API、模板、路由、生命周期和页面间的数据传递，适合初学者学习。
wx-demo-start 的源码：https://github.com/ycshill/wx-demo-start.git

1. 用到组件

• 视图容器
  这部分是比较常用的内容
  
  • view
    最常用的组件，相当于“div”
  • scroll-view
    可滚动的视图区域，常用属性：”scroll-x”,”scroll-y”，一般用来做下拉滚动，垂直滚动的时候，需要给其设置固定高度
  • swiper
    滑块视图容器，一般是给 swiper 设置高度，swiper-item 会根据 swiper 的高度来撑开。

• 基础内容

  • icon
    图标，主要属性包含：”type”, “size”,”, “color”

    

  • text
    文本，支持\n

• 表单组件
  这部分内容比较重要，可以自己撸遍官方代码。

  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section section_gap">
      <view class="section__title">switchview>
      <switch name="switch"/>
    view>
    <view class="section section_gap">
      <view class="section__title">sliderview>
      <slider name="slider" show-value >slider>
    view>
  
    <view class="section">
      <view class="section__title">inputview>
      <input name="input" placeholder="please input here" />
    view>
    <view class="section section_gap">
      <view class="section__title">radioview>
      <radio-group name="radio-group">
        <label><radio value="radio1"/>radio1label>
        <label><radio value="radio2"/>radio2label>
      radio-group>
    view>
    <view class="section section_gap">
      <view class="section__title">checkboxview>
      <checkbox-group name="checkbox">
        <label><checkbox value="checkbox1"/>checkbox1label>
        <label><checkbox value="checkbox2"/>checkbox2label>
      checkbox-group>
    view>
    <view class="btn-area">
      <button formType="submit">Submitbutton>
      <button formType="reset">Resetbutton>
    view>
  form>

• 媒体组件

  • image
    图片，有个 “mode” 属性，用来进行图片裁剪、缩放的模式。

• 其他

  • block
    一般用在循环的地方

     <block wx:for="{{movies}}" wx:for-item="movie">
      <template is="movieTemplate" data="{{...movie}}"/>
    block>

2. 用到API

• 网络
  
  • 发起网络请求：
    
    • wx.request(OBJECT) 发送网络请求，请求数据
• 媒体
  
  • 图片
    
    • wx.previewImage(OBJECT)： 预览图片
  • 背景音频播放管理
    
    • wx.getBackgroundAudioManager()： 背景音频播放管理，获取全局唯一的背景音频管理器 backgroundAudioManager，注意onPlay 和 play，其中 onPlay 是回调函数。
• 数据缓存
  可以根据API详细理解，总结来说就是set、get、remove、clear这四大类，同时分为同步和异步，同时在调试的时候注意在模拟器上有一个清除缓存的，但是真机没有，所以在真机上的时候，出现bug的时候，要想想是不是缓存的问题。
• 界面
  
  • 交互反馈
    
    • wx.showToast(OBJECT)\wx.hideToast()： 提示框的显示和隐藏
    • wx.showLoading(OBJECT)\wx.hideLoading()： loading 提示框的显示和
    • wx.showModal(OBJECT)： 显示模态弹窗
  • 设置导航条
    
    • wx.showNavigationBarLoading()\wx.hideNavigationBarLoading(): 导航条加载动画的显示和隐藏
  • 导航
    
    • wx.navigateTo(OBJECT)： 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack 可以返回到原页面，有返回按钮。
    • wx.redirectTo(OBJECT)： 关闭当前页面，跳转到应用内的某个页面。
    • wx.switchTab(OBJECT)： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

3. 模板

模板是小程序开发中很重要的一个概念，官网文档解释如下：

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

在本篇文档分享的wx-demo-start 中也大量使用了模板，例如图中的标红位置都是模板：

3.1 定义和使用模板

• 定义 template
  使用