小程序快速学习笔记-1

5.24 更新

来,一起学小程序!



文件概述:

    所有小程序的component都包含四个文件

    .js 这个就是用来写 JS 的地方,也就是小程序的逻辑层 需要一个 Page({}) 放在最外面 用来对 Page 内的 data 和 functions 进行操作。

    .wxss 类似于 css 这边可以对 wxml 中 class="" 进行样式定义。

    .json 配置文件 同时可以对一些部位的视图层进行属性操作(比如标签栏)。

    .wxml 类似于 xml ,视图层。 一般的标签有 <view> <text> <navigation><button> 等。这个类似于 html 语言,但是有微信的修改。


最外侧的 app 代表的是全局的 config 或者样式:

    app.wxss这里定义可全局引用的模版

    app.json 这里可以定义一些特殊部位的属性,如 TabBar。非常重要的 "pages" 字段,这里的 pages 后的 list 相当于对 页面进行了注册。(其实也就谁放在第一个比较重要点。。)


在 自动创建工程生成的 utils 文件中,微信写好了很多方法。比如:

var util = require('../../utils/util.js');  

var time = util.formatTime(new Date());

这两句话可以获取当前时间 

这个之后做一个常用包的整理好了!


概述结束 简要说一下一些比较基础常用的东西吧!

页面生命周期:

    onShow:初始加载之后 由隐藏转到显示的时候调用。
    onReady:初始渲染完成,整个视图准备开始交互。
    onHide:每次视图开始隐藏的时候调用一次。

    onUnload: 页面被关闭或者卸载。


常用的 wxss 中的样式定义

    rpx 这个是根据 手机的宽自适应的标准 横向最大为 750rpx 一半为 375rpx 在 iphone6 状态下刚好 1 px = 2 rpx    

    vh 页面视高,定义方法和 rpx 相似 最多100(百分制)


    display:flex弹性布局,默认为横向 display: inline; 使得该元素和下一元素保持同一直线

    flex-direction:column; 默认是 row ,纵向弹性布局



普通 css 有的特点也会有。

    border-radius:50%;  圆形

    font-weight:bold; 加粗

    justify-content: space-around; 留空

    align-items:center; 元素居中


常用 wxml 属性:

    {{}} 数据绑定。使得 view 层和逻辑层中 Page 下 Data 的值绑定在一起。

     Page 下定义的数据可以通过 setData 动态添加或者修改。

    setData({

        data:data;

    })

    任何 view 层的用户操作都不会直接改变 data 的值。


调用某个参数中的name参数如下:

    {{thisWeekMovie.name}}




<navigation>  跳转:

    open-type='redirect' \ 'switchTap' \ 'navigation'

    这三个属性是微信小程序 navigation 的三大属性,在之后的笔记中还会提到。

    分别代表“不可返回,且销毁页面”,“和 tapBar 保持一致(就是这个的跳转会影响到 tap 中定义的事件”、“跳转且可以返回”


hover-class='' 点击颜色

    这个必须注意,微信的实现方法是在原有的 class 后添加 hover-class 后的样式,所以如果有默认的 class ,必须在 wxss 样   式中写在 hover-class 对应的样式之前


<swiper> 轮播元素

    内部为 <swiper-item> 

    indicator-dots='true' 显示点(于是就从外面看到这是第几张图片了)

    current="0" 显示这是第几张图片


基础 xml 特性仍然继承,如:

    <class="" id="" >


wx 特性事件

1.条件渲染

    {{(score >= 60)?"及格":count}}


    条件渲染 和 hidden 的区别在于 hidden 的元素仍然生成,只是改变 可见度 (可见性需要频繁切换的时候)

    具体写法如:

  <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style="font-size:16px; color:red;">强烈推荐</text>

2.列表渲染

    wx:for=“{{参数}}”

    这个有点类似于 html 中的 {% for i in list %} {% endfor %}

    会自动生成两个可以在视图层调用的变量。

    item: 相当于 loop 中的单个 item

    index:  item 在 list 中的位置

点击:

    冒泡事件: 会向上传递事件。比如子事件被点击,点击会传递到父事件查看是否有相应的点击事件,有也会执行。

    非冒泡事件 不是上面的事件   


    bindtap='' 冒泡

    catchtap='' 非冒泡

    ""内的是方程名 一般定义方式如下

      fo: function(event){
        console.log(event)
      }
    event 是绑定的事件。如果想要获取 currentTaget 中 view 包裹的的属性需要通过这个获取。不需要,可以不写。


在 app.json 中添加 tabBar 和 默认标题栏


"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "index",
      "iconPath": "/icon/1.jpg",
      "selectedIconPath": "/icon/2.jpg"
    },
    {
      "pagePath": "pages/weekly/weekly",
      "text": "weekly",
      "iconPath": "/icon/2.jpg",
      "selectedIconPath": "/icon/1.jpg"
    }
    ],
    "color": "#000000",
    "selectedColor": "green"
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }

   



猜你喜欢

转载自blog.csdn.net/weixin_42271658/article/details/80424464