微信小程序之 Hello World!

最新推荐文章于 2024-07-26 02:22:56 发布

初学者-Study

最新推荐文章于 2024-07-26 02:22:56 发布

阅读量4k

点赞数 8

分类专栏：微信小程序文章标签：微信小程序微信开发者工具安装 HelloWorld

初学者-study

本文链接：https://blog.csdn.net/qq_38436214/article/details/117216422

版权

微信小程序专栏收录该内容

2 篇文章 3 订阅

订阅专栏

本文详细介绍了微信小程序的开发流程，从注册微信开发者账号，下载并安装开发工具，创建首个小程序项目，到理解项目结构，包括app.js、app.json、app.wxss等核心文件的作用。此外，还涵盖了测试号和正式号AppID的获取，以及项目在模拟器和真机上的运行调试。适合初学者入门。

摘要由CSDN通过智能技术生成

前言

在做微信小程序之前，最好要有一些JavaScript和Html、css的基础，不过没有也没关系，学习中慢慢了解也可以，只不过你需要花费的时间就多一些。

正文

微信小程序的开发常规是使用微信开放平台提供的工具，因此本文会从账号注册到工具安装，再到项目运行，这种方式进行讲解。开始吧！

一、微信开发者注册

点击微信公众平台进入。
在这里插入图片描述

直接用你手机上的微信扫描这个二维码进行登录，这里的账号类型有三个，服务号、订阅号、小程序。

扫码之后，你的手机上就会显示之前创建的微信公众平台上创建过公众号或者小程序。如果你都没有创建的话，就直接登录。

然后进行开发工具的下载。

二、开发工具下载

点击开发者工具下载
在这里插入图片描述
我这里就下载这个稳定版

下载的是一个exe可执行文件，下载后双击进行安装

三、工具安装

在这里插入图片描述
下一步

在这里插入图片描述
我接受

更换一下安装的路径

安装过程中，等待。

完成，运行这个工具。

三、创建项目

在这里插入图片描述
用自己的手机微信扫描登录一下：

在这里插入图片描述
登录之后你会在左下方看到自己的微信头像，下面来创建一个小程序吧，点击右边的这个加号。

在这里插入图片描述

这里我修改了项目的名称和存放目录，然后是这个AppID，这里有正式和测试的区别，先来看一下正式号AppID怎么获取

1. 获取正式号AppID

这里可以手动去注册一个正式的AppId，点击注册，会进入到小程序注册页面，输入一个未注册过的邮箱。
在这里插入图片描述
注意标注的文字，这很重要，所以当你要进行小程序的开发时，最好是新建一个邮箱去注册，可以减少不必要的麻烦。

当资料填写完成之后点击注册按钮。
在这里插入图片描述
然后登录填写的邮箱，去查看最新收到的邮件

点击这个链接，进行邮箱账号的激活，点击之后会进行用户信息登记

这里我选择的是个人，然后会出现一个二维码，使用手机微信进行扫描，扫描的用户将会成为管理员。
在这里插入图片描述
注册成功，点击前往小程序。

点击填写按钮，对小程序的相关信息进行填写。

当你的小程序名称和已经注册过得小程序名称大致相同时，会有一个提示。

点击仍然使用。

选择图标进行和填写描述以及小程序的类型，都填写好了之后点击底部的提交按钮。提交之后其实你的AppID就生成好了，
在这里插入图片描述

选择小皮天气，

2. 使用测试号AppID

或者点击右边的测试号，这个就很简单了，点击获取的一个测试的AppID。如果你的小程序是要发布的，那么建议你使用正式号AppID。
在这里插入图片描述
点击新建，等待项目创建完成。

你会看到给你添加了默认的页面index,然后就是你的微信头像，以及一个HelloWorld。

这里就是模拟器了，一般在开发过程中都是在模拟器中调试运行的，因为你如果要运行的自己的手机微信上，编译的过程比较长。

下面尝试运行到手机上。
在这里插入图片描述
点击这个真机调试。

手机微信扫描这个二维码，然后你就会看到你的手机上有这个小程序了。

在这里插入图片描述

因为是本身是搞Android开发的，所以这个过程我的感觉就像是通过usb连接了手机和电脑，然后在AS上编译项目安装APK到手机上，而此时这个APK是只能自己调试使用的，同理刚才这种方式产生的小程序也是调试使用的，属于开发版，你可以在微信的小程序列表中看到。

在这里插入图片描述

这就是刚才安装的小程序，你点击一下就会打开，不过这个和网速有关系。这个就相当于一个debug版apk，只能自己使用。

四、项目结构讲解

可以看到，从刚才的微信小程序的项目创建到运行，我没有写过代码。那么在运行的时候却能看到我的微信头像和这个HelloWorld，这说明在创建项目的时候自动给我们生成了一些代码，就比如AS创建一个新项目会默认有一个MainActivity一样，同时这个Activity还是启动页面，那么我觉得有必要去了解这个小程序的项目结构，这样以后写的时候就不会迷糊了。

在这里插入图片描述
上图就是这个小程序的项目结构。

上面两个文件夹pages和utils后面将，先看下面的文件。

1. app.js

看看里面的代码：
在这里插入图片描述
这里看到了一个本地存储和一个登录，这些都是功能的实现函数，那么这里面就是一些业务逻辑代码。那么小程序的逻辑就在这里。

2. app.json

看看里面的代码
在这里插入图片描述
上方这里有一个pages的数组，里面是小程序当前已有的页面，后面又有一个window表示窗体的样式，下面还制定了样式的版本，那么毫无疑问，这是一个公共配置文件，当你的小程序增加或者删除页面时和这个app.json都有关系。app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、多设置多Tab等。