微信小程序学习（一）

第一个小程序项目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;