创建第一个微信小程序

简介: 创建属于自己的第一个小程序上面第二步已经安装好开发者工具了,接下来就来教大家如何创建一个最简单的小程序点击 + 号,创建小程序

下面,就请大家动手,跟着写一个最简单的小程序,只要五分钟就能完成。

第一步,新建一个小程序的项目目录。名字可以随便起,这里称为wechat-miniprogram-demo

创建属于自己的第一个小程序

上面第二步已经安装好开发者工具了,接下来就来教大家如何创建一个最简单的小程序

点击 + 号,创建小程序


image.png



你可以在资源管理器里面,新建目录。如果熟悉命令行操作,也可以打开 Windows Terminal(没有的话,需要安装),在里面执行下面的命令,新建并进入该目录。

> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo

第二步,在该目录里面,新建一个脚本文件app.js。这个脚本用于对整个小程序进行初始化。

app.js内容只有一行代码。

App({});

上面代码中,App()由小程序原生提供,它是一个函数,表示新建一个小程序实例。它的参数是一个配置对象,用于设置小程序实例的行为属性。这个例子不需要任何配置,所以使用空对象即可。

第三步,新建一个配置文件app.json,记录项目的一些静态配置。

app.json采用 JSON 格式。JSON 是基于 JavaScript 语言的一种数据交换格式,只有五条语法规则,非常简单,不熟悉 JSON 的同学可以参考这篇教程

app.json文件的内容,至少必须有一个pages属性,指明小程序包含哪些页面。

{
"pages": [
 "pages/home/home"
]
}

上面代码中,pages属性是一个数组,数组的每一项就是一个页面。这个示例中,小程序只有一个页面,所以数组只有一项pages/home/home

pages/home/home是一个三层的文件路径。

  1. 所有页面都放在pages子目录里面。
  2. 每个页面有一个自己的目录,这里是pages下面的home子目录,表示这个页面叫做home。页面的名字可以随便起,只要对应的目录确实存在即可。
  3. 小程序会加载页面目录pages/home里面的home.js文件,.js后缀名可以省略,所以完整的加载路径为pages/home/homehome.js这个脚本的文件名也可以随便起,但是习惯上跟页面目录同名。

第四步,新建pages/home子目录。

$ mkdir -p pages/home

然后,在这个目录里面新建一个脚本文件home.js。该文件的内容如下。

Page({});

上面代码中,Page()由小程序原生提供,它是一个函数,用于初始化一个页面实例。它的参数是一个配置对象,用于设置当前页面的行为属性。这里是一个空对象,表示不设置任何属性。

第五步,在pages/home目录新建一个home.wxml文件。WXML 是微信页面标签语言,类似于 HTML 语言,用于描述小程序的页面。

home.wxml的内容很简单,就写一行hello world

hello world

到这一步,就算基本完成了。现在,打开小程序开发工具,导入项目目录wechat-miniprogram-demo。如果一切正常,就可以在开发者工具里面,看到运行结果了。


image.png


点击工具栏的"预览"或"真机调试"按钮,还可以在你的手机上面,查看真机运行结果。

image.png


熟悉开发者工具


image.png


开发者工具个性化的配置

主要给大家讲一些个性化的配置


image.png


我们可以配置主题颜色,模拟器位置,这些完全可以根据个人喜好进行设置。


image.png


相关文章
|
4月前
|
小程序
微信小程序的初始数据
微信小程序的初始数据
74 0
|
28天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
10月前
|
小程序
微信小程序从零开始开发步骤(六)4种页面跳转的方法
微信小程序从零开始开发步骤(六)4种页面跳转的方法
204 0
|
4月前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
|
存储 小程序 UED
微信小程序-列表渲染
微信小程序可有意思了
301 0
|
4月前
|
小程序 API
微信小程序返回到顶部功能实现
微信小程序返回到顶部功能实现
|
4月前
|
JSON 小程序 前端开发
简单描述下微信小程序的相关文件以及类型?
简单描述下微信小程序的相关文件以及类型?
102 1
|
小程序 JavaScript
【微信小程序】三分钟学会小程序的列表渲染
【微信小程序】三分钟学会小程序的列表渲染
871 0
|
10月前
|
JSON 小程序 JavaScript
微信小程序从零开始开发步骤(二)创建小程序页面
微信小程序从零开始开发步骤(二)创建小程序页面
215 0
|
JavaScript 小程序
微信小程序-页面访问组件数据和方法
好了,结构搭建的差不多了,接下来就是来看关键的内容了,首先我们来看一下如何拿到一个自定义组件的实例,有两种方式,这两种方式的前提条件是,给这个组件设置一个标识,设置标识的方式可以是通过类名或者ID进行设置,然后通过这个标识得到组件实例。
281 0