目录

前端-微信小程序开发第一步

前端 | 微信小程序开发第一步

原创文章,转载请注明:转载自技术哥

技术哥

给你不一样的世界


http://p3.pstatp.com/large/pgc-image/1526130486825be7df0ec79

技术哥已经在上两期向大家具体介绍过微信小程序了,有的朋友已经蠢蠢欲动想自己动手开始了吧。那这次技术哥先手把手带大家开发第一个属于自己的微信小程序。


一、注册微信小程序个人账号

1.首先是先在微信公众平台上注册并拿到属于自己的AppID,然后进入微信公众平台:

http://p3.pstatp.com/large/pgc-image/1526130487019b06f5e8e15

2.选择小程序:

http://p1.pstatp.com/large/pgc-image/1526130487109e5fe7f857c

3.在相应的位置填入对应的信息,填写完整后点击“继续”:

每个账号仅可申请一个小程序

填入的邮箱将成为微信公众平台登录小程序时候的账号,所填的密码可设新密码,与邮箱账号相独立。

http://p1.pstatp.com/large/pgc-image/1526130487213f20fc29b1a

4.开始邮箱激活步骤:登陆邮箱,在收件箱中找到题为:“请激活你的微信小程序”的邮件并打开,点击邮件中的链接即可激活账号:

http://p3.pstatp.com/large/pgc-image/1526130487295da0988ba7c

http://p3.pstatp.com/large/pgc-image/152613048747116d5b4f7b3

5.点击链接后,将会跳转回微信公众平台,显示如下界面,则邮箱激活成功。然后开始填写信息登记:

http://p3.pstatp.com/large/pgc-image/152613048756684bdcc547d

一般我们选择为个人开发者即可进行基本开发,如有其他需要可再查询其他类型开发者后进行选择;

http://p3.pstatp.com/large/pgc-image/152613048769535442a92ef

6.填写完基本信息后验证管理员身份,显示如下界面,表示注册成功

http://p1.pstatp.com/large/pgc-image/1526130487790dde55ef627

7.跳转微信公众平台/小程序的首页,完善自己的个人信息,注册就完成了

http://p3.pstatp.com/large/pgc-image/1526130488117266f7fefb0


二、下载微信小程序开发工具:

注册好账号之后就可以在开发者工具中进行自己的小程序开发和调试了。

1.那我们回到微信公众平台首页,点击小程序,找到

http://p1.pstatp.com/large/pgc-image/1526130488311652b6ab78f

2.进入开发者工具后,跳转到如下界面:

http://p3.pstatp.com/large/pgc-image/15261304883837478a0cda9

3.在左边菜单中找到“下载”,根据自己的系统选择所需要的版本,点击开始下载:

http://p3.pstatp.com/large/pgc-image/1526130488541998badd364

4.下载安装后,点击图标,用注册时的管理员微信账号扫码登陆

(下文以Mac版本为例,Windows版本相差不多,功能相同)

http://p1.pstatp.com/large/pgc-image/15261304889278cebc28f15

5.进入开发者工具模式选择,点击“小程序项目”

http://p3.pstatp.com/large/pgc-image/15261304890696a525c2b9c

6.进入微信小程序,点击右下角的加号创建新项目:

http://p3.pstatp.com/large/pgc-image/1526130489189c93a1c694d

7.开始创建项目:

http://p3.pstatp.com/large/pgc-image/1526130489300816252cd75

(1)项目目录创建需选择项目应存放的目录。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。

(2)AppID获得方式:

回到微信公众平台/小程序的首页,在左侧菜单最下方,找到“设置”-“开发设置”,出现下面界面,将AppID复制到输入框中:

http://p3.pstatp.com/large/pgc-image/1526130489385c5d16eef70

(3)输入项目名称,中英文皆可;

(4)在“建立普通快速启动模板”处的勾上;

(5)点击“确认”;

8.点击“确认”后,出现下面界面,则并表示项目创建成功:

http://p3.pstatp.com/large/pgc-image/152613048950628a00d7b5c

9.点击上栏的“预览”,用微信扫一扫:

http://p3.pstatp.com/large/pgc-image/1526130489599c73dff5ebe

10.扫码后,将会跳到我们的第一个微信小程序,我们的第一个微信小程序就这样完成啦:

http://p1.pstatp.com/large/pgc-image/15261304898253fe86958da


下一期的微信小程序教程会开始教大家熟悉代码并走上敲代码的道路,敬请期待哦。大家如果觉得意犹未尽,大可以翻阅微信小程序的文档进行自主学习,创造更多的可能。

留给大家个小问题,如果需要修改上图中的“Hello World”变为其他文字,可以怎么做呢?答案下期揭晓;)


往期回顾


微信搜索“技术哥”,关注“技术哥”的微信公众号查看更多技术文章。