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

Posted 2021-02-02

一、小程序支持的标签
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文件