手把手创建你的第一个小程序,一行代码都不写,也能跑起来一个.
前面几篇我们准备好了理论知识和开发工具,今天终于到了实操环节。用微信开发者工具创建一个 HelloWorld 小程序,并成功运行起来。全程不需要写代码,跟着操作就行,大概 5 分钟就能搞定。第一步:登录微信开发者工具
打开安装好的“微信开发者工具”,会弹出一个登录二维码。注意:如果你有注册过微信公众平台的小程序账号,用对应的微信号登录即可。如果没有,用个人微信也能体验大部分功能,不影响今天的学习。第二步:新建项目
登录成功后,点击“新建项目”,会弹出一个配置窗口,需要填写几个信息:项目名称:随便起,比如 (HelloWorld)。目录:选择一个本地文件夹,用来存放代码(建议专门建一个文件夹,比如 wechat-miniprogram)AppID:如果你还没有正式注册小程序,点击“使用测试号”(系统会自动生成一个测试 AppID)后端服务:选择“不使用云服务”(初学者先用基础模式,后面熟悉了再接触云开发)。第三步:自动生成代码
- pages/index/ 目录下的 index.js、index.json、index.wxml、index.wxss — 首页的完整代码
你没有写一行代码,但一个可运行的小程序已经诞生了。第四步:编译运行,查看效果
在模拟器区域找到上方的“普通编译”右侧的刷新按钮,点击一下。界面虽然简单,但它是一个完整、规范、可运行的小程序项目。关于“测试号”的说明
测试号只能在开发者工具里预览和调试,无法在手机上真机体验,也无法上传发布。但它对于初学者来说完全够用了,你可以用它来学习所有的开发技能。等以后你真的要上线一个小程序,再去微信公众平台正式注册就行。运行成功了,然后呢?
在左侧代码区打开 pages/index/index.wxml,把 Hello World 改成其他文字,保存,看模拟器会不会自动刷新熟悉一下界面布局:右侧是模拟器,左侧是代码编辑区,底部是调试器一个重要的心理建设
这个 HelloWorld 虽然简单,但它包含了一个小程序项目的完整结构。接下来的学习,就是在这个骨架的基础上,一点点替换、添加、修改,最终变成你自己的产品。所有复杂的项目,都是从第一个 HelloWorld 开始的。小结
全程没有写代码,但你已经完整跑通了一个小程序项目的创建流程。下一篇,我们来聊聊开发者工具里那些提升效率的隐藏技巧:一键创建页面、自动注册配置、调试器的正确打开方式……让你开发快人一步。你的第一个小程序跑起来了吗?欢迎截图留言分享你的成果~