微信小程序——语法篇
Posted 几何心凉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序——语法篇相关的知识，希望对你有一定的参考价值。
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">Hidden</view>
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绑定的值 有如下选择
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'
]
)
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">1</view>
<view wx:elif="true">2</view>
<view wx:else>3</view>
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特别注意
1.绑定事件是不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
2.事件传值 通过标签自定义属性的方式和value
<input bindinput="handleInput" data-item="100" />
3.事件触发时获取数据
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 作为视觉稿的标准。
使⽤步骤：
-
确定设计稿宽度 pageWidth
-
计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
-
在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。
3.2样式导入
wxss中直接就⽀持，样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import
语句可以导⼊外联样式表，只⽀持相对路径。
⽰例代码：
/** common.wxss **/
.small-p
padding:5px;
/** app.wxss **/
@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
1.文本标签
2.只能嵌套text
3.长按文字可以复制，（只有该标签有这个功能）
4.可以对空格 回车 进行编码
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolan | false | 文本是否可选 |
| decode | Boolan | false | 是否解码 |
4.2.1代码
<text selectable="false" decode="false">
普 通
</text>
4.3image
1.图片标签，image组件默认宽度为320px，高度为240px
2.支持懒加载
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" 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 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"
>
default
</button>
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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
<!-- 这是自定义组件的内部WXML结构 -->
<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>
7.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.组件-自定义组件传参
1.父组件通过属性的方式给子组件传递参数
2.子组件通过事件的方式向父组件传递参数
7.1过程
1.父组件把数据**tabs**传递到子组件的tabItems属性中
2.父组件监听onMyTab事件
3.子组件触发bindmytap中的mytap事件
自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象
4.父—>子动态传值 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');
)
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 | f 以上是关于微信小程序——语法篇的主要内容，如果未能解决你的问题，请参考以下文章 |