微信小程序

onLoad：页面加载方法

onReady：页面渲染方法

onShow：监听页面显示的方法

onHide: 页面隐藏方法

onUnload：页面卸载方法

onPullDownRefresh：监听用户下拉动作

onReachBottom：监听页面触底方法

onShareAppMessage：监听分享方法

1.5 页面渲染

数据驱动

小程序是基于MVVM模式实现的，因此实现了数据驱动，定义什么数据就渲染什么数据

插值语法

伪js环境加减乘除三元可以{{数据}}

更新数据

setData( {key: value} )

key：是要更新的数据名称，可以是直接属性，也可以间接属性

例：let obj = { a: { b: { c: 123 , d: 456} } }

this.setData( {'a.b.c' : 200} )

就是将对象a中的b中的c属性值改为200 d不变

1.6 属性

共有属性

id: 添加id

class: 添加类名

style: 添加样式

hidden: 隐藏组件属性值为布尔值默认false显示

data-name: 添加自定义数据

bind | catch：添加事件 bind绑定的事件会冒泡 catch不冒泡

特有属性

像view中的特有属性有：
属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态（阻止冒泡）
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

1.7 事件

冒泡事件

touchstart：触摸开始

touchmove：触摸中

touchend：触摸结束

touchcancel：手指触摸动作被打断，如来电提醒，弹窗

tap：轻拍

longpress：替代了longTap事件

transitionend：过度结束事件

animationstart: 动画开始

animationend: 动画结束

animationiteration：迭代一次之后触发

touchforcechange：强制touch

事件对象？？？？还没搞清

changedTouches: 手指相关信息

currentTarget: 绑定事件的组件

detail: 手指的信息

target: 目标组件

dataset属性用于获取自定义数据

touches：手指信息

2 组件

2.1 view：

类似于html中的div元素，是容器组件，会独占一行

特定的属性：

hover-class: 点击时候添加的类

hover-start-time: 延迟类的添加时间

hover-stay-time: 类停留的时间

hover-stop-propagation: 阻止冒泡

2.2 text

text是文本组件，不会独占一行。类似span，组件内只支持 text 嵌套。默认是空白折叠。

属性：

selectable：文本是否可选 (已废弃)；除了文本节点以外的其他节点都无法长按选中。

decode: 是否解码 decode可以解析的有   < > & ' &ensp; &emsp;

space属性：设置空格模式

ensp: 中文字符空格一半的大小一个空格占半个汉字

emsp: 中文字符空格大小一个空格占一个汉字

nbsp: 根据字体设置空白大小空格大小默认就是不折叠了

2.3 rich-text

定义富文本组件，渲染html的（受到限制），通过nodes定义渲染的内容，有三种方式：

第一种渲染html标签

<rich-text nodes="{{html}}"></rich-text>

Page({
    data: {
        html: `<div class="div_class">
            <p class="p">
            Life is&nbsp;<i>like</i>&nbsp;a box of
            <b>&nbsp;chocolates</b>.
            </p>
            </div>`
    }
})

第二种渲染node节点，值是一个数组，数组中的每一项是一个对象

name: 节点名称

attrs: 设置属性

children: 设置子节点的值是一个数组，数组中的每一项是对象

text: 定义内容的 type: 定义类型

<rich-text nodes="{{nodes1}}"></rich-text>

<rich-text nodes="{{nodes2}}"></rich-text>

Page({
    data: {
        nodes1: [{
            name: 'div',
            attrs: {
                class: 'div_class',
                style: 'line-height: 60px; color: red;'
            },
            children: [{
                type: 'text',
                text: 'You never know what youre gonna get.'
            }]
        }],

        nodes2: [{
            name: 'p',
            attrs: {
                class: 'p_class',
                style: 'text-align : center; color: green;'
            },
            children: [{
                type: 'text',
                text: '我是p标签!!!'
                },
                {
                name: "span",
                attrs: {
                    style: "color:red",
                    class: "span_class"
                },
                children: [{
                    type: "text",
                    text: '我是p标签中的span标签,哈哈哈哈'
                    }, 
                    {
                    name: 'span',
                    attrs: {
                        style: "color: orange",
                        id: "zidingyi"
                    },
                    children: [{
                        type: "text",
                        text: "我是span中的span"
                    }]
                    
                }]
            }]
        }]
    }
})

第三种渲染字符实体的字符串

<rich-text nodes="{{str}}"></rich-text>
Page({
    data: {
        str: '你好 这就是简单的字符串啦  &gt; &lt;'
    }
})

2.4 image

通过src定位图片的资源, 支持本地图片，也支持线上的图片（必须支持HTTPS）

通过mode属性，定义裁剪、缩放模式：

        left: 裁剪模式显示图片的左边部分 right: 裁剪模式显示图片的右边部分

        top: 裁剪模式显示图片的上边部分 bottom: 裁剪模式显示图片的底部部分

        scaleToFill：缩放模式拉伸图片

        aspectFit：缩放模式完整的显示图片

        aspectFill：缩放模式在一个方向显示完整的图片另一个方向会截取图片

        widthFix：缩放模式保持原图宽高比不变

        ......

2.5 icon

用于定义图标的组件

size：定义图标的大小

color: 定义图标的颜色

type 定义图标的类型: success, succ

ess_no_circle, info, warn, waiting, cancel, download, search, clear
<icon type="success_no_circle" size="30px" color="red"></icon>

2.6 canvas

通过canvas-id定义canvas组件的名称, 默认宽高是 300px 150px

旧的接口 在js文件中我们通过wx.createCanvasContext来获取对应画布
<canvas canvas-id="myCanvas" style="width: 350px; height: 300px;"></canvas>
        const context = wx.createCanvasContext('myCanvas');
        context.strokeRect(10, 10,100,100);
        context.fillRect(100, 100, 50, 50);
        context.stroke();
        context.draw();
新的接口 Canvas 2D 示例代码
  
  <canvas type="2d" id="myCanvas"></canvas>
const query = wx.createSelectorQuery()
query.select('#myCanvas')

2.7 表单组件

form 定义表单组件

可以为form添加submit事件，具体的数据在事件对象中的detail.value中获取

<form bindsubmit="receiveData">
        <label for="username">用户名：</label>
        <input type="text" id="username" style="border: 1px solid #000" placeholder="请输入用户名" name="username"/>
</form>

receiveData(e) {
        console.log(e.detail.value);
}

checkbox 定义多选框，每一组多选框必须放入checkbox-group中

<label for="">爱好
    <checkbox-group name="intresting">
        <checkbox value="basketball">篮球</checkbox>
        <checkbox value="football">足球</checkbox>
        <checkbox value="pingpang">乒乓球</checkbox>
    </checkbox-group>
</label>

radio 定义单选框，每一组单选框必须放入radio-group中

<label for="">性别
    <radio-group name="gender">
        <radio value="man">男</radio>
        <radio value="girl">女</radio>
        <radio value="xx">保密</radio>
    </radio-group>
</label>

button 定义按钮

type 定义按钮的类型：primary 绿色 wran 红色

form-type 定义按钮提交的方式； submit 提交； reset 重置

2.8 switch progress slider map video

switch开关 属性checked

progress进度条 percent百分比 show-info="true" 在进度条右侧显示百分比https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

slider滑动选择器 step="10"步长为10

map地图组件 wx.getLocation

video组件: video src mp4

2.9 block定义模板组件

在该组件中可以添加样式、添加指令，但是就是不会渲染出来（可以作为模板组件使用)

2.10 scroll-view

scroll-x，scroll-y 用于定义方向

scroll-into-view 定义初始化的滚动位置值是某个子组件的id（id不能是以数字开头）
<scroll-view class="parent" scroll-y scroll-into-view="a13">
    <view wx:for="{{30}}" wx:key="this" id="a{{index}}" class="child">{{item}}</view>
</scroll-view>

2.11 swiper 轮播图

indicator-dots: 开启小圆点

indicator-color: 小圆点的颜色

indicator-active-color: 选中时候小圆点的颜色

autoplay：自动播放

interval：定义间隔时间

circular：是否衔接

swiper-item：子组件，用于定义每一帧图片或页面

<swiper indicator-dots="true" indicator-color="red" indicator-active-color="blue" autoplay interval="2000" circular>
    <swiper-item>
        <image mode="aspectFit" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></image>
    </swiper-item>
     <swiper-item>
        <image mode="aspectFit" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></image>
    </swiper-item>
     <swiper-item>
        <image mode="aspectFit" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></image>
    </swiper-item>
     <swiper-item>
        <image  mode="aspectFit" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></image>
    </swiper-item>
</swiper>

2.12 movable-area 定义可移动的区域

子组件： movable-view

direction: 定义移动的方向 all任意方向 hrizontal 水平移动 vertical 垂直方向 none 不移动

x y 位置

<movable-area class="parent">
    <movable-view direction="horizontal" x="100" y="100"></movable-view>
    <movable-view direction="vertical"x="150" y="150"></movable-view>
    <movable-view direction="all" out-of-bounds="true" inertia></movable-view>
</movable-area>

2.13 template 模板组件

name 定义模板组件的名称

is 使用模板

<!-- 定义模板 -->
<template name="hh"><view>header~~~模板是块级</view></template>
<template name="bb">body模板</template>
<template name="ff">footer模板</template>
<!-- 使用模板 -->
<template is="hh"></template>
<template is="bb"></template>
<template is="bb"></template>
<template is="ff"></template>

2.14 open-data 定义开放组件

当前我们可以通过wx.getUserInfo获取用户的信息

建议我们使用open-data组件

type: 获取用户的信息

<open-data type="userNickName"></open-data>

<open-data type="userAvatarUrl"></open-data>

2.15 web-view 引入html页面

使用方式：

1 通过src定义引入的页面路径（必须支持https协议）

2 要在后台进行配置

3 要关闭证书检验

<!-- 引入其它的页面 -->
<web-view src="https://www.baidu.com/"></web-view>
<!-- 引入搭建起来的https服务器上的页面 -->
<web-view src="https://localhost/index.html"></web-view>

2.16 wxs 定义一个执行代码空间

使用方式：

1 要创建一个.wxs后缀名称的文件，在该文件中，不支持es6语法

// demo.wxs
var num = 100;
function getMax(arr) {
    var result = 0;
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        result = result > arr[i] ? result : arr[i];
    }
    // 返回数据
    return result;
}

module.exports.num = num;
module.exports.getMax = getMax;

2 在wxml页面中通过wxs组件引入wxs文件，通过src属性引入文件

3 在wxs组件上通过module属性定义代码空间--模块名称

4 使用插值语法调用wxs模块中暴露的功能（通过module属性值来调用）

<!-- 引入wxs中内容 -->
<wxs src="./demo.wxs" module="demo"></wxs>

<!-- 在插值语法中使用暴露的功能 -->
<view>{{demo}}</view>
<!-- 使用num -->
<view>{{demo.num}}</view>
<!-- 使用方法 -->
<view>{{demo.getMax([2, 3, 4, 5])}}</view>

3 指令

条件指令 wx:if=“condition”

是真正的创建与删除，不是控制元素的显隐

循环指令 wx:for=”data”

data表示要遍历的数据：可以是数字可以是数组

但是在遍历的时候，一定要设置wx:key 保证数据的唯一性，通常我们可以设置id或者是this

默认的成员变量名称：item 通过wx:for-item="新名称" 修改

默认的索引值变量名称：index 通过wx:for-index="新名称" 修改

4 引入文件

小程序的脚本文件中引入文件的方式是通过require方法; 使用的是commonjs规范

暴露接口：exports; module.exports

在小程序中的wxml文件中引入文件的方式通过两种组件：

1 import 组件引入文件; 引入的是模板中的内容 src, 使用相对路径

2 include组件引入文件; 引入的组件内容 src, 使用相对路径

<!-- common.wxml -->
<!-- 组件部分 -->
<view>common组件</view>
<text>只能include引入</text>
<!-- 模板部分 -->
<template name="demo">conmmon中的 template模板</template>
<template name="demo2">demo2模板</template>
<template name="demo3">demo3模板</template>

<!-- 引入组件 -->
<include src="./commom.wxml"></include>

<!-- 引入模板 -->
<import src="./commom.wxml"></import>
<!-- 使用模板 -->
<template is="demo"></template>
<template is="demo2"></template>
<template is="demo3"></template>

5 路由

通过navigator组件实现页面的切换

open-type=”navigate” 用于打开普通页面

open-type=”switchTab” 用于打开tab页面不可传参

open-type=“navigateBack” 用于返回上一个页面

open-type=”redirect” 用于重定向到一个页面

<navigator open-type="navigateBack">返回上一页面</navigator>
<navigator url="/pages/demo3/demo3" open-type="navigate">跳转到demo3</navigator>
<navigator url="/pages/demo3/demo3" open-type="switchTab">switchTab到demo3</navigator>
<navigator url="/pages/demo3/demo3" open-type="redirect">重定向跳转到demo3</navigator>

通过全局方法实现页面的切换

navigateTo方法用于跳转一个普通页面，可以传递query数据，在跳转到的目标页面中的load事中获取

switchTab方法用于跳转一个tab页面不可传参

navigateBack方法用于返回上一个页面

redirect方法重定向方法

wx.navigateTo({
    url: '/pages/card/card',
})

路由堆栈

navigate

保证原有的堆栈不变，新页面进入堆栈中；当前页面hide, 新页面show和load

当前页面hide，跳转页面 load show ready

navigateBack

保证原有的堆栈不变，新页面从堆栈中弹出；当前页面unload，新页面执行show

当前页面unload 跳转页面show

redirect

保证原有的堆栈不变，新页面从堆栈中弹出；当前页面unload，新页面show和load

当前页面unload，跳转页面 load show ready

switchTab

清空原有堆栈，新页面进入堆栈中；当前页面hide, 新页面show和load

页面第一次加载时会触发 load show ready

当已经被加载过一次再次跳转时只会触发show

当前页面只触发hide

本地存储

设置数据

同步写法：setStorageSync(key, value)；key: 数据名称，value: 数据值

   try {
      wx.setStorageSync('msg', 'hello');
    } catch (err) {
      console.log(111, err)
    }

异步写法：setStorage({ key, data, success, fail, complate })

key: 数据名称

data:设置的数据

complate:完成时候执行的回调函数

success: 成功时候执行的回调函数

fail: 失败时候执行的会得到函数

    wx.setStorage({
      key: 'msg',
      data: 'hello',
      // 成功时候的回调
      success(res) {
        console.log(111, res)
      },
      // 失败时候的回调'
      error() {
        console.log(222, arguments, 'error')
      },
      // 完成时候的回调
      complete() {
        console.log(333, arguments)
      }
    })

获取数据：

同步写法：getStorageSync(key, value)

异步写法：getStorage({ key, data, success, fail, complate })

删除数据：

同步写法：removeStorageSync(key, value)

异步写法：removeStorage({ key, data, success, fail, complate })

清空数据：

同步写法：clearStorageSync(key, value)

异步写法：clearStorage({ key, data, success, fail, complate })

获取存储数据信息：

同步写法：getStorageInfoSync(key, value)

异步写法：getStorageInfo({ key, data, success, fail, complate })

e神还是心头好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序

1.1 应用程序周期方法app.js 是应用程序脚本文件在应用程序中提供了一套周期方法onLaunch：初始化的时候执行的方法onShow: 进入前台时候执行的方法onHide: 进入后台时候执行的方法onError：出错时候执行的方法1.2 内置方法wx.login: 登录成功之后执行的方法参数是一个对象，对象中有一个success方法wx.getSetting：获取授权的方法参数是一个对象，对象中有一个success方法wx.getUserI
复制链接

扫一扫

专栏目录