第一个微信小程序之Hello World

概述

---

在小程序账号注册完整流程一文中详细介绍了如何注册一个小程序账号。下面我们介绍一下如何开发一个Hello World的小程序。

---

微信开发者工具下载

---

访问(https://mp.weixin.qq.com),用小程序账号登录后,按照如下步骤下载微信开发者工具。

1、点击【文档】链接
2、点击【开发】链接，在弹出的选项中，选择【小程序开发】
3、点击【工具】的链接
4、从左边的导航栏中，找到【下载】这个链接
5、根据自己的操作系统平台，选择合适的版本下载

执行刚下载的

wechat_devtools_1.02.1803210_x64.exe

一路next即可。

---

使用微信开发工具

---

安装完毕后，我们需要使用手机上的微信扫码登录。

登录成功后，有两种项目可以选择，这里我们选择【小程序项目】

接着我们需要填写小程序的路径以及APPID。

路径可以自己指定，APPID可以从【mp.weixin.qq.com】里面的【开发设置】里找到。

点击确定按钮后，进入小程序开发界面。

---

开发Hello World程序

---

这里先不介绍小程序的目录结构，直接编写程序。后续的文章再来仔细介绍小程序目录结构。

首先，先建立app.js和app.json

app.js

App({})

app.json

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

然后创建一个pages目录，并在pages目录下创建一个helloworld目录。helloworld目录下存放四个文件。

helloworld.js
helloworld.json
helloworld.wxml
helloworld.wxss

四个文件的内容分别如下：

---

helloworld.js

Page({})

helloworld.json

{}

helloworld.wxml

<view>Hello World</view>

helloworld.wxss

view {
  width: 100%;
  height: 50rpx;
  text-align: center;
}

保存好文件后，就可以看到小程序里可以输出一个

Hello World

OK,一个简单的小程序hello world程序就写完了。

---

2018 博客之星

---

我最近在参与CSDN的博客之星评选，希望您投下宝贵的一票,多多支持我继续写博客，谢谢。

CSDN 2018博客之星,需要您投上宝贵的一票