微信小程序

image.png

基础技术设备

image.png

开发者工具的使用

image.png

框架全局文件

• App.js小程序逻辑
  App.js文件用来定义全局数据和 函数的使用，它可以指定微信小程序 的生命周期函数。生命周期函数可以 理解为微信小程序自己定义的函数， 如onLaunch（监听小程序初始化）、 onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段、 不同场景可以使用不同的生命周期函 数。此外，App.js中还可以定义一些全 局的函数和数据，其他页面引用App.js 文件后就可以直接使用全局函数和数 据，如图所示。
  

  image.png

• App.json小程序公共设置

image.png

image.png

• 工具类文件

  在微信小程序框架目录里有一个“utils”文件夹，它用来存放工具栏的js函数，如可以放置一些 日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后， 要通过
  module.exports将定义的函数名称注册进来，在其他的页面才可以使用，如图所示为时间格式化工 具类文件。
  
  image.png

• 框架页面文件结构

  一个小程序框架页面文件由4个文件组成，分别是js页面逻辑、wxml页面结构、wxss页面 样式表和json页面配置，如表所示。

• image.png

• 框架页面文件

微信小程序的框架页面文件都是放置在“pages”文 件夹下面的，如图所示。每个页面都有一个独立的文件夹，就像日志页面的“logs”文件夹， 它的下面放置4个文件：logs.js可进行 业务路径处理；logs.json是页面的配置，可以覆盖全局App.json配置；logs.wxml是页面结构，负责渲染页面；logs.wxss是针对logs.wxml页面的样式文件。

image.png

• 微信小程序注册程序应用

App.js文件不仅可以定义全局函数和数据，还可以注册一个小程序。在App()函数里可以完 成小程序的注册以及指定其生命周期函数。如表所示为生命周期函数的定义。

• image.png

  1. onLaunch生命周期函数。它用来监听小程序初始化，一旦初始化完成，就会触发该函数， 这个生命周期函数只会触发一次。

  2. onShow生命周期函数。它用来监听小程序显示。微信小程序有前后台定义。当用户单击左上角的“关闭”按钮或者按“Home”键关闭或者突然来电话时，微信小程序都没有销毁， 而是进入后台；当再次进入微信或者小程序的时候才会触发onShow生命周期函数。只要程序启动或者从后台进入到前台都会触发该函数。

  3. onHide生命周期函数。它用来监听小程序隐藏，一旦微信小程序从前台进入到后台，就会 触发该函数。

  4. onError生命周期函数。它用来监听小程序脚本或者API是否发生错误，发生错误时返回错 误信息。

• 微信小程序页面的JS

  在每个页面文件夹里，都有 一个页面对应的js文件，在这个文件里的Page()函数用于注册一个页面。 接受一个object 参数，其指定页面的初始数据、生命周期函数、 事件处理函数等页面的所有业务逻辑处理都放在这个文件里。
  object参数说明如表所示。
  
  image.png

• 生命周期函数

  1. onLoad页面加载。一个页面只会调用一次，接收页面参数可以获取 wx.navigateTo和wx.redirectTo及<navigator/>中的query。

  2. onShow页面显示。每次打开页面都会调用一次

  3. onReady页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视 图层进行交互，对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

  4. onHide页面隐藏。当navigateTo或底部Tab切换时调用。

  5. onUnload页面卸载。当redirectTo或navigateBack时调用。

• 页面相关事件处理函数

  1. onPullDownRefresh下拉刷新。监听用户下拉刷新事件，需要在config的window选项中开 启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当 前页面的下拉刷新。

  2.onShareAppMessage用户分享。只有定义了此事件处理函数，右上角菜单才会显示“分 享”按钮，用户单击“分享”按钮的时候会调用，此事件需要 return 一个 Object，用于 自定义分享内容。分享参数说明如表所示。

image.png

• 页面路由管理

  1. 微信小程序的页面路由都是有微信小程序框架来管理的，路由的触发方式及页面生命周期 函数如表所示。

image.png

• 自定义函数

  1. 除了初始化数据和生命周期函 数，Page 中还可以定义一些特殊 的函数：事件处理函数。在渲染层 可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中 定义的事件处理函数。

  //写在wxml
  <view bindtap=”clickMe”> click me </view>
  

  //写在wxjs
    Page({
        clickMe: function() {  console.log(‘view tap’) }
    })
  

• 微信小程序页面绑定数据

  1. WXML页面里的动态数据都是来自js 文件Page的data，数据绑定就是通过双大 括号（{{}}）将变量包起来，在WXML页面 里将数据值显示出来。

   //在 index.wxml写
    <view> {{ message }} </view>
  

   //在 index.js 写
  Page({
     data: {
          message: ‘Hello MINA!’
     } 
  })
  

• 组件属性绑定

  1.组件属性绑定是将data里的数据绑定 到微信小程序的组件上。

  //在 index.wxml写
  <view id="item-{{id}}"> </view>
  

   //在 index.js 写
  Page({
    data: { 
       id: 0
    }
  })
  

• 控制属性绑定

  1. 控制属性绑定用来进行if语句条件判断，如果满足条件，则执行，否则 不执行，示例代码如下。

  //在 index.wxml写
  <view wx:if="{{condition}}"> </view>
  

   //在 index.js 写
  Page({
    data: {  
        condition: true
    }
  })
  

• wx:for 列表渲染组件

  1. 在组件上使用wx:for控制属性绑 定一个数组，即可使用数组中的各项 数据重复渲染该组件。默认数组当前 项的下标变量名默认为index，数组当 前项的变量名默认为item，示例代码 如下。

  //在 index.wxml写
  <view wx:for="{{array}}">
     {{index}}: {{item.message}}
  </view>
  

   //在 index.js 写
  Page({
    data: {  
        array: [
            {
            message: ‘foo’,
            } ,
            {
              message: ‘bar’
            }
        ]
    }
  })
  

• 定义模板

  1. 在<template/>内定义代码片段， 使用name属性作为模板的名字，示 例代码如下。

  //在 index.wxml写
   <template name=”msgItem”>
       <view>
           <text> {{index}}: {{msg}} </text>
           <text> Time: {{time}} </text>
       </view>
   </template>
  

• 使用模板

  1.在WXML文件里，使用is属性， 声明需要使用的模板，然后将模板 所需要的data传入，示例代码如下。

  //在 index.wxml写
  <import src=”item.wxml”/>
  <template is=”msgItem” data=”{{item}}”/> 
  

   //在 index.js 写
  Page({
    data: {
      item: {  
          index: 0,
          msg: ’this is a template’,  time: '2016-09-15'
      }
    }
  })
  

• include引用

  1.include可以将目标文件除了<template/>之外的整个代码引入，相当于是复制到include位置， 示例代码如下。

  //在 index.wxml写
    <!-- index.wxml -->
   <include src=”header.wxml”/>
   <view> body </view>
   <include src=”footer.wxml”/>
  
  

    <!-- header.wxml -->
    <view> header </view>
  

    <!-- footer.wxml -->
    <view> footer </view>