1.模板语法

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

1.1数据绑定

1.1.1普通写法

<view>{{message}}view>

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

1.1.2组件属性

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

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

1.1.3bool类型

不要直接写checked=“false”,其计算结果是一个字符串

<checked checked="{{false}}"><checked>

1.2运算

1.2.1三元运算

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

1.2.2算数运算

<view>{{a+b}}+{{c}}+d<view>

Page({data:{a:1,b:2,c:3}})

1.2.3逻辑判断

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

1.2.4字符串运算

<view>{{"hello"+name}}<view>

Page({data:{name:"mina"}})

1.2.5注意

花括号和引号之间如果有空格，将最终被解析成为字符串

1.3列表渲染

1.3.1wx:for

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

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

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

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

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

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

保留字 *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'   }] }})

1.3.2block

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

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

1.4条件渲染

1.4.1wx:if

在框架中，使用wx:if="{{condition}}"判断是否需要渲染该代码块：

 <view wx:if="{{false}}">1view>  <view wx:elif="{{true}}">2view>  <view wx:else>3view>

1.4.2hidden

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

类似 wx:if

频繁切换用hidden

不经常使用用wx:if

2.小程序事件的绑定

小程序中绑定事件通过bind关键字来实现。如：bindtap、bindinput、bindchange等

不同的组件支持不同的事件，具体看组件的说明即可

2.1wxml

<input bindinput="handleInput" />

2.2page

Page({  // 绑定的事件  handleInput: function(e) {    console.log(e);    console.log("值被改变了"); }})

2.3特别注意

绑定事件是不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

事件传值 通过标签自定义属性的方式和value

<input bindinput="handleInput" data-item="100" />

事件触发时获取数据

  handleInput: function(e) {    // {item:100}   console.log(e.currentTarget.dataset)    // 输入框的值   console.log(e.detail.value); }

3.样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述WXML的组件样式。

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

响应式⻓度单位 rpx

样式导⼊

3.1尺寸单位

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

设备	rpx换算px（屏幕宽度/750）	px换算rpx（750/屏幕宽度）
iphone5	1rpx=0.42px	1px=2.34rpx
iphone6	1rpx=0.5px	1px=2rpx
iphone6Plus	1rpx=0.552px	1px=1.81rpx

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

使⽤步骤：

1. 确定设计稿宽度 pageWidth

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

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

3.2样式导入

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import

语句可以导⼊外联样式表，只⽀持相对路径。

⽰例代码：

.small-p {  padding:5px; }

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

3.3. 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

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

⽬前⽀持的选择器有：

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

4.常见组件

常见布局组件

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

4.1view

代替原来的div标签

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

4.2text

文本标签

只能嵌套text

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

可以对空格 回车 进行编码

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

4.2.1代码

<text selectable="{{false}}" decode="{{false}}">   普 通  text>

4.3image

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

支持懒加载

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

mode 有效值：

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

4.4swiper微信内置轮播图组件

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

4.5navigator导航组件 类似超链接标签

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

open-type有效值

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

4.6rich-text富文本标签

可以将字符串解析成对应标签，类似Vue种 v-html功能

代码：

// 1   index.wxml 加载 节点数组 <rich-text nodes="{{nodes}}" bindtap="tap">rich-text>// 2 加载 字符串 <rich-text nodes=''>rich-text>    // index.js    Page({  data: {    nodes: [{      name: 'div',      attrs: {        class: 'div_class',        style: 'line-height: 60px; color: red;'     },      children: [{        type: 'text',        text: 'Hello World!'     }]   }] },  tap() {    console.log('tap') }})

4.6.1nodes属性

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

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

文本节点：type=text

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

注意：

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

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

attrs 属性不⽀持 id ，⽀持 class 。

name 属性⼤⼩写不敏感。

如果使⽤了不受信任的 HTML

节点，该节点及其所有⼦节点将会被移除。

img 标签仅⽀持⽹络图⽚。

4.7button按钮组件

代码：

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

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	string	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	获取用户手机号，可以在从bindgetphonebunber回调中获取到用户信息
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter设置设定向APP的参数
openSetting	打开授权设置页
feedback	打开”意见反馈“页面，用户可以提交反馈内容并上传日志，开发者可以登录小程序管理后台进入左侧菜单“客服反馈”页面获取到反馈内容

4.8icon

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

代码:

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>

4.9radio单选框

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

需要搭配radio-group一起使用

4.10checkbox复选框

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

需要搭配checkbox-group一起使用

4.11自定义组件

1.创建自定义组件

类似于页面，一个组件由JSON wxml wxss js四个文件组成

在微信开发者工具中新建文件夹名为components，右键新建文件夹，新建文件夹右键新建component，会得到响应的四个文件

2.声明组件

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

{“component”:true}

3.编辑组件

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

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

<view class="inner"> {{innerText}}    <slot>slot>view>

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

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

.inner {  color: red; }

4.注册组件

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

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

5.声明引入自定义组件

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

index.wxml

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

6.页面中使用自定义组件

<view>    <my-header inner-text="Some text">    <view>用来替代slot的view>    my-header>view>

4定义段与示例方法

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	否	组件生命周期函数，在组件实例被从页面节点树移除时执行

7.组件-自定义组件传参

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

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

7.1过程

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

父组件监听onMyTab事件

子组件触发bindmytap中的mytap事件

​ 自定义组件触发事件时，需要使用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.jsComponent({  properties: {    tabItems:{      type:Array,      value:[]   } },    data: { },    methods: {    handleItemActive(e){      this.triggerEvent('mytap','haha');   } }})

5.小程序的生命周期

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

5.1应用生命周期

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

5.2页面生命周期

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

来源地址：https://blog.csdn.net/JHXL_/article/details/126793770