html 仿微信引导页,(一)微信小程序:实现引导页

基本目录结构

0c3cd64d9b54e0ee67c04ce16c41bab7.png

index目录下文件操作步骤

1.针对index.wxml

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

hello,iwen

开启小程序之旅

View Code

代码解析:定义容器,容器中包含图片(img)、文字(text)、按钮(通过view+text实现)

2.其次对于index.wxss  进行html页面渲染

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

/**index.wxss**/

.index-container{

display: flex;

flex-direction: column;

align-items: center;

}

.index-container image{

width: 392rpx;

height: 96rpx;

margin-top: 100px;

}

.index-container .username{

margin-top: 50px;

font-size: 18px;

}

.index-container .btn-view{

border: 1px solid #109D59;

margin-top: 100px;

border-radius: 5px;

padding: 5px 30px;

display: flex;

align-content: center;

}

.index-container .btn-view text{

color: #109D59;

font-size: 15px;

}

View Code

代码解析:1.设置弹性盒子模型+上下分部+盒子左右居中

2.图片的设置需要引入rpx:1rpx=0.5px,因此在原图片px基础上进行倍数操作;调整边缘到顶部距离

3.调整字体边缘到顶部距离;设置文字大小

4.设置view的样式:填充边框、设置到顶部距离、边框四角呈圆弧(margin-radius)、内边距(padding)、定义弹           性盒子使得文本居中(align-content)

5.设置字体大小、颜色

达到的效果如下图1-1

0ed6c324d7f5c057f1e613334e9f250c.png

但是,我们可以发现上面的标题栏呈现效果很差,因此可以通过改变index.json中代码进行渲染!

3.index.json中对window的配置

查看api中对于全局配置的描述:

848466cc5001df7aa42f51fd8647e3c0.png

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

{

"navigationBarBackgroundColor":"#109D59",

"navigationBarTextStyle": "white",

"navigationBarTitleText": "我的小程序"

}

View Code

呈现出效果如下图1-2

c6daf0c8a2324fc6bd535cde200ad193.png

第二节讨论:点击按钮后实现页面跳转~

来源:https://www.cnblogs.com/happy-prince/p/12766540.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值