有什么做同城的网站,wordpress 培训机构,多网站管理,软件开发公司介绍第一个小程序项目https://blog.csdn.net/qq_38060125/article/details/149577612本人准备跟着这位博主学习#xff0c;以后做出记录。
#x1f4dd; 练习任务
创建一个空白小程序项目在首页展示一段自我介绍文字#xff08;如姓名、兴趣、学习目标等#xff09;修改页面标…第一个小程序项目https://blog.csdn.net/qq_38060125/article/details/149577612本人准备跟着这位博主学习以后做出记录。 练习任务
创建一个空白小程序项目在首页展示一段自我介绍文字如姓名、兴趣、学习目标等修改页面标题为“我的第一个小程序”使用 console.log 输出一条欢迎信息并在控制台查看结果 拓展建议 尝试在 app.wxss 中定义一个全局样式类 .primary-color并在页面中应用它 修改 app.json 中的 window 配置项更改导航栏背景色和文字颜色 探索更多 WXML 标签如 image、button、scroll-view 等
做法
1. 首页展示自我介绍文字
修改 pages/index/index.wxml
view classcontainertext class line-text Hello, MiniProgram/texttext classline-text primary-color 大家好我是尘似鹤/text
/view2. 使用 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;
