1.前言
对于从未接触过任何编程语言,没有任何编程基础和知识背景的学员来说,现在着手学习微信小程序会遇到不少困难。
为了使你能顺畅的学习微信小程序与前端语言的交叉知识,请先学习以下课程:
- HTML
- CSS
- JavaScript
- Ajax
- Json
初步了解了上述课程的基本知识后,再开启微信小程序的知识点学习和项目实操会使你更加得心应手
2.开发工具介绍
开发工具下载
为了帮助开发者简单高效地开发和调试微信小程序,微信在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。
- 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK
- 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
小程序开发工具下载地址,APP端用户建议在WEB端打开:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择对应操作系统的版本,下载完成后一直点击下一步即可完成安装。
创建第一个项目
第一步: 开发者工具安装完成后,开发者可以通过微信扫码登录并使用开发工具。(该二维码仅供参考,请按教程打开自己的开发者工具生成对应二维码)
第二步:登录后选择对应的开发模式,这里选择在“小程序”中创建项目
第三步:在创建项目之前,先申请一个AppID,申请网页为:https://mp.weixin.qq.com/wxopen/waregister?action=step1,也可以不申请,申请界面如下。填写相应信息后,会收到验证邮件,之后可以参考这篇文章:https://jingyan.baidu.com/article/eb9f7b6d559698869364e8b4.html,来获取AppID:
第四步: 选择“新建项目”,填入申请到的 AppID(如果没有AppID也可以选择无AppID的选项,但是会被限制部分功能) ,设置一个本地项目的名称(非小程序名称),比如“myTest”,并选择一个本地的文件夹作为代码存储的目录,点击“添加项目”就可以了。
小程序涉及的语法与HTML、CSS、JS有一些相似。特别是CSS,所以在学习小程序的同时建议可以也学习一下其他几门语言哦
开发工具介绍
创建项目后会进入项目开发界面。开发工具提供了小程序的开发、调试和代码提交等功能。
从上到下,从左到右依次是菜单栏、工具栏、模拟器、编辑器(调试器需要在工具栏中选择调试模式后才会展现并覆盖编辑器)。
仔细对比不难发现,开发工具的界面与WEB页面制作很相似。
3.小程序相关简介
获取微信小程序的AppID
登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。
注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
小程序目录架构
点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,它已经初始化,并包含了一些简单的代码文件。
以下的三个文件非常重要,微信小程序会读取这些文件,并生成小程序实例。
- app.js - .js后缀的是脚本文件
- app.json - .json后缀的文件是配置文件
- app.wxss - .wxss后缀的是样式表文件
我们简单了解一下这三个文件的功能,方便修改和从头学习开发自己的微信小程序。
- app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档。
- app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解。
- app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
小程序页面结构
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。