关闭

微信小程序开发阅读&电影小程序之(1)——欢迎页面的创建

标签: 程序开发微信
2695人阅读 评论(3) 收藏 举报
分类:

先看下最后的效果图:
这里写图片描述

首先打开开发工具,创建quick start项目,简单的修改一下。
这里写图片描述

  • 把Index文件夹重命名为welcome;
  • 底部的hello world改为一个类似于按钮的样式;
  • 添加背景颜色; 修改顶部样式;

按钮的实现:

welcome.wxml

 <view class="usermotto">
    <text class="btn">开启小程序之旅</text>
  </view>

welcome.wxss

.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;
}

背景颜色的设置:

注意:在最外部的view设置宽高百分百,添加背景颜色是无效的。因为微信默认外面还有一层page。
这里写图片描述
所以需要这样写:

page{
  height: 100%;
  background: #b3d4db;
}

顶部设置:

app.jason

{
  "pages":[
    "pages/welcome/welcome"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "欢迎",
    "navigationBarTextStyle":"black"
  }
}

demo源码免费积分下载:http://download.csdn.net/detail/sundayaaron/9727448

个人微信公众号:

这里写图片描述

如果我的文章对您有帮助,微信支付宝打赏:

这里写图片描述
这里写图片描述

2
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:253891次
    • 积分:2719
    • 等级:
    • 排名:第13193名
    • 原创:47篇
    • 转载:1篇
    • 译文:0篇
    • 评论:20条
    博客专栏
    联系方式

    微信公众号:


    个人网站:

    http://isundayweb.com/

    扫码打赏

    微信扫一扫

     

    支付宝扫一扫

    最新评论