微信小程序-从零开始新建一个项目

在这里插入图片描述

  1. 新建时,不勾选【建立普通快捷启动模板】
  2. 在根目录下建立3个应用程序文件 app.json   app.js   app.wxss
  3. 在根目录下建立pages文件, 在pages文件下建立welcome文件夹并建立四个页面文件 welcome.js   welcome.wxml   welcome.wxss   welcome.json
    在这里插入图片描述

welcome.wxml 输入要显示的内容

Welcome, 从零开始建立项目

app.json

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

显示页面内容,让小程序的MINA框架知道页面存在以及页面具体位置

welcome.js   此文件不能为空

Page({
  
})

welcome.json   此文件不能为空

{
  
}

保存即为运行
在这里插入图片描述


在welcome页面添加一些标签元素

  1. 准备一些微信头像图片,将其放在根目录‘/images/avatar/’文件夹下,没有就创建它
    真实项目中,图片资源尽量不要存储在小程序的目录中,因为小程序的大小不能超过1MB,超过则无法真机运行和发布项目,应该将图片放在服务器上,让小程序通过网络来加载图片资源
    在这里插入图片描述

welcome.wxml

<view> 										#view组件通常作为容器来使用,类似于HTML的div标签
  <image></image>							#image组件用来显示一张图片,类似于HTML的img标签
  <text>Welcome, 从零开始建立项目</text>		#text组件用来显示一段文本,类似于HTML中的span标签
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

更改welcome.wxml 内容如下

<view>
  <image src="../../images/avatar/avator-3.jpg"></image>		<!--image组件需要设置一个src属性,该属性执行一张图片的路径,用来显示该图片-->
  <text>Welcome, 从零开始建立项目</text>
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

保存即为运行,结果如下
小程序MINA框架默认高宽为,宽度300px,高度225px
在这里插入图片描述

更新welcome.wxml  内容
给每个样式的组件加入样式名称,class name
<view class="container">
  <image class="avtar" src="/images/avatar/avator-3.jpg"></image> <!--image组件需要设置一个src属性,该属性执行一张图片的路径,用来显示该图片-->
  <text class="motto">Welcome, 从零开始建立项目</text>
  <view class="journey-container">
    <text class="journey">开启小程序之旅</text>
  </view>
</view>

页面样式表
welcome.wxss

.container{ /*是所有组件元素的容器*/
  display: flex; /*使用Flex布局*/
  flex-direction:column;
  align-items:center;
}
.avatar{ /*设置头像的*/
  width:200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.motto{ /*设置Welcome,从零开始建立项目这句话的样式*/
  margin-top:100rpx;
  font-size:32rpx;
  font-weight:bold;
  color:9#F4311;
}
.journey-container{ /*设置开启小程序之旅的外边框,使其看起来想一个按钮*/
  margin-top:200rpx;
  border:1px solid#EA5A3C;
  width:200rpx;
  height:80rpx;
  border-radius:5px; /*boader-radius让外边框变成圆角矩形*/
  text-align:center;
}
.journety{ /*设置圆角矩形的文本样式*/
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#EA5A3C;
}

保存并运行,运行结果如下
在这里插入图片描述


修改页面整体的背景色

  1. 首先尝试在welcome.wxss 文件的.container样式里追加属性
background-color:#ECC0A8;

保存并运行效果
在这里插入图片描述

这不是我们想要的效果,在container view容器外边,小程序还有一个默认的容器元素:page,这是MINA框架默认添加的
page元素代表着页面的整体
可以在【wxml pannel】模块下看出
在这里插入图片描述
调整welcome.wxss代码,在末尾追加如下代码

page{
  background-color:#ECC0A8;
}

保存并运行,运行效果如下
在这里插入图片描述


修改导航栏的颜色

导航栏是小程序默认的,不可以隐藏或者取消,它必须存在
window配置可用来设置小程序的状态栏、导航栏、标题和窗口的背景色

追加app.json内容

{
  "pages":[
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#ECC0A8"
  }
}

保存并运行,运行效果如下
在这里插入图片描述
导航栏已经被隐藏了,但这不是真的被隐藏
window其他属性
navigationBarTextStyle 配置导航栏文字颜色,只支持 black/white
navigationBarTitleText 配置导航栏文字内容
backgroundColor 配置窗口颜色
backgroundColor 配置窗口颜色
backgroundTextStyle 下拉北京字体,仅支持 dark/light
enablePullDownRefresh 是否开启下拉刷新

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值