零基础学习微信小程序——基础篇

❤支持一下博主呗啾咪❤

六、模板语法

---

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

6.1 数据绑定

6.1.1 普遍写法

{{ message }}

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

6.1.2 组件属性

{{ message }}

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

• 使用 Boolean 类型充当属性
  • 字符串和花括号之间一定不要存在空格，否则会导致识别失败。

6.2 运算

6.2.1 三元运算

6.2.2 算数运算

{{a + b}} + {{c}} + d

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

6.2.3 逻辑判断

6.2.4 字符串运算

{{"hello" + name}}

6.3 列表渲染

6.3.1 wx:for

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

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

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

4. wx:key 绑定的值，有以下几种选择：

   • String 类型，表示循环项中的唯一属性。

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

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

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

5. 只有一层循环的时候，wx:for-item=“item” 和 wx:for-index=“index” 可以省略。

6.3.2 block

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

6.4 条件渲染

6.4.1 wx:if

• 在框架中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块。

  1
  2
  3
  

6.4.2 hidden

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

• 类似 wx:if 。
• 频繁切换用 hidden ，不常使用 wx:if 。
• hidden 属性不要和样式 display 一起使用。

七、小程序事件的绑定

---

1. 小程序绑定事件，通过 bind 关键字来实现。如 bindtap、bindinput、bindchange 等。
2. 不同的组件支持不同的事件。

7.1 wxml

7.2 page

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

7.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 。
2. 支持懒加载。

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

8.4 swiper

微信内置轮播图组件。

1. 轮播图外层容器 swiper 。
2. 每一个轮播项 swiper-item 。
3. 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 <i>likei> abox of
    <b> chocolatesb>
  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 同层级下。
2. 组件 .js 文件中，存放事件回调函数的时候，必须要存放在 methods 中。

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

1. 父组件（页面）向子组件传递数据通过
   • 在子组件上进行接收
   • 把这个数据当成是 data 中的数据直接用即可。

<Tabs aaa="a123a">Tabs>

// 子组件js

properties: {
  // 需要接收的数据的名称
  aaa: {
    // type:要接收的数据的类型
    type: String,
    // value: 默认值
    value: ''
  }
}

<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. 父组件通过属性的方式给子组件传递参数。
2. 子组件通过事件的方式向父组件传递参数。

十、小程序生命周期

---

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

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 时触发。