微信小程序入门学习笔记

注：所有详情链接均为微信小程序官方文档

一、组件(详情)

swiper：常用于图片轮播

常用属性	值	属性说明
autoplay	false/true	是否自动切换
indicator-dots	false/true	是否显示指示点

swiper-item：仅可放在swiper组件中
image：图片

常用属性	属性说明
src	图片资源地址
binderror	当图片发生错误时触发事件

form：表单
button：按钮

常用属性	值	值说明
open-type	share	触发用户转发

input：输入框
view：视图容器，常用于布局
text：文本

二、数据绑定(详情)

使用双大括号{{}}

三、渲染

wx:for(详情)：

数组下标变量名默认为 index， wx:for-item 可以指定数组当前元素的变量名， 数组变量名默认为
item，wx:for-index 可以指定数组当前下标的变量名。
wx:key，不写会报warning，指定列表中项目的唯一的标识符。
有时需要和<block/>标签结合使用。

wx:if，wx:else(详情)：

判断是否需要渲染该代码块 ，有时需要和<block/>标签结合使用。

四、模板，引用

定义模板(详情)

<template name=“test”> … </template>

引用模板及样式(详情)

wxml文件：<import src=“模板文件路径.wxml”>
wxss文件：@import “模板样式路径.wxss”;

使用模板

<template is=“test”/>

五、事件(详情)

bindtap

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

一般通过data-*自定义属性传输数据，获取属性会去掉data-然后以驼峰命名法命名

六、网络请求(详情)

wx.request({})：请求

属性	属性说明
url	必填，开发者服务器接口地址
method	HTTP 请求方法
data	请求的参数
header	设置请求的 header
success	接口调用成功的回调函数
fail	接口调用失败的回调函数

wx.request({
  url: '',	 	// 必填，开发者服务器接口地址
  method: 'GET',
  data: {
    x: '',		// 请求的参数
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    // 接口调用成功的回调函数
  },
  fail (res) {
  	// 接口调用失败的回调函数
  }
})

七、界面交互(详情)

wx.showToast({})：显示消息提示框

属性	属性说明
title	提示的内容
icon	图标，值为none时不显示图标

 wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        })

八、媒体图片(详情)

wx.previewImage({})：在新页面中全屏预览图片。用户可以进行保存图片、发送给朋友等操作。

属性	属性说明
urls	需要预览的图片链接列表

 wx.previewImage({
      urls: [图片url],
    })

九、路由(详情)

wx.navigateTo({})：跳转到应用内的某个页面，可以返回当前页面

属性	属性说明
url	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连

 wx.navigateTo({
      url: '跳转路径',
    })

十、全局配置app.json(详情)

pages：页面路径列表
tabBar：底部 tab 栏的表现

 "tabBar": {
    "list": [ //  list 接受一个数组，只能配置最少 2 个、最多 5 个 tab
      {
        "pagePath": "页面路径",
        "text": "名称",
        "iconPath": "默认图标路径",
        "selectedIconPath": "选中图标路径"
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  }

十一、页面生命周期(详情)(图片来自于网络)

onLoad——>onShow——>onReady——>onHide——>onShow——>onUnload