微信小程序开发教程介绍
2019-04-19

2017年张小龙在微信公开课上发布的小程序正式上线，经过一两年的发展，相信大家对于微信小程序并不陌生了吧，微信小程序可谓是异常火爆，同时微信小程序在不断的升级更新新的功能，那么接下来就来教大家如何进行微信小程序开发。

1、注册微信小程序账号

这个直接进入微信小程序官网自行注册即可

2、获取APPID

APPID在哪里获取呢，根据第一步注册的小程序帐号，然后登陆上，找到左侧“设置”，“开发设置”，就看到APPID啦，把APPID复制下来，留作备用。

3、绑定开发者

如果在第一步注册小程序帐号的时候，你不是管理员，那么这个时候，还需要绑定个开发者，直接登录小程序后台，点左侧“用户身份”-点右侧“编辑”添加成员，出现个二维码，管理员扫描二维码后，然后输入开发者微信号，勾选权限，确定，就可以了。

3、安装开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》。打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

4、安装完成之后

你的第一个小程序开启：新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的AppID，给你的项目起一个好听的名字，最后，勾选"创建QuickStart项目"(注意:你要选择一个空的目录才会有这个选项)，点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在IDE预览你的第一个小程序。

5、编译预览

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。OK，你已经成功创建了你的第一个小程序，并且在微信客户端上体验到它流畅的表现。

6、小程序初始化目录介绍：

1、page页面文件夹存放项目页面渲染相关文件

2、utils存放js库和数字格式化文件

3、配置文件

7、创建小程序页面：

1）在pages中添加一个目录

选中page,右击鼠标，从硬盘打开，打开硬盘文件之后，新建一个文件夹test（或者点击+号，逐个添加目录，添加目录下面所需要的文件）

2）新建一个wxml文件

在test文件夹底下新建一个wxml空文件

3）编辑test.wxml文件

为了方便测试我们随便填写点内容进去

4）同样的方法，创建test.js文件，编辑test.js文件

在test文件夹底下新建一个js空文件

使用上述同样的方法在test目录下创建一个test.js文件，为了方便测试我们随便填写点内容进去(也可以不填，直接空文件也可)

5）将test页面加入app.json

打开全局文件app.json，在文件里面添加"pages/test/test"（加入一条test页面所在的目录）

6）在首页加入跳转访问链接

一切准备就绪，该添加的都已经添加，下面就是见证奇迹的时刻，在首页写一个页面入口，跳转到我们要测试的页面上，直接在首页pages/index/index.wxml添加一段代码一句链接

7）测试

保存代码，点击上面的编译按钮，所有代码运行起来，点击首页的“跳转到test页面”，跳转成功。

8）设置页面标题

设置页面标题，是非常简单的一个步骤哦，找到所在页面的目录，新建一个json文件（一般都是自动生成的，如果没有就新建一个），比如我们上一次建造的test页面，找到pages/test/目录新建一个test.json文件。

8、手机预览

开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。

9、上传小程序代码

开发者工具左侧菜单栏选择"项目"，点击"上传"即可将代码上传到微信小程序服务器。

10、提交微信审核及小程序发布

步骤9上传好小程序代码后，提交微信进行审核。审核现在也很快，一把几个小时就审核过了，慢的话估计2-5天吧，等审核通过后，就可以在小程序后台，进行发布上线了。

（编辑：柠檬味）