微信小程序开发入门教程-Toy模板网

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

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

一、微信小程序介绍

1.什么是小程序？

2017年度百度百科十大热词之一
微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程 )
限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

2.小程序可以干什么？

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

前期准备：

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

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

微信小程序开发文档：

https://developers.weixin.qq.com/miniprogram/dev/index.html

二、注册微信小程序

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

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

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

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

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

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

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

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

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

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

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

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

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

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

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

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

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

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

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

三、你的第一个微信小程序

第一次进入微信开发者工具是需要扫码的，再微信扫码确认登陆过后就可以创建项目了

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

这里微信小程序开发之所以成本低，还有一个原因是它把模板都给我们提供了，我们只需要提供数据即可完成一个零基础的手机端电商项目。

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

我们选择一个看看效果：

微信小程序开发入门教程,微信小程序开发实战,微信小程序,小程序

至此，我们的第一个微信小程序就做好了！！

四、微信小程序目录结构

1、pages目录

这个目录下放的其实就是一个个的微信端的页面了其中的index文件夹、logs文件夹其实都是单独的页面；

再以index文件夹举例说——下属4个不同后缀文件：

（1）js：就是页面内的js文件，页面中的变量、监听事件全都在这里；

（2）json：页面的配置文件，其实就类似后端的配置文件，就看成 properties或者xml就好

（3）wxml：页面的结构文件，查看可以发现就是各种标签组成的结构块；

（4）wxss：页面的样式文件，看着里面都是选择器。

2、utils目录

这里面存的都是一些公用的js，就当作web后端项目的工具类就好啦，提供公共方法减少冗余和维护难度的；

3、app.js文件

整个微信小程序相关的全局js，这里有监听整个小程序的生命周期函数和全局变量；

4、app.json文件

是对整个小程序的静态全局配置，我们可以在这个文件中配置小程序是由哪些页面组成（路由），配置小程序的窗口背景色、配置导航条样式，配置默认标题，可以配置整个项目的样式，超时时间，加载的插件等等；(注意该文件不可添加任何注释)；

5、app.wxss文件

整个小程序的样式文件，我个人认为这个文件就是设置整个项目的css文件。针对每个页面的css文件的内容不同，加载到对应页面的css样式时，当前页面的wxss文件会覆盖app.wxss文件（估计跟普通的css样式的覆盖规则类似）。

6、project.config.json文件

这个其实是每个开发者工具生成的项目都有的，但和项目内容实际没有特别大关联，主要是记录相关工具的配置的，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。