零基础学习微信小程序(下)

简介: WXML (WeiXin Markup Language) 是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的逻辑。

零基础学习微信小程序(下)


六、模板语法


WXML (WeiXin Markup Language) 是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的逻辑。


6.1 数据绑定


6.1.1 普遍写法

<view>{{ message }}</view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})


6.1.2 组件属性


<view>{{ message }}</view>
Page({
  data: {
    id: 0
  }
})
  • 使用 Boolean 类型充当属性
  • 字符串和花括号之间一定不要存在空格,否则会导致识别失败。


6.2 运算


6.2.1 三元运算

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


6.2.2 算数运算


<view>{{a + b}} + {{c}} + d</view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3,
  }
})


6.2.3 逻辑判断

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


6.2.4 字符串运算

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


6.3 列表渲染


6.3.1 wx:for


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


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


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


  1. wx:key 绑定的值,有以下几种选择:


  • String 类型,表示循环项中的唯一属性。
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

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

list[1,2,3,4,5]
wx:key="*this"

1.只有一层循环的时候,wx:for-item="item" 和 wx:for-index="index" 可以省略。


6.3.2 block


  • 渲染一个包含多字节的结构块 block 最终不会变成真正的 DOM 元素。


6.4 条件渲染


6.4.1 wx:if


  • 在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块。
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>


6.4.2 hidden

    <view hidden="{{condition}}">True</view>
  • 类似 wx:if 。
  • 频繁切换用 hidden ,不常使用 wx:if 。
  • hidden 属性不要和样式 display 一起使用。


七、小程序事件的绑定


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


  1. 不同的组件支持不同的事件。


7.1 wxml


<input bindinput="handleInput" />


7.2 page

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


.3 特别注意


  1. 绑定事件时不能带参数,不能带括号,以下为错误写法:
<input bindinput="handleIput(100)" />

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


八、常见组件


8.1 view


  1. 代替原来的 div 标签。
<view hover-class="h-class">
点击我试试
</view>


8.2 text


  1. 文本标签。
  2. 只能嵌套 text 。
  3. 长按文字可以复制(只有该标签有这个功能)。
  4. 可以对空格 回车进行编码。
属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
decode Boolean false 是否解码


8.3 image


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


  1. 支持懒加载。
属性名 类型 默认值 说明
src String


图片资源地址
mode String 'scaleToFill' 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载

8.4 swiper


微信内置轮播图组件。


  1. 轮播图外层容器 swiper 。


  1. 每一个轮播项 swiper-item 。


  1. swiper 标签存在默认样式。


  • width:100%
  • height:150px
  • image 存在默认宽度和高度(1125 * 352 px)
  • swiper 高度无法实现由内容撑开。


4.先找出来原图的宽度和高度,等比例给 swiper 定宽度和高度。

  • swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度


8.4.1 swiper


  • 滑块视图容器
属性名 类型 默认值 说明
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 s是否轮播


8.5 navigator


导航组件,类似超链接标签

块级元素,默认会换行,可以直接加宽度和高度。

属性名 类型 默认值 说明
target String self 在哪个目标上发生跳转,默认当前小程序,可选值 self/miniProgram
url String


当前小程序的跳转链接
open-type String navigate 跳转方式

open-type 有效值

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


8.6 rich-text


富文本标签:

可以将字符串解析成对应标签,类似 Vue 中的 v-html 功能。

通过 HTML String 渲染

<div class="div_class">
  <h1>
    Title
  </h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;abox of
    <b>&nbsp;chocolates</b>
  </p>
</div>


8.7 button


<button
   type="defult"
   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 红色


open-type 的合法值

说明
contact 打开客服对话,如果用户在对话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息。
share 触发用户转发,不能把小程序分享到朋友圈中的。
getPhoneNumber 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息。
getUserInfo 获取用户信息,可以从 binggetuserinfo 回调中获取到用户信息。
launchApp 打开 APP ,可以通过 app-parameter 属性设定向 APP 传的参数。
openSetting 打开授权设置页。
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。


8.8 icon


属性 类型 默认值 必填 说明
type string


icon 的类型,有效值:success,success_no_circle,info,warn,waiting,cancel
size number/string 23 icon 的大小
color string


icon 的颜色,同 css 的 color


8.9 radio


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


  • 需要搭配 radio-group 一起使用。


8.10 checkbox


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


  • 需要搭配 checkbox-group 一起使用。


九、自定义组件


类似 Vue 或者 React 中的自定义组件。


  • 小程序允许使用自定义组件的方式来构建页面。


9.1 创建自定义组件


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


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


  1. 页面 .js 文件中,存放事件回调函数的时候,存放在 data 同层级下。


  1. 组件 .js 文件中,存放事件回调函数的时候,必须要存放在 methods 中。


9.2 父组件向子组件传递数据


  1. 父组件(页面)向子组件传递数据通过
  • 在子组件上进行接收
  • 把这个数据当成是 data 中的数据直接用即可。
<!-- 父组件wxml -->
<Tabs aaa="a123a"></Tabs>
// 子组件js
properties: {
  // 需要接收的数据的名称
  aaa: {
    // type:要接收的数据的类型
    type: String,
    // value: 默认值
    value: ''
  }
}
<!-- 子组件的wxml -->
<view>
</view>


9.3 slot 插槽


  • 语法同 vue。


9.5 定义段与实例方法


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


9.6 组件-自定义组件传参


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


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


十、小程序生命周期


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


10.1 应用生命周期

属性 类型 默认值 必填 说明
onLaunch function


监听小程序初始化。(在应用第一次启动的时候,获取用户的个人信息)
onShow function


监听小程序启动或切前台。(对应用的数据或者页面效果重置)
onHide function


监听小程序切后台。(暂停或者清楚定时器)
onError function


错误监听函数。(在应用发生代码报错的时候,收集用户的错误信息,通过异步请求,将错误的信息发送后台去)
onPageNotFound function


页面不存在监听函数。(如果页面不存在了,通过js的方式来重新跳转页面,重新跳到第二个首页)


10.2 页面生命周期

属性 类型 说明
data Object 页面的初始数据。
onLoad function 生命周期回调—监听页面加载。(发送异步请求来初始化页面数据)
onShow function 生命周期回调—监听页面显示。
onReady function 生命周期回调—监听页面初次渲染完成。
onHide function 生命周期回调—监听页面隐藏。
onUnload function 生命周期回调—监听页面卸载。
onPullDownRefresh function 监听用户下拉动作。(页面的数据或者效果重新刷新)
onReachBottom function 页面上拉触底事件的处理函数。(上拉加载下一页数据)
onShareAppMessage function 用户点击右上角转发。
onPageScroll function 页面滚动触发事件的处理函数。
onResize function 页面尺寸改变时触发。
onTabltemTap function 当前是 Tab 页时,点击 Tab 时触发。


相关文章
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的学习自律养成小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
10天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
20 5
|
9天前
|
小程序 前端开发 JavaScript
微信小程序|英语学习交流平台小程序
微信小程序|英语学习交流平台小程序
|
9天前
|
小程序 前端开发 安全
微信小程序|大学生党务学习平台的设计与实现
微信小程序|大学生党务学习平台的设计与实现
|
9天前
|
小程序 前端开发 JavaScript
微信小程序|小程序公考学习平台的设计与实现
微信小程序|小程序公考学习平台的设计与实现
|
9天前
|
小程序 前端开发 安全
大学生党务学习平台|基于微信小程序实现大学生党务学习平台
大学生党务学习平台|基于微信小程序实现大学生党务学习平台
|
9天前
|
小程序 前端开发 JavaScript
微信小程序|语言课学习系统的设计与实现
微信小程序|语言课学习系统的设计与实现
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
18 4
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章