微信小程序学习记录——1.初识小程序

女爷i 2023-06-13 06:12 13阅读 0赞

### 文章目录 ###

*  1.前言
 *  2.开发工具介绍
 *   *  开发工具下载
     *  创建第一个项目
     *  开发工具介绍
 *  3.小程序相关简介
 *   *  获取微信小程序的AppID
     *  小程序目录架构
     *  小程序页面结构

# 1.前言 #

对于从未接触过任何编程语言，没有任何编程基础和知识背景的学员来说，现在着手学习微信小程序会遇到不少困难。

为了使你能顺畅的学习微信小程序与前端语言的交叉知识，请先学习以下课程：

*  HTML
 *  CSS
 *  JavaScript
 *  Ajax
 *  Json

初步了解了上述课程的基本知识后，再开启微信小程序的知识点学习和项目实操会使你更加得心应手

# 2.开发工具介绍 #

## 开发工具下载 ##

为了帮助开发者简单高效地开发和调试微信小程序，微信在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

*  使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK
 *  使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

小程序开发工具下载地址，APP端用户建议在WEB端打开：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

选择对应操作系统的版本，下载完成后一直点击下一步即可完成安装。

## 创建第一个项目 ##

第一步： 开发者工具安装完成后，开发者可以通过微信扫码登录并使用开发工具。（该二维码仅供参考，请按教程打开自己的开发者工具生成对应二维码）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]

第二步：登录后选择对应的开发模式，这里选择在“小程序”中创建项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]

第三步：在创建项目之前，先申请一个AppID，申请网页为：https://mp.weixin.qq.com/wxopen/waregister?action=step1，也可以不申请，申请界面如下。填写相应信息后，会收到验证邮件，之后可以参考这篇文章：https://jingyan.baidu.com/article/eb9f7b6d559698869364e8b4.html，来获取AppID：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]

第四步： 选择“**新建项目**”，填入申请到的 **AppID**（如果没有AppID也可以选择无AppID的选项，但是会被限制部分功能） ，设置一个本地项目的名称（**非小程序名称**），比如“myTest”，并选择一个本地的文件夹作为代码存储的目录，点击“添加项目”就可以了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]

> 小程序涉及的语法与HTML、CSS、JS有一些相似。特别是CSS，所以在学习小程序的同时建议可以也学习一下其他几门语言哦

## 开发工具介绍 ##

创建项目后会进入项目开发界面。开发工具提供了小程序的开发、调试和代码提交等功能。

从上到下，从左到右依次是菜单栏、工具栏、模拟器、编辑器（调试器需要在工具栏中选择调试模式后才会展现并覆盖编辑器）。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]

> 仔细对比不难发现，开发工具的界面与WEB页面制作很相似。

# 3.小程序相关简介 #

## 获取微信小程序的AppID ##

登录 [https://mp.weixin.qq.com][https_mp.weixin.qq.com] ，就可以在网站的“**设置**”-“**开发者设置**”中，查看到微信小程序的 AppID 了，注意不可直接使用**服务号**或**订阅号**的 AppID 。

![img][]

> **注意**：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序，那么我们还需要操作“**绑定开发者**”。即在“**用户身份**”-“**开发者**”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

## 小程序目录架构 ##

点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，它已经初始化，并包含了一些简单的代码文件。

以下的三个文件非常重要，微信小程序会读取这些文件，并生成小程序实例。

*  app.js - .js后缀的是脚本文件
 *  app.json - .json后缀的文件是配置文件
 *  app.wxss - .wxss后缀的是样式表文件

我们简单了解一下这三个文件的功能，方便修改和从头学习开发自己的微信小程序。

*  **app.js**是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 [API 文档][API]。
 *  **app.json** 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件**不可添加任何注释**。更多可配置项可参考[配置详解][Link 1]。
 *  **app.wxss** 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

## 小程序页面结构 ##

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.**js**、index.**wxml**、index.**wxss**、index.**json**。

![img][img 1]

> **注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111415472757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191114154740953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191114154752139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019111415481258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191114154836800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200522152638965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudzNjc2Nob29sLmNuL2F0dGFjaG1lbnRzL2RheV8xNjA5MjkvMjAxNjA5MjkxMDUyNTQ2MTUzLnBuZw?x-oss-process=image/format,png
[API]: https://www.w3cschool.cn/weixinapp/hpm41q8p.html
[Link 1]: https://www.w3cschool.cn/weixinapp/hw9k1q8m.html
[img 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cudzNjc2Nob29sLmNuL2F0dGFjaG1lbnRzL2ltYWdlLzIwMTgwMjA4LzE1MTgwODI2NDkxNzIxMTAucG5n?x-oss-process=image/format,png