小程序入门——详细教程-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序入门——详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序入门——详细教程,小程序

🎬 艳艳耶✌️：个人主页

🔥 个人专栏：《Spring与Mybatis集成整合》《Vue.js使用》

⛺️ 生活的理想，为了不断更新自己 !

小程序入门——详细教程,小程序

1.微信小程序入门

1.1什么是小程序？

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

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

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

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

1.2小程序可以干什么？

同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
通过扫一扫或者在微信搜索即可下载
用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
连接线上线下
开发门槛低，成本低

前期准备：

微信开发者工具下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小程序开发文档：

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/index.html

2.注册微信小程序

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

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

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

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

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

使用限制：测试号只能用于在开发测试阶段使用，而正式号则可以发布上线供用户使用。
功能限制：测试号的功能相对比较受限，如不支持微信支付、部分接口调用等功能，而正式号可以尽可能地满足开发者的需求。
可操作性差异：测试号的操作相对更容易，无需经过严格的审核流程和申请手续，而正式号需要经过微信官方的审核才能上线使用。
用户量限制：测试号的用户数有一定的限制，而正式号没有限制，可以随时增加用户量。

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

小程序入门——详细教程,小程序

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

小程序入门——详细教程,小程序

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

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

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

3.安装微信开发者工具

3.1下载微信开发者工具

可以在微信开放文档中选择对应版本，然后下载对应的安装包

小程序入门——详细教程,小程序

3.2登录微信开发者工具

首次启动开发者工具，则需要微信账号扫码登录

登录微信开发者工具

小程序入门——详细教程,小程序

4.第一个小程序的创建

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

5.目录结构介绍

js文件：页面脚本文件，存放页面数据、事件处理函数等。——处理用户操作

app.js文件：整个项目的入口文件，通过调用App（）函数启动项目。
页面.js文件：页面入口文件，调用Page（）函数，创建并运行页面。
普通.js文件：普通功能模块文件，用来封装公共的函数或属性供页面使用

json文件：当前页面配置文件，配置窗口的外观、表现等。
wxml文件：页面的模板结构文件。（WXML模板类网页HTML）
wxss文件：当前页面的样式表文件。（WXSS：一套样式语言，用于描述WXML局部或全局的组件样式，类网页CSS）

小程序入门——详细教程,小程序

整个项目的目录结构分析

pages：【文件夹】存放所有小程序的页面

index文件—首页文件

logs文件—日志文件

utils：【文件夹】用来存放工具性质模块[如：格式化时间的自定义模块]

app.js:项目入口文件

app.json:项目全局配置文件

pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]

window——全局定义所有页面样式

style——全局定义小程序组件所使用的样本

sitemapLocation——指明sitemap.json的位置