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

基本目录结构

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

 

 index目录下文件操作步骤

   1.针对index.wxml 

      (一)微信小程序:实现引导页
<!--index.wxml-->
<view class="index-container">
  <image src="../../image/logo.png"></image>
  <text class="username">hello,iwen</text>
  <view class="btn-view">
    <text>开启小程序之旅</text>
  </view>
</view>
View Code

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

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

      (一)微信小程序:实现引导页
/**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

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

     

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

    3.index.json中对window的配置

       查看api中对于全局配置的描述:                  (一)微信小程序:实现引导页

 

 

       

(一)微信小程序:实现引导页
{
    "navigationBarBackgroundColor":"#109D59",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序"
}
View Code

       呈现出效果如下图1-2

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

 

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

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

上一篇:Linux Kernel中所應用的數據結構及演算法


下一篇:linux系统调用和库函数调用的区别(转)