微信小程序总结

H5简介

H5（HyperText Markup Language 5），又称HTML5，是W3C在2014年发布的一种新的网页标准，它是基于HTML4的升级版本，用于创建网页的新方式，它支持多媒体、图像、地理位置定位等功能，支持移动设备，并为移动设备提供更好的浏览体验。

小程序简介

小程序是微信推出的一项新技术，它是一种轻量级的移动应用，它可以在微信内运行，具有较强的实时性和交互性，可以满足用户对移动应用的需求。小程序可以支持多种功能，比如搜索、地图、购物、支付等，可以帮助用户快速完成一系列操作。

小程序开发和 h5 开发区别？

1、定义

HTML5是一种用于构建Web应用程序的语言和技术集合，包括HTML、CSS和JavaScript。而小程序是一种轻量级的应用程序，它在不离开微信或其他支持小程序的平台的情况下，提供了类似于原生应用程序的用户体验。

2、系统要求

HTML5不需要安装任何特定的应用程序或操作系统，只需要一个支持HTML5标准的Web浏览器。而小程序需要用户安装微信或其他支持小程序的平台。

3、开发难度

HTML5应用程序通常需要开发人员具备熟练的HTML、CSS和JavaScript编程技能。小程序可以使用类似于Web开发的技术（如HTML、CSS和JavaScript），但也需要一些额外的API和框架。

4、功能和性能

小程序通常提供更好的性能和更高级的功能，因为它们可以使用设备的本地功能和硬件，如相机、传感器和位置服务。HTML5应用程序的性能可能受到浏览器的限制，因为它们在Web浏览器中运行。

5、安全性

小程序是在特定的平台上运行的，因此受到平台提供的安全机制的保护。HTML5应用程序则需要通过其他方式来保护其安全性，例如使用SSL协议加密通信。

6、发布和分发

小程序通常需要经过平台审核和认证，然后才能发布和分发。HTML5应用程序可以直接通过Web服务器发布和分发，但也需要遵守相关的Web安全和隐私规定。

H5和小程序之间其实存在着很多不同之处，我们可以从下面四个方面来看：

1、不一样的运行环境

H5仅能借助浏览器实现启动，但小程序虽然包含H5技术，但在运行环境方面与H5不同，它基于解析器得以运行，结合自定义的开发语言标准，其性能更是有了长足的进步。简单讲小伙伴们可以利用浏览器打开H5网页，运用微信平台打开小程序。

2、不一样的成本

在开发方面，很多企业借助各类开发软件针对H5开发，定制化出众。但这种开发需要结合多方面技术实现，因此相对比较复杂，开发的成本也是比较高的。然而小程序则不一样，开发完全借助官方下载的开发工具即可实现，小程序开发价格相对低廉很多。

3、不一样的系统级权限

从程序本身来看，这个小程序能得到更多的系统权限，而对于H5则不同，权限很低。很简单举几个例子，比如网络当前的状态，甚至是一些数据的缓存应用等，都能够得以与小程序进行连接。

4、不一样的运行状态

现在的人们总是强调人性化，用户高体验度，那么这一点就被小程序抢先拥有了。要知道，相较于H5，这个小程序拥有更为流畅的使用速度。

很多使用过小程序和H5的客户，都很印象深刻，前者的打开速度要快上很多，利用一些软件就也可以测试出两者的差距。

我们举例来说，如果我们打开H5，就相当于打开一个网页，页面需要加载，因此打开速度相对较慢。

而对于小程序则不同，该应用程序完全借助微信运行，根本不需要像浏览器加载的操作，就可以直接打开。此外，H5页面之间的切换也需要时间，但小程序不用担心这些困难。

app分类

原生app

完全使用 安卓、ios相关技术栈 开发 app

优点：

1 性能高、比较流畅

2 系统权限特别高 （可以访问 系统 硬件api）

缺点：

1 开发成本高 （开发、迭代成本、维护成本、使用成本）

2 一旦安装后， 里面内容结构 是无法改变的

3 组件无法实现动画

webapp 程序员 一般叫 h5 或 m站 其实就是移动端网页

优点：

1 成本低

2 只要服务器源码 重新上传，每次打开浏览器 网页内容 自动变化

缺点：

1 性能低

2 系统权限低 无法调用手机硬件

hybrid app 混合app

原生app 有一个组件 webview（理解为这是一个 显示网页的窗口），给他 url 在app内部显示 网页

hybrid app就是 页面内容部分是原生组件、部门是 webview 引入 网页渲染， 既解决 了 原生组件 结构无法变化缺点，也解决了 网页 无法调用系统api缺点

jsBrige, 原生 开发 封装 一些 方法 ，传递 给 webview 网页中window对象上， 调用 即可

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定 模板渲染

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

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

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

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

算数运算

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

view中的内容为 3 + 3 + d。

逻辑判断

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

字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]。

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如：

<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})

最终组合成的对象是 {a: 5, b: 3, c: 6}。

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

注意事项

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

如何绑定事件

• bind绑定事件

<button bindtap="fn">
    按钮
</button>

• catch绑定事件

<button catchtap="fn">
    按钮
</button>

注意：

事件函数 必须是 页面实例的方法
​
不能加括号
​
bind绑定会冒泡 catch则不会

 

事件对象

小程序 事件函数的 第一个参数就是事件对象

通过html5 新增自定义数据属性传参 data-xxx

获取事件源

e.target
e.currentTarget

区别？

一个事件 是冒泡触发的， 那么 target 指向 触发 这个事件的 后代组件， currentTarget就是当前 事件绑定 组件

注意：

保险起见， 获取参数时  使用 currentTarget

事件传参 通过自定义数据属性， 在wxml 给组件 携带数据 事件函数中 获取

<button data-a="10" bindtap="fn">
    按钮
</button>

{
    fn(e){
        // e.target.dataset.a 或 e.currentTarget.dataset.a获取
    }
}

小程序适配方案

flex布局结合 rpx单位

怎么理解rpx

rpx是 小程序 提供的 一个动态的单位， 设计图 基准尺寸是 750px, 在这个基准下 2rpx = 实际1px

这个单位是动态的 公式 （rpx单位/2）* (真机尺寸/375)

总结：设计图是多少 像素px 实际写css 就定义为 多少 rpx

注意：

一般字体 直接 使用 px单位即可

 

 

重点

1 小程序生命周期 页面的生命周期

2 onShow和 onLoad区别 正常路由跳转 在页面没有卸载情况下， onShow会多次触发， onLoad只会触发一次

3 小程序页 哪些场景下会卸载

1 跳转时 使用 redirect或者 reLaunch跳转  
​
2 返回上一页时

4 h5开发和小程序开发的区别

5 小程序如何实现下拉刷新

(1) 配置中开启下拉刷新

enablePullDownRefresh": true

(2) 页面js中 下拉事件监听函数中，请求列表数据

onPullDownRefresh(){
    // 这里请求列表
}

(3) 请求成功后 调用 wx.stopPullDownRefresh() 结束下拉loading状态

6 页面中如何开启 分享 朋友或者朋友圈

(1) 定义事件监听函数

(2) 调用api 在点击胶囊按钮 点亮 分享按钮 wx.showShareMenu

wx.showShareMenu({
 
withShareTicket:true,
 
menus:['shareAppMessage','shareTimeline']
 
})

#

应用生命周期

小程序从启动 -> 运行 -> 销毁的过程

应用生命周期函数
应用生命周期函数在 app.js 中声明，执行顺序如下

1. onLaunch（小程序初始化完成时触发，全局只触发一次，先于所有页面周期函数执行）
2. onShow（小程序启动，或从后台进入前台显示时触发，先于所有页面周期函数执行）
3. onHide（小程序从前台进入后台显示时触发）
4. onError（小程序发生脚本错误或 API 调用报错时触发）
5. onPageNotFound（小程序要打开的页面不存在时触发）
6. onUnhandledRejection（小程序有未处理的 Promise 拒绝时触发）
7. onThemeChange（系统切换主题时触发）
    

 

页面生命周期

每个页面加载 -> 渲染 -> 销毁的过程

页面生命周期函数
页面生命周期函数在页面的 .js 文件中声明，执行顺序如下

onLoad（页面创建时执行，一个页面生命周期中只调用一次，可接收一个object参数，里面包含用wx.navigateTo()打开该页面时拼接在url中的参数，常用于初始化，转存数据）

①是打开小程序就展示的的页面时执行

②是被其他页面调用 wx.navigateTo 打开的页面时执行

③是被调用 wx.switchTab 初次打开的页面时执行

onShow（页面出现在前台时执行）

onReady（页面首次渲染完毕时执行，监听页面初次渲染完成，一个页面生命周期中只调用一次，可在此函数中修改页面内容，如调用wx.setNavigationBarTitle）

①是打开小程序就展示的的页面时执行

②是被其他页面调用 wx.navigateTo 打开的页面时执行

③是被调用 wx.switchTab 初次打开的页面时执行

onHide（页面没有被关闭，只是从前台变为后台时执行）

①普通页面使用 wx.navigateTo 切换到其他页面时执行

②tabBar 页面使用 wx.switchTab 切换到其他页面时执行

onUnload（页面销毁时执行，一个页面生命周期中只调用一次）

onPullDownRefresh（触发下拉刷新时执行）

onReachBottom（页面触底时执行）

onShareAppMessage（页面被用户分享时执行）

onPageScroll（页面滚动时执行）

onResize（页面尺寸变化时执行）

onTabItemTap（当前是 tabBar 页时，点击 tab 时触发，如果使用了自定义tabbar，则不会触发。可接收一个object参数，其中包含所点击的 tab 的 index、pagePath、text等数据）

注：

​ ①调用wx.switchTab时（只能跳转到 tabBar 页面），关闭其他所有非 tabBar 页面，既所有非 tabBar 未关闭页面执行onUnload

​ ②调用 wx.reLaunch 时，所有未关闭页面都会关闭（包括当前页），既所有未关闭页执行 onUnload

​ ③ 调用 wx.redirectTo时（只能跳转到非 tabBar 页面），当前页被关闭，当前页执行 onUnload

​ ④ 调用 wx.navigateTo时，保存当前页（使用 wx.navigateBack 可以返回），跳转到应用内的某个页面。但是不能跳到 tabbar 页面，当前页执行 onHide

​ ⑤调用 wx.navigateBack（返回上一页面或多级页面）时，当前页（包含当前页）到目标页之间所有出栈页都被关闭，执行onUnload