微信小程序开发笔记

配置

app.json中可以配置的东西有

pages: 配置页面的相关链接信息, 所有的页面都需要在微信小程序的pages中注明才能够被正常调用

window: 可以配置页面中的整体风格, 默认页面的窗口表现, 如配置页面的标题文字, 页面顶部的颜色
需要注意的时, 目前页面的window对象可以配置页面的导航栏的信息了
配置navigationStyle为custom, 即可配置页面中顶部导航栏的信息

tabbar: 配置底部的tab的表现, 可以为tab配置小图标及配置文字等

networkTimeout: 配置网络超时的时间, 匹配对应的网络请求的相应超时时间

debug: 是否开启debug的模式, 打印内容会在页面的控制台实时显示

app对象的相关生命周期函数

onLaunch: 监听小程序的chushihua,初始化完成的时候, 会触发一次onLaunch, 全局只触发一次

onShow: 监听小程序的显示, 当小程序启动或动后台进入前台显示, 就会触发一次onShow

onHide: 监听小程序的隐藏, 当小程序从前台进入后台就会触发一次onHide

onError: 兼容小程序的脚本错误

注意下小程序的销毁: 当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。 其他情况只会退出到后台

我们使用getApp()方法, 可以在其他地方获取到小程序的实例, 从而可以实现在小程序内页调用全局中的方法的能力

Page() 函数

Page函数用来注册一个页面, 接收一个object参数, 使用它类指定页面的初始数据, 生命周期函数, 事件处理函数等

Page()函数的主要的参数有这些

data: 挂载页面的初始数据

onLoad: 生命周期函数, 监听页面的加载

onReady: 生命周期函数, 监听页面的初次渲染完成

onShow: 生命周期函数, 监听页面的显示

onHide: 生命周期函数, 监听页面的隐藏

onUnload: 生命周期函数, 监听页面卸载, 当redirectTo或navigateBack的时候调用。

onPullDownRefresh: 页面相关时间处理函数, 监听用户的下拉动作

onReachBottom: 页面上拉触底时间的处理函数

onShareAppMessage: 用户点击右上角转发

onPageScroll: 页面滚动触发事件的处理函数

onTabItemTap: 当前是tab页的时候, 点击tab时触发, 此方法仅在点击当前的tab的时候会触发, 点击其他tab则直接进行跳转

page实例下的事件处理函数

Page.prorotype.route: 获取当前页面的路径(使用)

Page.prototype.setData: 传入对象, 用于将数据从逻辑层发送到视图层, 需要注意的时这个操作和react一样是异步的, 同时我们可以在第二个参数中传入一个callback来实现当data设置之后的回调函数

注意:
直接修改this.data而不调用this.setData是无法改变页面的状态的
单次设置的数据不能超过1m, 尽量避免一次设置过多的数据

getCurrentPages(): 函数用户获取当前页面栈的实例, 以数组形式按栈的顺序给出, 第一个元素为首页, 最后一个元素为当前页面

列表渲染

1
<view wx:for="{{array}}"> {{item}} </view>

条件渲染

1
2
3
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

模板及调用方法

模版的不同文件调用, 需要特别注意的是, 即使是import标签, 也需要有一个闭合标签, 否则会报错

1
<import src="./staffName/staffName.wxml"/>

import 的作用域

C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

1
2
3
4
5
6
7
8
9
10
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

include

include 可以将目标文件除了 

1
2
3
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

数据绑定

绑定数据中的id, 从而实现类似于 item + 数据中的id的效果

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

data中的值也可以用来进行操作判断

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

当我们需要关键字的时候, 需要将关键字放在双引号之内

1
<checkbox checked="{{false}}"> </checkbox>

不要直接写 checked=”false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

三元运算

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

1
<view wx:if="{{length > 5}}"> </view>

对象的参数

1
<template is="objectCombine" data="{{for: a, bar: b}}"></template>

使用此方法可以从data实例中取出a和b的值, 分别赋予给for和bar

使用扩展运算符

1
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

1
2
3
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

列表循环当我们循环的内容中有空格的时候, 会被循环渲染为字符串, 这点需要注意

1
2
3
4
<block wx:for="{{[1, 2, 3]}} ">  // 这里多了一个空格
<text> {{index}}: </text>
<text> {{item}} </text>
</block>  // 编译之后会变成逐一解析字符串

事件

touchstart: 手指触摸动作开始
touchmove: 手指触摸后移动
touchcancel: 手指触摸动作被打断
touchend: 手指触摸动作结束
tap: 手指触摸后马上离开
longpress: 手指触摸后抄错350ms再厉害, 如果制定了事件回调函数并触发了这个事件, tap事件将不会触发
transitionend: 在再wxss transition或 wx.createAnimation动画结束后触发
transitionstart: 再一个wxss animation动画开始时触发
animationiteration: 在一个 WXSS animation 一次迭代结束时触发
animationend: 在一个 WXSS animation 动画完成时触发

事件的绑定

目前实现了两种方法, 一个是bind, 一个是catch

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡

事件的捕获

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

1
2
3
4
5
6
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

在上面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

wxs模块

每一个wxs文件和wxs标签都是一个单独的模块

每个模块都有自己独立的作用域

可以使用module.exports来暴露需要在wxs外使用的模块或变量

1
2
3
<wxs src="./index.wxs" module="tools" /> // module表示当前标签的模块名, 必填
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

如上, 我们在index.wxs中暴露出了msg和bar, FOO这几个方法, 暴露出来之后就可以在引入了这个wxs标签的wxml文件中使用了

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

在引用的时候, 需要注意下面几点

  1. 只能引用wxs文件模块. 而且必须使用绝对路径

  2. wxs会自动初始化为单例对象

  3. 如果一个wxs模块在定义之后没有被引用, 则这个模块不会被解析与运行

module属性

module 属性是当前 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

1
2
3
4
5
6
7
<wxs module="foo">
	var some_msg = "hello world";
	module.exports = {
		msg : some_msg,
	}
</wxs>
<view> {{foo.msg}} </view>

wxss样式

样式导入

1
2
3
4
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联样式

1
<view style="color:{{color}};" />

这样就可以通过js去控制color的颜色了

选择器

目前支持的选择器有: 类选择器, id选择器, tagname选择器, 组合选择器, before, after伪类选择器

全局样式和局部样式

定义在app.wxss中的是全局样式, 定义在每个页面的wxss文件中的样式为局部样式

组件模板和样式

组件模版的写法与页面模板相同。组件模版与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

1
2
3
4
5
<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
1
2
3
4
5
6
7
<!-- 引用组件的页面模版 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

1
2
3
4
5
6
7
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

1
2
3
4
5
6
<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

使用时，用 slot 属性来将节点插入到不同的slot上。

1
2
3
4
5
6
7
8
9
<!-- 引用组件的页面模版 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

组件的基本使用方法

  1. 右键, 新建一个component, 之后就会自动新建一个component的组件模板

  2. 需要使用多个插槽的时候, 可以在Component函数中传入参数options, 并设置multipleSlot为true, 标志支持多个插槽

3.在对应的json文件中, 默认是有 component参数 为 true, usingComponents传入一个对象, 表示这个组件所使用的组件情况

本文标题:微信小程序开发笔记

文章作者:ChangerHe

发布时间:2017-04-05, 22:14:14

原始链接:http://blog.changerhe.cn/2017/04/05/微信小程序开发笔记/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 配置
  2. 2. app对象的相关生命周期函数
  3. 3. Page() 函数
    1. 3.1. page实例下的事件处理函数
    2. 3.2. 列表渲染
    3. 3.3. 条件渲染
    4. 3.4. 模板及调用方法
      1. 3.4.1. import 的作用域
    5. 3.5. include
    6. 3.6. 数据绑定
    7. 3.7. 列表渲染
    8. 3.8. 事件
      1. 3.8.1. 事件的绑定
      2. 3.8.2. 事件的捕获
  4. 4. wxs模块
    1. 4.1. require函数
    2. 4.2. module属性
  5. 5. wxss样式
  6. 6. 组件模板和样式
|