zoukankan      html  css  js  c++  java
  • 小程序学习二(模板和组件)

    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里面公共的数据

     

  • 相关阅读:
    读《人人都是产品经理》
    前端值得看的博客
    git 常用命令 创建查看删除分支,创建查看删除tag等
    看《如何令选择变得更加容易》
    读【失控】——众愚成智
    html5 postMessage
    下拉滚动加载更多数据
    html select用法总结
    分布式系统事务一致性解决方案
    nginx简易教程
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10057102.html
Copyright © 2011-2022 走看看