微信小程序学习笔记①——安装与测试 [输出Hello World]


✅ 寒假时间好短,好忙…不知道能写好这一系列文章不。毕竟最近才接触前端…头关不破二关难攻,先硬着头皮写吧



微信小程序开发 ?

下一篇文章链接:微信小程序学习笔记②——页面和主体 [ 模拟QQ的tabBar栏 ]


一、下载和安装『微信小程序开发者工具』

● 官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

在这里插入图片描述

说明:笔者推荐选最新的稳定版。


在这里插入图片描述

说明:点击 “下一步”。


在这里插入图片描述

说明:点击 “我接受”。


在这里插入图片描述
说明:选择安装路径后,再点击 “安装”。


在这里插入图片描述
说明:点击 “完成”。



二、新建项目

在这里插入图片描述

说明:一开始打开会有这个界面,我们用『微信』扫一扫它来进行注册。注册的目的是要获得一个『AppID』,有点像一把 ? ,有了它就能进入自己的项目仓库中。当然,现在我们可以不用管它。为了最快的上手实践,点击 “游客模式” 即可。

◆ 注册官网地址:https://mp.weixin.qq.com/


在这里插入图片描述
说明
项目名称:我给自己的项目名称取的是 “My_miniprogram”。
目录:它自己自动生成了。(我们一会创建了也可以到相应文件夹去找到)
AppID:在 游客模式 的话,系统自动给我们生成了。(游客模式的界面和功能和用户模式的是一样的,只不过用户模式有“云开发”,但要学 “云开发” 也是很后面的事了,所以现在用游客模式进行学习是完全OK的。到了要用云开发时,笔者在写用户模式的相关也不迟)
开发模式:选小程序
后端服务:只能选 “不适用云服务”
语言:笔者用的 “JavaScript”


三、输出 Hello World!

在这里插入图片描述

说明:一开始打开这个编辑器,系统会为我们自动创建很多『初始化』文件。因为我们要从最基础的开始学习,所以把红框框里面的所有都删掉。


在这里插入图片描述

说明
① 然后打开 app.json 文件(后面会专门讲 json 文件),将 page{} 里面的内容改成 "pages/MyIndex/index"
② 接着点一下 编译。(这是系统会自动在 pages 文件夹里面给你创建 MyIndex 文件夹,并在该文件夹里面给你初始化前端的三大件,名字都为 index,只是后缀不同)


在这里插入图片描述

说明:然后打开 index.wxml 文件,将里面的内容改为下面这条。最后再点击一下 编译 按钮。

<view>Hello World!</view>

● 当左边实时显示出 Hello World! 时,恭喜你!一切顺利 ~



四、参考附录

[1] 微信小程序开发之一 —— 准备工作

[2]《微信小程序开发指南》

下一篇文章链接:微信小程序学习笔记②——页面和主体 [ 模拟QQ的tabBar栏 ]


⭐️ ⭐️


版权声明:本文为Wang_Dou_Dou_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。