关闭

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

标签: 程序开发微信
3345人阅读 评论(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
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

微信小程序-欢迎界面

版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[+] 布局的实现逻辑的实现样式的实现看效果 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实...
  • qq_35114086
  • qq_35114086
  • 2016-11-27 19:04
  • 2805

微信小程序-欢迎界面

市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, ite...
  • u012987546
  • u012987546
  • 2016-11-26 17:50
  • 1221

微信小程序电影推荐demo实战开发小结(附源码及思维导图) ... ...

第一步 项目配置 一、编写app.json 对整个项目的公共配置 1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不到页面的错误2、window:窗口配置 ... 本文已获作者...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-13 13:06
  • 2288

微信小程序--搜索电影app

做完“天气预报”之后就尝试做“豆瓣电影app”了,学到不少东西,下面是详细步骤:
  • Inite
  • Inite
  • 2017-07-10 16:40
  • 501

【Android】Android实现启动欢迎界面

在Android中启动界面是必须也是必要的,启动界面可以介绍软件自身的功能以及如何使用,更有包装自己程序的功能。     那么如何实现上述效果呢?     首先需要一个Adapter,用来载入启动界面view的信息。 packag...
  • qq_32353771
  • qq_32353771
  • 2016-10-16 00:39
  • 1987

导航页面ViewPager和欢迎界面的实现

源码下载: 在activity_welcome.xml文件中,   xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schemas.a...
  • wo_ha
  • wo_ha
  • 2016-04-26 14:01
  • 1157

公众号关注后接收多图文欢迎界面,使用一个不错的调试工具

试一试老贼的关注公众号后接收多图文欢迎界面。修改文件 wx_token_read.php 内容为: <?php //装载模板文件 include_once("wx_tpl.php"); //获取微信发送数据 $postStr = $GLOBALS["H...
  • bq_cui
  • bq_cui
  • 2016-11-10 19:13
  • 835

微信小程序入门-简单页面编写

前言今天微信小程序正式上线,抱着学习新技术的心态开始第一次接触微信小程序,无论外面怎么鼓吹把微信小程序怎么干掉大量的原生的app,然而作为一个学习者保持一个正确的学习心态,它只是一门新的事物,也许这个事物是用Web前端技术包裹而成,这不妨碍对新鲜事物的追求。应用范围张小龙对小程序的定义: 小程序...
  • xiaofengwu123
  • xiaofengwu123
  • 2017-01-09 20:17
  • 15481

微信小程序页面跳转传值以及获取值方法

在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值。
  • jia635
  • jia635
  • 2017-06-27 20:19
  • 2385

微信小程序页面跳转传参填充数据的小案例

在微信小程序中,把index.wxml中data-postid的值,传给detail.wxml,并为detail.wxml绑定传过来的值的案例
  • anLazyAnt
  • anLazyAnt
  • 2017-02-28 17:05
  • 1054
    个人资料
    • 访问:279899次
    • 积分:2841
    • 等级:
    • 排名:第14512名
    • 原创:47篇
    • 转载:1篇
    • 译文:0篇
    • 评论:20条
    博客专栏
    联系方式

    微信公众号:


    个人网站:

    http://isundayweb.com/

    扫码打赏

    微信扫一扫

     

    支付宝扫一扫

    最新评论