信步漫谈之微信小程序——HelloWorld

• 目标
• 1 资源
• 2 程序目录说明
• 3 第一个 HelloWorld 程序
• 4 真机调试
• 参考资料（感谢）

目标

• 微信小程序开发环境
• say hello world

1 资源

• 微信官方文档：https://developers.weixin.qq.com/doc/
• 微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 微信小程序开发指南：https://developers.weixin.qq.com/miniprogram/dev/framework/

2 程序目录说明

pages
    ∟ helloworld       // 页面page
        ∟ helloworld.js
        ∟ helloworld.json
        ∟ helloworld.wxml
        ∟ helloworld.wxss
app.js   // 小程序主体，包括引用了哪些page
app.json   // 小程序功能配置
app.wxss   // 小程序公共样式表

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

• app.js：必需，小程序逻辑
• app.json：必需，小程序公共配置
• app.wxss：非必需，小程序公共样式表

一个小程序页面由四个文件组成，分别是：

• js：必需，页面逻辑
• wxml：必需，页面结构
• json：非必需，页面配置
• wxss：非必需，页面样式表

3 第一个 HelloWorld 程序

• app.js

App({})

• app.json

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

• helloworld.js

Page({})

• helloworld.json

{}

• helloworld.wxml

<view>Hello World</view>

• helloworld.wxss

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

4 真机调试

在微信开发者工具上方，点击“真机调试”，即可在微信上显示小程序，进行操作调试。

参考资料（感谢）

3-微信小程序开发(小程序的目录结构说明)

第一个微信小程序之Hello World