登录 | 注册

一分钟完成欢迎页面的制作,你就知道小程序成本多低

admin 209 0

摘要:  首先,在MQuick新建一个小程序工作。根据一个网友提供的小样式,思路是这样的:1.底部的hello world改为一个类似于按钮的样式;2.添加背景颜色; 3.修改顶部样式;首先把小程序默认的pages/index这个文件夹的index.w ...

 

首先,在MQuick新建一个小程序工作。

 

 

 

根据一个网友提供的小样式,思路是这样的:

1.底部的hello world改为一个类似于按钮的样式;

2.添加背景颜色;

3.修改顶部样式;

 

首先把小程序默认的pages/index这个文件夹的index.wxml代码进行小修改。

 

 

 

Index.wxml代码如下:

 

<!--index.wxml-->

<view class="container">

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto">

    <!-- <text class="user-motto">{{motto}}</text> -->

    <text class="btn">米筷小程序之旅</text>

  </view>

</view>

 

然后,修改在index.wxss附上样式代码。

 

 

Index.wxss的代码如下:

/**index.wxss**/

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

 

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

 

.userinfo-nickname {

color: #aaa;

}

 

/*.usermotto {

margin-top: 200px;

}*/

 

page{

height: 100%;

background: #70e663;

}

 

.usermotto {

margin-top: 200px;

border: 1px solid #405f80;

width: 200rpx;

height: 80rpx;

text-align: center;

border-radius: 5px;

}

.btn{

font-size: 22rpx;

font-family: MicroSoft Yahei;

font-weight: bold;

line-height: 80rpx;

}

 

效果基本上出来啦

 

 

最后才修改app.json,这里主要是控制顶部的设置。

 

 

App.json的代码如下:

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#70e663",

    "navigationBarTitleText": "欢迎使用米筷开发",

    "navigationBarTextStyle":"black"

  }

}

 

整个工作就完成,跟完成世界第一个helloword一样的简单啊!


路过

雷人

握手

鲜花

鸡蛋
分享到:
收藏 邀请
上一篇:HTML5工具拖拉工具 下一篇:米筷首次推出“互联网学院”小程序模板,助力知识付费市场 ... ...
返回顶部