微信小程序——语法篇

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/屏幕宽度)
iphone51rpx=0.42px1px=2.34rpx
iphone61rpx=0.5px1px=2rpx
iphone6Plus1rpx=0.552px1px=1.81rpx

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

使⽤步骤:

  1. 确定设计稿宽度 pageWidth

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

  3. 在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"的组件
elementview选择所有view组件
element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件
nth-child(n)view:nth-child(n)选择某个索引的标签
::afterview::after在view组件后边插入内容
::beforview::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.可以对空格 回车 进行编码

属性名类型默认值说明
selectableBoolanfalse文本是否可选
decodeBoolanfalse是否解码

4.2.1代码

<text selectable="false" decode="false">&nbsp;</text>

4.3image

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

2.支持懒加载

属性名类型默认值说明
srcString图片资源地址
modeString‘scaleToFill’图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载

mode 有效值:

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

4.4swiper微信内置轮播图组件

属性名类型默认值说明
indication-dotsBooleanfalse是否显示面板指示点
indication-colorColorrgba(0,0,0,.3)指示点颜色
indication-activ-colorColor#000000当前选中的指示点颜色
autoplayBooleanfalse是否自动切换
intervalNumber5000自动切换时间
circularBooleanfalse是否循环轮播

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

属性名类型默认值说明
tagretStringself在那个目标上发生跳转,默认当前小程序,可选值self/miniProgram
urlString当前小程序的跳转链接
open-typeStringnavigate跳转方式

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&nbsp;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>
属性类型默认值必填说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainstringfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带loading图标
form-typestring用于’‘组件,点击分别会触发’'组件的submit/reset事件
open-typestring微信开放能力

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

属性类型默认值必填说明
typestringicon的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
sizenumber/string23icon的大小
colorstringicon的颜色,用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构造器可以指定组件的属性、数据、方法等

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

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应用生命周期

属性类型默认值必填说明
onLaunchfunction监听小程序初始化
onShowfunction监听小程序启动或切后台
onHidefunction监听小程序切后台
onErrorfunction错误监听函数
onPageNotFoundfunction页面不存在监听函数

5.2页面生命周期

属性类型说明
dataObject页面的初始数据
onLoadfunction生命周期回调-监听页面加载
onShowfunction生命周期回调-监听页面显示
onReadyfunction生命周期回调-监听页面初次渲染完成
onHidefunction生命周期回调-监听页面隐藏
onUnloadfunction生命周期回调-监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
onReachBottonfunction页面上拉触底事件的处理函数
onShareAppMessagef

以上是关于微信小程序——语法篇的主要内容,如果未能解决你的问题,请参考以下文章

设计微信小程序是按照啥尺寸做?

微信小程序的尺寸单位都有哪些?

rpx是微信小程序WXSS的尺寸单位

微信小程序基本语法介绍

微信小程序开发怎么实现尖嘴指示框?

微信小程序3缓存与循环

(c)2006-2024 SYSTEM All Rights Reserved IT常识