目录

  • 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 第六课时
创建自己的第一个微信小程序HelloWorld

本课项目:本节课大家将创建自己的第一个微信小程序HelloWorld

任务效果:

            

为了完成这个任务,请同学们学习以下知识点,并完成练习


1创建项目

注册账号

https://mp.weixin.qq.com/ 点击立即注册,选小程序进行注册。建议使用全新的邮箱,没有注册过其他小程序或者公众号的。

 由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的APPID ,所以在注册成功后,可登录,然后获取APPID。登录,成功后可看到如下界⾯,然后复制你的APPID,悄悄的保存起来,不要给别⼈看到。

 

 

在开发工具里单击小程序图标,进入小程序“新建项目”界面,可以添加一个新的项目。在这个界面里需要填写项目名称、目录、AppID,如图所示。选择不使用云服务



2、认识开发者工具界面

创建项目后,进入微信开发者工具界面。如图所示。开发者工具界面大致可以分为6个区域:1菜单栏区域;2模拟器、编辑器、调试器显示与隐藏区域;3模拟器区域;4编辑器区域;5工具栏区域;6调试器区域。   


  开发者工具各部分作用


编辑器区域分为两部分:一部分用来展示项目文件目录和文件结构,另一部分用来进行代码编辑,点击左边文件部分,观察右边代码部分,结合之前学过的网页前端知识,完成探究练习1,谈一谈你的看法。


探究练习1这三个文件的作用是什么,谈一谈你的看法

     

调试器区域:小程序的常用调试工具有ConsoleSourcesNetworkStorageAppDataWxml其中Console”窗口,主要用来显示小程序的错误输出信息和调试代码,除了可以输出错误信息,还可以进行代码编写和调试,如图所示。

请大家点开AppData”窗口,探讨以下这个窗口的作用,谈一谈你的想法

 

任务实践

请大家建立自己的第一个微信小程序,显示“你好,微信小程序”,并自由修改字体的样式进行呈现。