微信小程序入门及开发教程

目录

前言

一、小程序简介

1.什么是小程序？

2.小程序可以干什么？

二、注册微信小程序

三、安装开发工具并创建微信小程序

 四、微信小程序目录结构

---

前言

        随着移动互联网的发展，小程序成为了一种流行的应用形式。小程序是一种轻量级应用，能够在无需下载安装的情况下直接在手机上使用。如果你对开发小程序感兴趣，那么本篇博客将为你介绍小程序的入门知识。

一、小程序简介

1.什么是小程序？

1. 2017年度百度百科十大热词之一

2. 微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )

3. 限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

5. 官网：微信公众平台

2.小程序可以干什么？

1. 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用

2. 通过扫一扫或者在微信搜索即可下载

3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

4. 连接线上线下

5. 开发门槛低， 成本低

二、注册微信小程序

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。

如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

微信小程序的正式号和测试号有以下几点区别：

使用限制：测试号只能用于在开发测试阶段使用，而正式号则可以发布上线供用户使用。

功能限制：测试号的功能相对比较受限，如不支持微信支付、部分接口调用等功能，而正式号可以尽可能地满足开发者的需求。

可操作性差异：测试号的操作相对更容易，无需经过严格的审核流程和申请手续，而正式号需要经过微信官方的审核才能上线使用。

用户量限制：测试号的用户数有一定的限制，而正式号没有限制，可以随时增加用户量。

        通过测试号可以帮助开发者快速验证小程序的基本功能，调试问题，优化用户体验。当开发完成后可以申请正式号，并经过微信官方的审核上线，让更多的用户使用和体验小程序提供的服务。

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

注册提交信息即可

这样就成功啦 

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败，也可以从微信公众平台上手动登录。填写小程序的基本信息，包括名称、图标、描述等。提交成功之后，再添加开发者。开发者默认为管理员，我们也可以从这里新增绑定开发者，这是管理员才有权限的操作。

然后在左侧导航栏点击 “设置”，找到开发设置，获得小程序的 AppID。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

测试号申请地址：微信公众平台 (qq.com)

三、安装开发工具并创建微信小程序

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

接下来我们直接傻瓜式安装就可以了，桌面上会有这样一个图标

打开后我们直接微信扫码登录

创建项目

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

在模板选择处，我们随便选择了一个电商的模板，接下来点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

通过这个章节，你已经成功创建了你的第一个小程序，并且在微信客户端上体验到它流畅的表现。

 四、微信小程序目录结构

1. 根目录： 根目录下主要包含 app.js、app.json、app.wxss 三个文件以及 project.config.json 配置文件等。其中：

   • app.js 为小程序的全局js文件，用于定义小程序实例的全局变量和函数。
   • app.json 为小程序的全局配置文件，用于定义小程序的启动行为、页面路径、导航栏、底部标签栏等。
   • app.wxss 为小程序的全局样式文件，用于定义小程序各个页面公共的样式。
   • project.config.json 为小程序项目的配置文件，用于定义小程序的基本信息、开发者信息、上传代码时的设置等。

2. 页面目录： 页面目录下主要包含一个 js 文件、一个 wxml 文件、一个 wxss 文件和一个 json 配置文件等。其中：

   • js 文件为页面逻辑文件，用于定义页面的事件处理函数和数据处理逻辑。
   • wxml 文件为小程序页面的结构文件，类似于 HTML 文件。
   • wxss 文件为小程序页面的样式文件，用于定义页面的样式。
   • json 文件为小程序页面的配置文件，用于定义页面的标题栏、导航栏、背景色等。

微信小程序开发使用可参考微信官方文档 使用