微信小程序笔记

目录结构说明

主体文件，由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.js	否	小程序公共样式表

页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	小程序逻辑( 微信小程序没有window和document对象 )
wxml	是	小程序公共设置( WeiXin Markup Language，不是HTML语法 )
wxss	否	页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位，微信专属响应式像素 )
json	否	页面配置

配置说明

app.json 配置项列表

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]

window属性配置

“window”:{
“backgroundTextStyle”:“light”,
“navigationBarBackgroundColor”: “#33FF00”,
“navigationBarTitleText”: “我的微信小程序”,
“navigationBarTextStyle”:“black”
}

tabBar属性配置

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

组件

视图组件

view

视图容器，相当于html中的div

swiper

滑块视图容器

基础组件

icon

图标

text

文本

progress

表单组件

button

按钮

form

表单

image

图片

导航组件

navigator

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

视图层

WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的
结构。

数据绑定

<!--wxml-->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

wx:for

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

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

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

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

block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

将整个wxml定义成模板

<!--wxml-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

在其他wxml中引用模板

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

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

引用

import

import 可以在该文件中使用目标文件定义的 template ，如：
在 item.wxml 中定义了一个叫 item 的 template ：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item 模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的template。

include

include 可以将目标文件除了 < template/> < wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，
如：

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
 
<!-- header.wxml -->
<view>header</view>
 
<!-- footer.wxml -->
<view>footer</view>

WXSS

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

样式导入

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
 padding:15px;
}

JS(WXS)

注册程序

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App({
  onLaunch(options) {
    // Do something initial when launch.
  },
  onShow(options) {
    // Do something when show.
  },
  onHide() {
    // Do something when hide.
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'

注册页面

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、
事件处理函数等。

初始数据

data 是页面第一次渲染使用的初始数据。
页面加载时， data 将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON的类型：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期函数说明

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

<!--绑定点击事件-->
<view bindtap="viewTap">click me</view>

Page({
  viewTap() {
    console.log('view tap')
  }
})

setData

Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

<view>{{text}}</view>
<button bindtap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bindtap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">Add new data</button>

Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{ text: 'init data' }],
    object: {
      text: 'init data'
    }
  },
  changeText() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum() {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
    changeItemInArray() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text': 'changed data'
    })
  },
  changeItemInObject() {
    this.setData({
      'object.text': 'changed data'
    })
  },
  addNewField() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

自定义事件

1. 冒泡事件
   a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
   b) 冒泡事件列表：
   https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
2. 非冒泡事件
   a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
   b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件
   https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

绑定事件

1. bind绑定：事件绑定不会阻止冒泡事件向上冒泡

<view bindtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

2. catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

<view catchtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

传递事件数据

1. data-’传递数据key’ = value

<block wx:for='{{listArr}}' wx:key='{{index}}'>
      <view catchtap='toDetail' data-index='{{index}}'>
        <template is='listTmp' data='{{...item}}'/>
      </view>
</block>

/**
   * 点击跳转到详情页
   */
toDetail(event){
    let index = event.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/detail/detail?index=' + index,
    })
  },

<swiper-item>
      <image data-index='1' src='/images/detail/carousel/01.jpg'></image>
    </swiper-item>
        <swiper-item>
      <image data-index='0' src='/images/detail/carousel/02.jpg'></image>
    </swiper-item>
        <swiper-item>
      <image data-index='2' src='/images/detail/carousel/03.jpg'></image>
    </swiper-item>
        <swiper-item>
      <image data-index='3' src='/images/detail/carousel/04.jpg'></image>
    </swiper-item>
  </swiper>
  
 //轮播图跳转
  carouseToDetail(event){
    let index = event.target.dataset.index;
    wx.navigateTo({
      url: '/pages/detail/detail?index=' + index,
    })
  },

currentTarget 和target的区别

1. target指向的是触发事件的元素
2. currentTarget指向的是捕获事件的元素

app应用存储公共数据

1. 存取数据
   App({
   data: {
   isPlay: false,
   playPageIndex: null,
   movies: {}
   }
   })

2. 读取数据
   let app = getApp();
   app.data.isPlay = false;
   备注：app方法配置对象中的属性和方法均为app应用实例的属性和方法

WXS语法参考

.wxs 文件

在微信开发者工具里面，右键可以直接创建 .wxs 文件，在其中直接编写 WXS 脚本。

示例代码：

// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};

module 对象

每个 wxs 模块均有一个内置的 module 对象。

• 属性
  exports: 通过该属性，可以对外共享本模块的私有变量与函数。

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
 return d;
}
module.exports = {
 FOO: foo,
 bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

require函数

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

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

示例代码：

在开发者工具中预览效果

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />

数据类型

number ： 数值
string ：字符串
boolean：布尔值
object：对象
function：函数
array : 数组
date：日期
regexp：正则