小程序项目实战(一)

项目名称:音乐小程序项目

讲师:coderwhy

  学习链接:小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介https://ke.qq.com/course/4162214

  此博客用来总结自己学习小程序开发的知识点,有兴趣的小伙伴可以去上面链接进行学习。 

 一、小程序的背景

   1.各个平台小程序的发布时间:

   2.传统App要更新需要先打包再上架到应用商场，这个过程需要审核，时间周期长。而小程序可以在App不更新的情况下,动态地给自己的应用添加新的功能需求(可以绕过审核的步骤 )

    3.原生微信小程序开发主要技术包括:

        WXML、WXSS、JavaScript(此项目主要用原生小程序开发)

   4.由于小程序的技术特点跟前端很相似,所有小程序的开发现在也是由前端开发工程师的工作内容之一。

   5.开发小程序可以使用以下的框架,但本项目使用原生开发。

     6.小程序的核心技术:WXML、WXSS、JavaScript + WXS

 二、开发小程序的准备工作

  1.注册账号-申请AppId 

        先申请小程序再登录打开开发设置后可以查看自己的AppId

https://mp.weixin.qq.comhttps://mp.weixin.qq.com/

 

 

   2.开发工具的选择

  1.安装开发者工具

稳定版 Stable Build | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 

   如果选择VSCode开发可以安装下面插件

三、开发初体验

   1.创建项目

   2.项目的目录结构

   3.项目起始页面

   4.简单的demo编程

        Page/index 下面的index.js：存放数据和方法

        修改data中的数据时需要使用Page对象中的setData方法来修改

         index.wxml：页面布局

        index.wxss：编写css样式

 

四、项目开始

  1.底部导航栏的开发

   底部导航栏可以直接使用小程序文档的全局配置

   在项目中的index.json文件中配置tabBar的相关信息

   pagePath:tabbar对应的跳转页面

   text:tabbar list的名字               iconPath：显示的图标            selectedIconPath:选中时的图标

   开发时的目录结构 : home-music和home-view都是在pages中的俩个页面

   效果图:

2.封装网络请求的方法

  请求的相关api在小程序官方文档中

  普通的请求方法：onload是page对象声明周期创建时调用的方法 

    第一层封装:

   第二层封装: 

    将请求的数据存放到data的topMVs中

 

    在WXML页面中将数据展示出来