码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发之电影预告

时间:2019-01-11 18:53:15      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:其他   item   过程   ima   页面   index   let   输入   ali   

一、小程序支持的标签
1、view:
div和view都是盒模型,默认display:block。
盒模型在布局过程中,一般推荐display:flex的写法,配合justify-content:center;align-items:center;
的定义实现盒模型在横向和纵向的居中。
2、text:
除了text文本节点以外的其他节点都无法长按选中
3、icon
icon可以直接用微信组件默认的图标,默认是iconfont格式的
4、input
input 的类型,有效值:text, number, idcard, digit, time, date 。
5、picker
picker默认支持普通、日期和时间三种选择器
6、navigator
navigator支持相对路径和绝对路径的跳转,默认是打开新页面,当前页面打开需要加redirect;
7、image
小程序的image与HTML5的img最大的区别在于:小程序的image是按照background-image来实现的。
默认image的高宽是320x240。必须通过样式定义去覆盖这个默认高宽,auto在这里不生效
8、button
小程序不支持button:active这种样式的写法,button的点击态通过.button-hover{}的样式覆盖,也可修改hover-class为自定义的样式名。
9、<swiper><swiper> 图片轮播 样式和属性作用在 swiper标签上
二、文件类型说明
app.json

{
  "pages":[  //哪个写在第一位,哪个就是入口文件
    "pages/index/index",
    "pages/user/user",
    "pages/subject/subject"
  ], 
  "window":{  //配置小程序头部的样式及标题等等
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {  //配置小程序底部tab切换,最少包含2项,且"pagePath" 需在 pages 数组中
    "list": [
        {
          "pagePath": "pages/index/index",  //这里的路径必须和上面pages里面的路径一样
          "text": "text",  //tab切换的名字
          "iconPath": "iconPath",  //tab切换名字上面的图标
          "selectedIconPath": "selectedIconPath"  //选中时候tab的图标
        },
        {
          "pagePath": "pages/user/user",
        "text": "user"
          "iconPath": "iconPath",
          "selectedIconPath": "selectedIconPath"
        }
    ]
  }
}

三、创建文件,在pages上右键,新建目录 -> 新建Page -> 输入名称,如user,即可自动创建4种格式的wx文件

微信小程序开发之电影预告

标签:其他   item   过程   ima   页面   index   let   输入   ali   

原文地址:http://blog.51cto.com/9161018/2341776

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!