小程序之练手项目

  • 2018-04-17
  • 113
  • 0
  • 0

前两天看了微信给出的关于小程序的官方文档,决定上手做一个关于小程序的项目去练练手;

  • 首页

实现效果是首页加上头像和欢迎语
首页大概是这个样子
这个页面很简单, 一个img, 一个text来放置欢迎语, 一个进入小程序的按钮(这个按钮其实是可以去掉,然后做一个定时器进去之后自动跳转页面)

  1. 先设置几个控件


      <view>
        <p >   犹似故人归</p>
        <p > 与君初相见</p>
      </view>
     <button >进入小程序</button>
    </view>
    

设置控件之后你会发现显示效果跟效果图有点差别, 不过别担心;
如果你之前做过前端开发, 你一定猜到,这是因为css样式表没有被加载出来,
其实跟前端代码一样, 你需要给标签设置对应的样式表;

  1. 然后设置css样式表, 微信里叫wxss
    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .userinfo {
    display: flex;
    width: 20rpx;
    flex-direction: column;
    align-items: center;
    color: black;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    margin-top: 100rpx;
    margin-right: 50rpx;
    }
    .vview{
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    }
    .jumpBtn {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 70rpx;
    text-align: center;
    color: black;
    size: 68rpx;
    border-width: 2rpx;
    border-color: #EDECE8;
    background-color: #BEE4F3;
    }
    wxml:



    犹似故人归

    与君初相见




这下就好啦, 如果你的小程序顶部有一些不一样, 你需要在app.json进行配置, 设置window的navigationBarBackgroundColor属性;

评论

还没有任何评论,你来说两句吧

你必须 登录 才能发表评论.