小程序学习二（模板和组件）

1：轮播图组件

<swiper indicator-dots='true' indicator-color='deepPink'>

 

2：模板定义和使用（定义，传值）

定义模板： name=‘模板名字’

<template name='listTemplate'>

 

使用模板：<importsrc="./detail_template/detail_item_template.wxml" />

3：数据存储

（1）缓存

wx.setStorage({ //存数据

      key: 'isCollected',

      data: oldCollectFlag

    })

let oldCollectFlag = wx.getStorageSync('isCollected');//获取数据

 

（2）全局存储

App({

 data: { //app.js

   isPlay: false,

    playPageIndex: null,

    movies: {}

  }

})

let app = getApp();

app.data.isPlay = false; //获取数据

 

4：交互，传值

(1)     data-’传递数据key’ = value

<image data-detailId='{{4}}' src='/images/detail/carousel/01.jpg'></image>

//可以在页面跳转的 onload options里面获取传递的数据

toDetail(event) {

    console.log(event);

    //点击页面的下标

    let id = event.currentTarget.dataset.id; //获取data-key的数值可以传值给跳转的页面

    wx.navigateTo({

      url: '/pages/detail/detail?id=' + id

    })

  },

 

（2）数据交互（发送请求获取数据）

wx.request({ // 发送请求

  url: API_URL, // 请求的url

  header: { // 设置请求头

    'Content-type': 'json',

  },

  success: (res) => {  // 请求成功的回调函数

    // 隐藏提示加载信息

    wx.hideToast();

    console.log(res);  // 请求的成功的数据对象，注意是封装后的对象

    this.setData({movies: res.data.subjects})

  }

})

不同页面的通信：APP里面公共的数据