目录

  • 1 第一单元
    • 1.1 认识微信小程序
    • 1.2 创建自己的第一个微信小程序HelloWorld
    • 1.3 制作“猫眼电影”底部导航和窗口属性
    • 1.4 天气微信小程序
    • 1.5 for循环使用-轮播图的渲染
  • 2 第二单元
    • 2.1 事件的绑定-界面的纵向滚动
    • 2.2 表单登录注册微信小程序
    • 2.3 绑定网络数据-商城轮播图和导航栏制作
    • 2.4 自定义控件-列表制作
    • 2.5 综合任务制作-糗事百科
    • 2.6 必备的微信小程序API1
    • 2.7 必备的微信小程序API 2
  • 3 第三单元
    • 3.1 必备的微信小程序API 3
    • 3.2 聊天系统制作
    • 3.3 文件的上传与下载
    • 3.4 第五课时
    • 3.5 第六课时
  • 4 “五四”青年节主题音乐微信小程序
    • 4.1 需求分析
    • 4.2 标签切换功能的制作
    • 4.3 音乐导览
    • 4.4 音乐列表实训指导书---请求网络数据
    • 4.5 请求网络数据
    • 4.6 音乐列表-制作自定义列表样式
    • 4.7 完成音乐列表的传值
    • 4.8 音乐播放
    • 4.9 项目验收
  • 5 记账本小程序
    • 5.1 需求分析与准备工作
    • 5.2 账户列表的制作
    • 5.3 数据库
    • 5.4 第四课时
    • 5.5 第五课时
    • 5.6 第六课时
音乐导览
  • 1 课中
  • 2 参考代码


课题音乐导览课时安排22
需求描述

本任务要完成“五四”青年节微信小程序的轮播图和导航功能



知识点json数组、json对象数组、wx:for
知识准备备注
合作探究

学习JSON数组的定义和json对象数组的定义,完成随堂测试


json数组定义格式


数组名:[元素1,元素2,元素3]


json对象数组定义格式

定义对象数组

array:[

      {dataid:'123',srcid:'苹果'},

      {dataid:'456',srcid:'华为'},

      {dataid:'789',srcid:'小米'}

    ],






小试牛刀


在js文件的pages中定义数组arr1['苹果','华为','小米'],在wxml中用wx:for循环进行渲染,显示的结果如下图。效果如下,请将代码截图


其他

任务制作
大展身手

小组分工和任务分析:




任务提交