小程序声明周期和基本语法

模板语法:

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

数据绑定

普通写法:

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性:

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

Page({
  data: {
    id: 0
  }
})

列表渲染:

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

wx:key 用来提高数组渲染的性能

wx:key 绑定的值 有如下选择

1.string 类型，表示 循环项中的唯一属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"

2. 保留字 *this ，它的意思是 item 本身 ，*this 代表的必须是 唯一的字符串和数组。

list:[1,2,3,4,5]

wx:key="*this"

代码：

<view wx:for="{{array}}" wx:key="id">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
    }, {
      id:1,
      message: 'bar'
    }]
  }
})

block: 渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

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

条件渲染：

data:{
condition:0
}

<!-- 条件渲染 -->
<view wx:if="{{condition===0}}">满足显示为0</view>
<view wx:else>不满足显示为1</view>
<view hidden="{{false}}">显示</view>

 hidden:

<view hidden="{{condition}}"> True </view>

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

事件绑定：

  // 声明一个函数
  clickHandler(){
    console.log('1')
  },

<!-- 
  事件绑定
  1.声明事件函数 (data同级声明一个函数)
  2.给元素绑定事件 bind 固定写法 tap就是click

 -->
<button bind:tap="clickHandler" type="primary">按钮</button>

事件传值 通过标签自定义属性的方式 data- 固定写法

<button bind:tap="clickHandler" data-num="{{2}}" type="primary">按钮</button>

// 声明一个函数 typeof 检测数据类型
  clickHandler(e){
    console.log(e.target.dataset.num)
  },

 input 事件

<!-- input 事件 -->
<input type="text" bind:input="inputHandler"/>
<view>{{msg}}</view>

/* input 函数 */
  inputHandler(e){
  console.log(e.detail.value),
  this.setData({
    msg:e.detail.value
  })
  },

样式 WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

与 CSS 相比，WXSS 扩展的特性有：

• 响应式长度单位 rpx

• 样式导入

尺寸单位

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

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth

2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。

3. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

样式导入:

wxss中直接就支持，样式导入功能。

也可以和 less中的导入混用。

使用@import语句可以导入外联样式表，只支持相对路径。

示例代码：

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

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

选择器:

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
nth-child(n)	view:nth-child(n)	选择某个索引的标签
::after	view::after`	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

常见组件：

重点讲解小程序中常用的布局组件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等。

view

代替 原来的 div 标签

  <view hover-class="h-class">
  点击我试试
  </view>

text

1. 文本标签

2. 只能嵌套text

3. 长按文字可以复制（只有该标签有这个功能）

4. 可以对空格 回车 进行编码

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

代码 

  <text selectable="{{ false }}" decode="{{ false }}">
    普&nbsp;通
  </text>

image

1. 图片标签，image组件默认宽度320px、高度240px

2. 支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode 有效值：mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

 swiper

微信内置滑动组件。

 默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否循环轮播

swiper：滑块视图容器。

swiper-item：滑块 默认宽度和高度都是100% 

navigator

导航组件 类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

 open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

rich-text

富文本标签。可以将字符串解析成 对应标签，类似 vue中 v-html功能

代码

// 1   index.wxml  加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> 
 
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

nodes属性：

nodes属性支持 字符串 和 标签节点数组

属性	说明	类型	必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

• nodes 不推荐使用 String 类型，性能会有所下降。

• rich-text 组件内屏蔽所有节点的事件。

• attrs 属性不支持 id ，支持 class 。

• name 属性大小写不敏感。

• 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。

• img 标签仅支持网络图片。

button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
  default
</button>

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 `` 组件，点击分别会触发 `` 组件的 submit/reset 事件
open-type	string		否	微信开放能力

 size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

 form-type 的合法值

值	说明
submit	提交表单
reset	重置表单

open-type 的合法值

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明
share	触发用户转发，使用前建议先阅读使用指引
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置页
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

open-type 的 contact的实现流程

将小程序 的appid 由测试号改为 自己的appid

• 登录微信小程序官网，添加 客服 - 微信

• 就是干！

icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的color

 

 代码:

js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
  }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

radio

可以通过 color属性来修改颜色

 checkbox

可以通过 color属性来修改颜色。

 需要搭配 checkbox-group 一起使用

自定义组件

类似 vue 或者 react 中的自定义组件，小程序允许我们使用自定义组件的方式来构建页面

创建自定义组件：

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者工具中快速创建组件的文件结构

在文件夹内components/myHeader，创建组件 名为 myHeader

 

 声明组件：

首先需要在组件的 json 文件中进行自定义组件声明

myHeader.json

{
  "component": true
}

编辑组件：同时，还要在组件的 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

slot表示插槽，类似vue中的slot

myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

 在组件的 wxss文件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注册组件：

在组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

myHeader.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

声明引入自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径：index.wxml

{
	// 引用声明
  "usingComponents": {
  	// 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
  }
}

 页面中使用自定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

其他属性

定义段与示例方法

Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参见下文
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染
observers	Object	否	组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件
created	Function	否	组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用 setData ，参见 组件生命周期
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，参见 组件生命周期
ready	Function	否	组件生命周期函数，在组件布局完成后执行，参见 组件生命周期
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行，参见 组件生命周期
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行，参见 组件生命周期

组件-自定义组件传参

• 父组件通过属性的方式给子组件传递参数

• 子组件通过事件的方式向父组件传递参数

过程

• 父组件 把数据 {{tabs}} 传递到 子组件的 tabItems 属性中

• 父组件 监听 onMyTab 事件

• 子组件 触发 bindmytap 中的 mytap 事件

  1. 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象

• 父 -> 子 动态传值 this.selectComponent("#tabs");

父组件代码

// page.wxml 

<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
  内容-这里可以放插槽
</tabs>

// page.js
  data: {
    tabs:[
      {name:"体验问题"},
      {name:"商品、商家投诉"}
    ]
  },
  onMyTab(e){
    console.log(e.detail);
  },

子组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
    }
  }
})

小程序生命周期

分为应用生命周期和页面生命周期

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。

页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

页面生命周期图解