#3 你的第一个小程序

微信小程序

查看代码环境

在1 开发者工具安装及登录中，我们以 “云基础开发模板” 创建了一个应用。

它看上去是这个样子。

picture.image

我们让 “模拟器”（红字1） “可视化”（红2）处于选中状态（显示绿色）。

查看如图所示红字3的index.wxml , 在右边（红字5）会显示代码

picture.image

在pages 目录下新建目录 my-page

picture.image

增加文件

my-page.js 定义数据和方法

Page({
    data: {
      message: "欢迎来到 My-page 首页！"
    },
  
    onLoad() {
      console.log("My-page 首页加载完成");
    }
  });

my-page.json


{
    "navigationBarTitleText": "My-page 首页"
  }

my-page.wxml 实现 UI 界面

<view class="container">
  <text>{{message}}</text>
</view>

my-page.wxss UI 界面样式，类似 CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

text {
  font-size: 20px;
  color: #333;
}

配置 App.json

// app.json
{
  "pages": [
    "pages/my-page/my-page",
    // 其他页面路径
  ],
}

picture.image

编译和预览

点击my-page.wxml , 再点击 1 编译，可以在模拟器部分查看结果~

picture.image