微信小程序，学习笔记（一）框架，视图层

微信小程序，学习笔记（一）框架，视图层

学习链接：http://www.w3cschool.cn/weixinapp/

因为其实并非原创，但是并没有什么好的类别可选，所以修改成：“翻译”了。

熟悉

文档结构介绍

--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxss

全局变量、对象、方法

普通类型

对象

  • App

    应用程序全局实例，在app.js中定义，每个程序只有一个实例，可以通过如下方式获取

    var app = getApp();

    该对象内容，全局属性或全局方法可以在这里面定义

    App({
    onLaunch: function () { ...... },

    getUserInfo: function () { ...... },

    // 全局变量对象
    globalData： {
        userInfo: null
    },

    globalIndex: 0
});

    使用方法：

    var app = getApp();

// 保存用户信息
var userInfo = app.globalData.userInfo;

// 普通类型全局变量
var index = app.globalIndex;

视图层（View）

数据绑定（{{}}）和条件渲染（wx:if）

使用两个嵌套的大括号方式

Page({
    data: {
        name: ‘lizc‘,
        index: 0,
        condition: true,
        flag: 0,
        a: 1,
        b: 2,
        c: 3,
        str: ‘world‘
    }
});
  1. 普通绑定：

    <view>{{name}}</view>

  2. 组件属性绑定: 必须使用引号引起来，在js改变index值的时候，页面会自动刷新最新值

    <view id="item-{{index}}"></view>

  3. 控制属性：即属性值是需要通过满足一定条件达到目的

    <view wx:if="{{condition}}"></view>

    也可以是条件表达式，或运算表达式：

    <view hidden="{{flag ? true : false}}"></view>

    多级条件判断，如：if ... elif ... else

    <view wx:if="{{flag !== 0}}">flag不为0的时候才显示这个view</view>
<view wx:elif="{{flag > 0 && flag < 8}}">flag取值在 0 ~ 8 之间的值时候显示这个</view>
<view wx:else>上面两个都不满足显示条件的时候就会显示这个</view>
  4. 使用<block>块标签来使用条件判断控制多个组件的行为，<block>只起到分组的作用，并不会真的渲染到出来 
    <block wx:if="{{flag > 0}}">
    <view>组件一</view>
    <view>组件二</view>
</block>
  5. 算术运算 
    <view>{{a}} + {{b}} + c</view>
<view>‘hello‘ + {{str}}</view>
  6. 对象绑定

    其实和普通类型绑定差不多

    <view>{{obj.name}} + array[0]</view>

PS: 使用条件来控制view时候，和hidden属性的比较

- view的条件判断，会在条件中的值发生变化的时候，会先销毁原先的，然后满足条件的时候重新渲染和销毁

- hidden属性控制view的显示和隐藏，这个属性的组件始终会被渲染，只是在需要的时候控制它的隐藏和显示

最后比较得出：如果需要频繁频繁切换的情况下用hidden属性控制，如果在绑定的数据基本不变的情况下使用wx:if条件来控制

列表渲染（wx:for）

  • wx:for，可以同时生成多个元素

    参数属性说明：

    • wx:key="unique..."：指定组件的唯一标识，列表发生变化需要保持自身的状态和特征不发生变化，并且能在重新渲染的时候，重新排序；
    • wx:key="*this"：功能同上，但这个是要求项目中的item本身是唯一的，也就是你需要用到的属性值是唯一；
    • wx:for-index="index"：指定循环的下标变量名，默认：index；
    • wx:for-item="item": 指定当前项变量名，默认：item

    例如：

    <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>

// dates： 需要遍历的数据对象
// ‘unique‘： 数据项的唯一标识符
// ‘idx‘： 指定的下标变量名
// ‘date‘：指定的当前数据的变量名
// 指定之后可以在属性中直接使用‘idx‘, ‘date‘变量，例如，上例的‘id‘: "ctl-list-{{idx}}，这里就用到了‘idx‘来添加属性‘id‘

// 生成后的实际结果：
<view class="ctl-list-row" id="ctl-list-0">1/4</view>
<view class="ctl-list-row" id="ctl-list-1">1/3</view>
<view class="ctl-list-row" id="ctl-list-2">1/2</view>
<view class="ctl-list-row" id="ctl-list-3">1/1</view>
<view class="ctl-list-row" id="ctl-list-4">12/31</view>
<view class="ctl-list-row" id="ctl-list-5">12/30</view>
<view class="ctl-list-row" id="ctl-list-6">12/29</view>

模版（template）

用来定义代码片段，完成之后可以在其他地方通过模版直接套用该模版中组件。

  • 模版定义：

    <!--
    index: Integer
    msg: String
    date: String

    参数可以是可用的任意类型
-->
<template name="tplName>
    <view>
        <text>{{index}}: {{msg}}</text>
        <text>Date: {{date}}</text>
    </view>
</template>
  • 模版使用：通过模版名称 
    <template is="tplName" data="{{...item}}" />

// 数据，模版所需要的数据
Page({
    data: {
        item: {
            index: 0,
            msg: ‘hello‘,
            date: ‘2017-1-4‘
        }
    }
});

// wxml结构中效果：
<view>
    <text>0: hello template</text>
    <text>Date: 2017-1-4</text>
</view>

// 实际显示效果：
0： hello template, Date: 2017-1-4
  • 模版和列表wx:for结合使用，同时生成多个模版

    使用的时候使用半闭合标签，以及需要使用到is=""来指定模版名称去使用的指定模版

    <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-item="it" />

// wxml结构中效果
<view>
    <text>0: hello template</text>
    <text>, Date: 2017-1-4</text>
</view>
<view>...</view>
<view>...</view>
<view>...</view>

// 显示效果，即多个重复模版

0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4
0： hello template, Date: 2017-1-4

// 尝试了下去修改 index 值，未成功，暂时还不知道怎么弄

<template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-index="index" wx:for-item="it" />
  • 运行时通过条件判断来决定使用哪个模版 
    <!-- 运行时决定使用哪种模版 -->
<template name="tpl1">
    <view>template first</view>
</template>

<template name="tpl2">
    <view>template first</view>
</template>

// 运行时根据`is=""`中的语句来判断，决定使用的是‘tpl1‘还是‘tpl2‘
<block wx:for="{{[1, 2, 3, 4, 5, 6]}}">
    <template is="{{item % 2 === 0 ? ‘tpl2‘ : ‘tpl1‘}}" />
</block>

PS: 生成的模版拥有自己独立的作用域，因此所使用的数据必须是data=中指定的数据

事件处理

  • 点击事件：bindtap

    例如：<button class="button button-refresh" bindtap="refreshDateTbl">refresh</button>

    // 绑定的函数在Page中定义，事件函数的参数为 event 事件对象

Page({
    refreshDateTbl: function ( event ) {
        var that = this,
            index = that.data.index + 1,
            len = that.data.dates.length;

        if ( index >= len ) {
          index = 0;
        }

    that.setData({index: index});

    console.log( event );
  }
});

    从输出结果得出，event 对象主要包含以下部分

    changedTouches:Array[1]
currentTarget:Object
detail:Object
target :Object
timeStamp:2881
touches:Array[1]
type:"tap"
  • 事件对象：event

    原生事件属性列表：

    1. type: 即当前事件类型（tap / touch）；
    2. currentTarget：表示当前组件信息集合；
    3. target: 通过打印看了下，console.log( event.currentTarget == event.target ); 结果：false，说明 currentTarget 和 target 不是同一个对象，但是里面的东西应该都是当前目标的属性(不是很确定)；看文档解释是：触发事件的组件的属性集合（currentTarget是当前，target是触发事件的组件，不是很明白区别在哪？？）
    4. timeStamp: 这个时间也不知道是啥，应该不是点击动作时间也不是响应时间，有2.8秒之久。（理解错误，正确：事件生成的时间戳）

    自定义事件对象属性列表：

    1. detail: 当前组件的坐标(x, y)；

    触摸事件对象属性列表：

    1. touches：这个接触的对象数组，难道是和事件冒泡有关？表示网上冒泡的父对象集合？？瞎猜，应该是：当前触摸事件的触摸点信息数组；
    2. changedTouches: 应该和上面的touches有联系，解释为：当前变化的触摸点信息的数组；

    以下是各事件属性的内容，很容易理解

    1. target: id, dataset, offsetLeft, offsetTop，dataset要解释下：表示事件源组件上的自定义属性data-的集合；
    2. currentTarget: id, ‘dataset,tagName`；

      dataset：自定义属性集合，其中自定义属性 data- 中必须都为小写，需要使用 - 作为连接符， 自定义后的属性都会出现在事件对象的dataset对象上，举例：

      <view data-my-name="lizc" data-myAge="30"></view>

      最终 name 和 age 可以通过如下方式去调用

      event.target.dataset.myName === ‘lizc‘; // `-` 连接的都会转成驼峰式
event.target.dataset.myage === ‘30‘; // 而驼峰式写法会被转成全小写形式

      因此推荐使用 - 连接符去书写自定义数据属性

    3. touches：触摸点数组，触摸点对象 Touch 或 CanvasTouch 的集合，表示当前页面上所有触摸点的集合，包含属性：

      Touch 对象

      • identifier： 触摸点标识符，类型：Number，应该是个类似标记的东西，或者索引之类的，唯一；
      • pageX, pageY：相对于整个文档而言，距离文档左上角的 x 和 y 轴的距离；
      • clientX, clientY：相对于可是区域而言，xy 轴的距离

      CanvasTouch对象：

      • identifier: 同上；
      • x, y：这个只有一个坐标，即相对画布左上角而言的坐标；
    4. changedTouches：表示发生变化的触摸点对象集合，比如该触摸点发生了touchstart, touchmove, touchend, touchcancel变化；
    5. detail：跟自定义事件有关，自定义事件携带的数据，不是很明白，具体内容有待考证。

PS1: 中午休息了会，打开代码，随便点击了几下按钮，突然发现这个timestamp可能是什么鬼了！！！

下面是打印

```

Object {type: "tap", timeStamp: 5053127, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053311, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053496, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054722, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054936, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5055120, target: Object, currentTarget: Object, detail: Object…}

new Date() 一下：

new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
new Date(5053127)
Thu Jan 01 1970 09:24:13 GMT+0800 (中国标准时间) 

结果发现相差了 1:24:13，这不是刚刚启动程序那会!!!!

```

从而得出结论：这个timestamp应该就是程序运行的时间，单位：（ms）

PS2: 好傻！！看完事件大概，居然没继续往下看，文档下面就有每个属性的明确解释

timeStamp： 事件生成时的时间戳；我还把它当成了程序运行时间~~~~, 也就是该页面打开到事件触发时的这段时间。
  • 事件类型：冒泡和非冒泡

    冒泡事件：（除以下冒泡事件之外的其他事件均为非冒泡事件）

    1. touchstart: 手指刚碰触到屏幕的时候触发的事件；
    2. touchmove：手指触摸后移动时触发；
    3. touchcancel:手指触摸动作被打断，即非正常退出触摸，如来电或短信等；
    4. touchend：手指触摸结束；
    5. tap：手指触摸，即点击事件，触摸即离开；
    6. longtap：手指触摸后超过350ms再离开，会被判定为长按。

    非冒泡事件

    1. <form/>标签的submit事件
    2. <input/>标签的input事件
    3. <scroll-view/>标签的scroll事件

    特殊事件：

    1. <canvas />的触摸事件不可冒泡，因此没有 currentTarget，理解：因为不存在冒泡行为，也就是说被点击事件和当前事件组件永远只可能是同一个组件。
  • target 和 currentTarget 对比分析

    测试代码：日期列表，点击日期行，通过事件冒泡去触发父组件的tapDateRow事件

    <view  bindtap="tapDateRow" id="ctl-list-date" class="ctl-list-date">
  <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
</view>

// tap 后输出：

// 点击的当前行，即：event.target
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}

// 绑定事件的组件，即：event.currentTarget
Object {id: "ctl-list-date", offsetLeft: 0, offsetTop: 0, dataset: Object}

    从输出可知，target即你点击的那个组件，也就是触发点击事件的组件，而 currentTarget 是你绑定点击事件的那个组件，如果点击事件句柄同时绑定在被点击的那个组件上，那么这两个对象是不是应该是指同一个组件呢？（猜测对一半错一半，验证如下：）

    // 日期列表
<view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
</view>

// 点击日期行事件处理句柄
tapDateRow: function ( event ) {
  console.log( event.target );
  console.log( event.currentTarget );
  console.log( event.currentTarget === event.target );
}

// 输出
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
false

    结论：通过输出可知，两个对象的内容是一模一样的，说明这两个属性都是代表着当前被点击的组件，但是两者却不是指向同一个空间，即该组件。说明这两个对象具有自己独立的内存空间，而非在绑定事件和触发事件对象相同时都指向同一个内存空间。

  • 事件绑定：bind 和 catch，即冒泡和非冒泡

    bind:

    bindtap, bindtouchstart, bindtouchmove, bindtouchcancel,
bindtouchend, bindlongtap, ......

    catch:

    catchtap, catchtouchstart, catchtouchmove,catchtouchcancel,
catchtouchend, catchlongtap, ......

    例如：

    <view id="view1" bindtap="f3">
    <view id="view2" catchtap="f2">
        <view id="view3" bindtap="f1">
        </view>
    </view>
</view>
    1. 点击 view3 会调用 f1, 然后调用 f2，到此结束，因为 view2 用的是非冒泡绑定，阻止了事件继续往上冒泡到 view1；
    2. 点击 view2 只会调到 f2；
    3. 点击 view1 只会调到 f1；

事件总结：

  1. 事件对象：event;
  2. 事件类型：冒泡和非冒泡；
  3. 事件绑定：bindtap, bindtouch*;
  4. 事件源和触发源：event.currentTarget 和 event.target;

    a. id：事件组件对象的id；

    b. target：自定义属性集合 dataset（属性定义：data-my-name，使用：event.target.dataset.myName）;

    c. offsetLeft/offsetTop： 事件组件的 left/top 实际值。

  5. 事件戳： event.timeStamp，单位：（ms）；
  6. 触摸点对象：event.touches（Touch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y ）；
  7. 变化的触摸点对象：event.changedTouches；
  8. 自定义事件携带的数据对象：event.detail。

引用

引用外部文件方式：import 和 include，两个引入刚好相反或者说互补，前者是引入文件中的模版代码template，而后者是引入文件中除了template定义的之外的所有代码完整拷贝到当前位置。

  • import

    使用import引入时不能嵌套引入，即：加入 a.wxml 中引入了 b.wxml 中的模版，然后 b.wxml 引入了 c.wxml 中的模版，那么 a.wxml 中也无法直接引入 c.wxml 中的模版。

    <!-- a.wxml -->
<template name="tplA">
    <view id="id_a"></view>
</template>
    <!-- b.wxml -->
<import src="a.wxml" />
<template name="tplB">
    <view id="id_b"></view>
</template>

// 引入 a.wxml 中模版
<template is="tplA" />
    <!-- c.wxml -->
<import src="b.wxml" />
<template is="tplB" />  <!-- 引用模版生效 -->
<template is="tplA" /> <!-- 引用模版无效 -->

    未报错，只是警告，但也可知import无法嵌套跨文件引入：

    Fri Jan 06 2017 15:53:55 GMT+0800 (中国标准时间) WXML Runtime warning
Template "tplA" not found.
  • include

    这个引入的是除了template定义之外的所有代码，相当于将代码拷贝到当前位置。

    <!--a.wxml-->
<template name="tplA">
    <view>AAAAAAAAAAAAAAAAAAAAAAAA</view>
</template>

<view>header</view>
    <!--b.wxml-->
<template name="tplB">
    <view>BBBBBBBBBBBBBBBBBBBBBB</view>
</template>

<view>footer</view>
    <!--c.wxml-->
<include src="a.wxml" />
<view>body</view>
<include src="b.wxml" />

    结果： 如下，只是单纯引入了除 template 之外的代码，并且是拷贝到 inlucde 使用的当前位置

    <page>
<view>header</view>
<view>body</view>
<view>footer</view>
</page>

总结：该文主要是根据 W3CSchool 上的资料，学习记录下来的（后续也会一直学习微信小程序的东西）其实也基本差不多是 copy 到一起了吧，不过这样有助于记忆，没有什么技术含量的东西。最近一段时间有点忙，博客什么的压根都没上过，一个人在负责一块还是感觉有点人手不足的，这段时间几乎每天都是10点，11点多下班，周六还要加班。

忍不住要吐槽，不吐不快。。。。。。

  1. 槽点1：组内来了两个应届生，组长之前就说好了让我一个跟着我让我带着，一起帮忙负责这一块，可是说是这么说，中途不停的给他安排其他任务，我总感觉是说安排到我这，就是来打酱油的，最后还是的自己去弄，后面又新接了一个开发的任务，搞的人都快搞虚了，不过也算是乐在其中吧，还是比较喜欢创造新东西，每天不停的去给别人填坑也是种苦，宝宝心里苦~！）

新开发任务总算完结了，后期测试也算告终，其实也不是什么复杂的东西，只是今年刚进公司对公司业务这块并不是非常熟悉，所以花了点时间。现在搞完了自己也算有点成就感，嘿嘿~~！！！

  1. 槽点2：来了快一年，接触过无数厂家的前端代码，有些写的复杂的让人头疼，给人感觉就是：我就是要写的这么复杂，甚至对象嵌套多达6-7层（Σ( ° △ °|||)︴），显得我牛逼呀，哈哈~~~，是SB吧 - -！。还有一些厂家代码确实非常不错，对象，原型，闭包，命名等等，都是用的溜溜转，也学到不少东西。
  2. 槽点3：代码风格，代码格式，代码规范，规范，规范啊，重要的事情说三遍，包括本公司的代码，和大多数其他厂家的代码，代码几乎没有任何规范，格式缩进命名等等，每次看到那种代码，我真想跳楼，

    本来就一个很小的BUG，因为代码问题，硬是要花半天甚至一天才能找到问题点，然后发现其实就是个变量用错地方，或者是哪个单词写错了。

这一年来，经历了很多事情和看了很多代码，对自己要求也严格了

  1. 变量名可以稍微长点（不能太长哦，:-)），但一定要表达清楚其意义，让人一看到就知道是干什么的（继续吐槽：全局变量漫天飞，还命名毫无语义感，不找找还真不知道是干嘛的，另外也很少见过全局变量用一种约定方式去定义，比如说：前面统一加上个公司英文符号也好撒，或者你前面加个g/global什么的也好啊，个人比较喜欢用g开头去定义全局变量）；
  2. 代码风格，包括缩进，空格的使用，有了进一步的认知和运用；
  3. 另外还就是一种思想：面向对象思想，真的很重要，包括新开发的任务上也运用上了，不过水平有限，也只是简单的运用而已；

好了，很久没记录什么了，也快放假回去过年了，虽然最近烦心事多，还是要好好努力下去不是，30岁或许是道砍，也或许不是，端看自己怎么去看待和对待自己的人生了，多年来的感受只有一点：做自己最热爱的事情，让你能彻夜不眠还乐在其中的事情，那才是人生的乐趣，一味的为了生活而生活何尝不是行尸走肉般的活着。

给自己加把油，加油！

这一年来很艰辛，也很感谢我的兄弟朋友们能一直给与我帮助和鼓励，感谢你们！

最后感谢我的老婆，这几年不管风雨不管中间有多少苦难都不离不弃从无怨言，还一直鼓励着我，同时还给我带来一个很可爱的小闺女，谢谢我的老婆，有你的陪伴和鼓励，我会一直努力下去，加油！

2017年，我来了，哈哈哈哈！

时间： 2024-10-15 14:27:35

微信小程序，学习笔记（一）框架，视图层的相关文章

微信小程序学习笔记-2-常用组件介绍

微信小程序常用组件 组件的定义: 开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发,什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间. 形式: <tagname property="value"> Content goes here </tagname> 例如: <view class="container">

微信小程序学习笔记--20170425--登录验证实现

初探微信小程序已经有几天的时间,跟随极客学院某某老师(只关注技术未关注老师,还请谅解).从微信小程序的框架结构及相关内容.下面以登录验证功能模块,展示近期学习的内容. 需求描述: 对于部分页面添加登录验证,用户未登录的情况下,进入页面,页面自动转向登录页面.登录验证成功后,回调到登录发起页面. 实现思路: 创建全局变量用于存储当前登录用户对象(userInfo).全局方法用于验证登录有效性(checkLoginInfo()).全局方法用于获取当前页面的全路径(getCurrentUrl()).

微信小程序学习笔记1

初步接触微信小程序开发 微信小程序的开发环境 微信小程序是运行在微信环境中的应用,它只能在微信中运行,不能运行在浏览器等其他环境中,微信团队提供了专门开发工具用于小程序的开发,还提供了API,让小程序具备与手机设备和微信交互的能力,例如获取摄像头拍照,访问文件系统等,主要提现在以下三个方面: 获取当前登录微信用户的用户信息 微信支付 使用模版消息向微信发送通知消息 开发微信需要具备一定的前端基础知识,但不是全部,wxml代替html ,wxss代替css,然后就是一些javascript的核心.

微信小程序学习笔记（阶段一）

一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.com/v2040981-197486-1133724.html (三)模仿并写出一个计算器小程序demo 项目结构: pages:存储这各个页面的文件夹 pages内的文件夹(初始有index.logs):分别存储这每个页面,其中一般包含三种文件,*.js.*wxml.*wxss utils:里面装有

微信小程序学习笔记-3-问题

一些在开发微信小程序中常见的问题 页面渲染 微信小程序中规定所有页面上渲染出来的数据,包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中,page({data:{,}}),其实这个page的data感觉就是一个前端可以指定后台对象的一个快捷的方式,在wxml文件中可以用{{}}直接在页面展示page中的对象或数据,这就是说这个page是前端和你的代码唯一的渲染方式,官方文档中有明确的说明,如果想要更改page中的任何一个变量或者json对象,必须要用,th

微信小程序学习笔记

1.在app.json中输入如下代码就会自动在pages下创建welcome文件夹及相应的wxss, wxml, js, json文件 "pages":[ "pages/welcome/welcome" ] 2.在进行wx.for的数据绑定时可以不需要使用{{item.***}}的方式来获取数据,只需要引入数据时在前面加三个小点将对象展开即可 <template is="templateName" data="{{...item}

微信小程序 学习笔记

1.pages 主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面包含四个文件, (1).wxml文件是界面文件: (2).js是事件交互文件,用于处理界面的点击事件等功能: (3).wxss为界面美化文件,让界面显示的更加美观: (4).json为配置文件,用于修改导航栏显示样式等 注意: (1)小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要 (2)文件名称必须与页面的文件夹名称相同,如index文件夹,文件只能是index.wxml.index.wxss.

微信小程序学习笔记（阶段二）

二阶段学习过程: (一)看官方文档的框架.组件.API:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看极客学院第3.4章视频:http://www.php.cn/course/297.html (三)模仿并写出各个demo(模板应用demo.快递查询demo.登陆界面demo) 获取app.js的变量/方法: 前提:在app.js中定义了变量或所需方法 ①在当前页面的*.js最上面定义var app=getApp() ②在需要调用app中变量的方法

微信小程序-学习笔记5-UI布局

flex布局基础.相对定位和绝对定位 flex容器属性: flex-direction决定元素的排列方向:flex-wrap决定元素如何换行: flex-flow是 flex-direction和flex-wrap的简写,如flex-flow:row wrap; justify-content元素在主轴上的对齐方式:align-items元素在交叉轴的对齐方式: flex元素属性: flex-grow当有多余空间时,元素的放大比例:flex-shrink当空间不足时,元素的缩小比例: flex-

微信小程序-学习笔记12-交互反馈

toast.modal.actionsheet: ps:资料来源于微信官方文档及极客学院视频 原文地址:https://www.cnblogs.com/haimengqingyuan/p/8360412.html