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

讲师: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页面中将数据展示出来

小程序项目实战(一)相关推荐

微信小程序项目实战之天气预报
概述微信小程序项目实战之天气预报详细代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
微信小程序项目实战之豆瓣天气
概述微信小程序项目实战之豆瓣天气详细代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
微信小程序项目实战：快递查询-李宁-专题视频课程
微信小程序项目实战:快递查询-1303人已学习课程介绍本课程主要介绍了scrollview布局,以及如何通过第三方API获取并处理数据. 课程收益本课程主要介绍了如何实现 ...
微信小程序项目实战：电影购票系统-李宁-专题视频课程
微信小程序项目实战:电影购票系统-1644人已学习课程介绍本课程主要介绍了scrollview布局,导航.从服务端获取数据,以及处理数据的方法. 课程收益本课程的目标是让 ...
视频教程-微信小程序项目实战之我画你猜视频课程-微信开发
微信小程序项目实战之我画你猜视频课程精通PHP软件开发和WEB前端开发技术,熟悉PHP.Java.Javascript.HTML等语言,熟悉HTTP协议及W3C相关互联网规范,曾在山西某知名公司担任 ...
手把手带你学习微信小程序 —— 项目实战篇
微信小程序项目实战篇 WeChat-applet 1.支付宝界面展示 2.微博发帖功能实现 3.时间格式化案例 4.微信红包界面展示 5.微信消息删除案例 6.微信icon 组件 6.1 支付成功界面 ...
攀哥の茶–奶茶小程序项目实战说明
攀哥の茶–奶茶小程序项目实战说明实战目的巩固之前所学的vue2 +uniapp +小程序学会独立思考与解决问题学会团队协作与相关工具git等的使用项目介绍奶茶店点单小程序程序主 ...
视频教程-微信小程序项目实战：电影购票系统-微信开发
微信小程序项目实战:电影购票系统东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过100 ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...

小程序项目实战(一)