微信小程序学习（一）

第一个小程序项目https://blog.csdn.net/qq_38060125/article/details/149577612本人准备跟着这位博主学习，以后做出记录。

📝 练习任务

1. 创建一个空白小程序项目
2. 在首页展示一段自我介绍文字（如姓名、兴趣、学习目标等）
3. 修改页面标题为"我的第一个小程序"
4. 使用 console.log 输出一条欢迎信息，并在控制台查看结果

🔁 拓展建议

• 尝试在 app.wxss 中定义一个全局样式类 .primary-color，并在页面中应用它

• 修改 app.json 中的 window 配置项，更改导航栏背景色和文字颜色

• 探索更多 WXML 标签，如 <image>、<button>、<scroll-view> 等

做法：

1. 首页展示自我介绍文字

修改 pages/index/index.wxml

<view class="container">
  <text class=" line-text"> Hello, MiniProgram</text>
  <text class="line-text primary-color">  大家好，我是尘似鹤</text>
</view>

2. 使用 console.log 输出欢迎信息

在 pages/index/index.js 中添加

Page({
  data: {},
  onLoad() {
    console.log("欢迎来到我的第一个小程序！");
  }
});

3. 修改页面标题为 "我的第一个小程序"

在 pages/index/index.json 里设置

{
  "navigationBarTitleText": "我的第一个小程序"
}

4. 在 app.wxss 中定义全局样式 .primary-color

/* app.wxss */
.primary-color {
  color: #ff6600; /* 设置全局主色 */
  font-size: 16px;
  line-height: 24px;
}

5. 修改 app.json 中的 window 配置

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#007aff",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的第一个小程序",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "light"
  }
}

这样导航栏颜色和文字颜色就会改变。

这里设置与上边设置的区别：

配置位置	作用范围	优先级	场景
app.json → window	全局默认样式	低（会被页面级覆盖）	小程序大部分页面统一样式
pages/xxx/xxx.json	单个页面专属样式	高（覆盖全局）	不同页面需要不同标题/背景

效果：

如果文件在一行，并没有分开，在pages/index/index.wxss

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

加入 flex-direction: column;