注意：
css就近原则
总体的体积不能超过1M
index属于一级页面
logs属于二级页面
理论上同级页面可以有无限个
人为限制梯度层级 页面只能为5级别
只有<text></text>包围的文字 在手机上才能长按选中
单位rpx
设计图是ipone6模式 宽度是750 px:rpx是1:1 app.wxss是全局样式表 可以存放全局样式
pages/welcom/welcom.js 出现脚本错误或者未正确调用 Page()
解决方法：添加
welcom.js
Page({
})
一、新建空白骨架
1、新建入口文件app.js app.json app.wxss
2、新建pages/welcom/welcom.js 、welcom.wxml welcom.wxss
3、配置app.json
{
"pages": [
"pages/welcom/welcom"
],
"window": {
"backgroundTextStyle":
"light",
"navigationBarBackgroundColor":
"#fff",
"navigationBarTitleText":
"WeChat",
"navigationBarTextStyle":
"black"
}
}
注：配置app.json导航
{
"pages": [
"pages/welcom/welcom"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
配置其他.json文件
{
"navigationBarTextStyle": "#fff",
"navigationBarTitleText": "阅读"
}
4.
a.wxml welcom.wxml
<
view
class=
'container'>
<
image
class=
'user-avater'
src=
'/images/headimg.png'></
image
>
<
text
class=
'user-name'><
text
style=
"color:#c03">Hello
</
text
>,七月
</
text
>
<
view
class=
'moto-container'>
<
text
class=
'moto'>开启小程序之旅
</
text
>
</
view
>
</
view
>
b.wxss welcom.wxss
page{
height:
100%;
background:
#aecfda
}
.container{
display:
flex;
flex-direction:
column;
align-items:
center;
}
.user-avater{
width:
200
rpx;
height:
200
rpx;
margin-top:
160
rpx
}
.user-name{
font-size:
32
rpx;
font-weight:
bold;
margin-top:
100
rpx;
color:
#fff;
}
.moto-container{
margin-top:
200
rpx;
border:
1px
solid
#5a6d73;
width:
200
rpx;
height:
60
rpx;
border-radius:
5px;
text-align:
center;
}
.moto{
font-size:
26
rpx;
line-height:
60
rpx;
color:
#5a6d73;
}
c. 修改全局 css
{
"pages": [
"pages/welcom/welcom"
],
"window": {
"backgroundTextStyle":
"light",
"navigationBarBackgroundColor": "#aecfda", //修改顶部导航栏
"navigationBarTitleText":
"WeChat",
"navigationBarTextStyle":
"black"
}
}