事件与自定义属性

页面跳转、参数传递与接收

• 页面跳转的五种方式

1、wx.navigateTo(obj)
2、wx.redirectTo(obj)
3、wx.swITchTab(obj)
4、wx.navigateBack(obj)
5、wx.reLaunch(obj)

• 页面间参数传递与接收----方法1：url带参数

//发送方：发送参数，url带参数模式发送
<navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}"> 评@H_304_82@19
</navigator>

//接收方：接收参数，通过onLoad生命周期函数中的option参数获取参数
Page({ 
    onLoad: function(options) { 
        VAR duanziId = options.id 
    }
}) 

• 页面间参数传递与接收----方法2：全局参数

//发送方
var appInstance = getApp();
apppInstance.pageParams.xxx = val;

//接收方
apppInstance.pageParams.xxx;

• 页面间参数传递与接收----方法3：缓存

自适应与新单位

新布局：弹性盒模型

• 下列是微信小程序中组件的类型

inline: <text>、<label>
inline-block: <image>、<switch>
block: <view>、<input>、<form>(form改不了display)、<swiper>

• 什么是弹性盒模型？
  Flex 布局语法教程

• 容器属性（display:flex）

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

• 容器内元素属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Template模板引擎

• 模板定义

• 模板使用

1、导入模板wxML文件：<import src="/template/movie-list/movie-list-tpl.wxml"/>
2、导入模板wxss文件：@import "../../template/movie-list/movie-list-tpl.wxss";
3、使用模板：<template is="msgItem" data="{{...item}}"/>
注意：data中...有含义，在模板文件中直接调用item下的属性

• 模板中嵌套模板

<import src="../movie/movie-tpl.wxml" />
<template name="movie-list">
  <view class="movie-list-container">
    <view class="movie-list-head {{colorStyle}}">
      <text>{{title}}</text>
      <view class="more">
        <text>更多</text>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    <view class="movie-list-body">
      <template is="movie" data="{{...movies[0]}}" />
      <template is="movie" data="{{...movies[1]}}" />
      <template is="movie" data="{{...movies[2]}}" />
      <!--<block wx_for="{{movies}}" wx_key="item">
        <template is="movie" data="{{...item}}"/>
      </block>-->
    </view>
  </view>
</template>

数据绑定

• 模板

<template is="stars" data="{{stars:stars,score:average}}"/>
<template is="movie" data="{{...movie}}" />
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"/>

• 页面JS

this.setData({});

• 注意事项

如果是在异步方法调用时才进行数据绑定，由于时机不可控必须在页面的data:{}中先定义数据，否则出错

数据缓存

• 限制：每个小程序上限10M

• 特点：永久存储/同步与异步2种方式/不建议将关键信息存储

页面与APP生命周期

路径问题

• 绝对路径（推荐）

<image src="/images/1.jpg"></image>

• 相对路径（相对当前文件所在位置）

var util = require('../../utils/util.js');

配置

• 全局配置（app.json）

可配置五项：pages/window/tabBar/networkTimeout/debug

• 局部配置（每个页面对应的json文件）

只可配置一项：window

引用

• 引用wxml文件

1、import   <import src="a.wxml"/>
2、include  <include src="header.wxml"/>

• 引用wxss文件

@import "common.wxss";   //支持相对路径

• 引用js文件

1、var common = require('common.js');   //require暂时只支持相对路径
2、import {Person} From "./person.js";  //es6提供的加载模块功能

下拉刷新、上拉加载

• 实现方法2种
  1、使用组件 <scroll-view>
  2、使用Page中的onPullDownRefresh()与onReachBottom()回调方法【推荐】

• 方法2

##前期准备
在配置文件JSON中，必须开启 "enablePullDownRefresh": true

##分别实现2个回调方法
onPullDownRefresh()与onReachBottom()

Q&amp;A

• this.data.xxx与this.setData()的区别

动态新增/修改数据绑定：
this.data.xxx  已经不能使用
只能使用 this.setData()

• 异步与同步的区别

异步中的代码无法确定执行时机，而同步可以
1、异步代码易读性差
2、异步难调试
3、异步不阻塞
4、异步控制执行时机差，很难控制
5、同步会阻塞（推荐同步，异步要根据业务来决定）

• 异步调用如何获取数据

注意：异步调用方式不能使用同步获取数据，否则获取不到

解决方案：使用回调函数来获取变量
Page({
    getBannerDate:function(id,callBack){
        wx.require({
            url:"",
            success:callBack
        });
    },
    callBack: function(res){
    
    }
});

##ES6提供了一种简化方式（箭头函数），无须定义多个回调函数
Page({
    getBannerDate:function(id,(res)=>{
        
    }){
        wx.require({
            url:"",
            success:callBack
        });
    }
});

• 如何动态设置导航栏标题

##必须在onReady生命周期方法中调用wx.setNavigationBarTitle()方法

wx.setNavigationBarTitle({
  title: "当前页面"
});