微信小程序常见知识点总结

一、对小程序的理解

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。为了提高用户体验和使用的流畅度，微信研发设计了微信小程序。

微信小程序的优势
①容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口，这些都有助于推广小程序。
②使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，不需要下载。
③体验良好。小程序不会像H5页面一样经常出现卡顿、延时、加载慢、权限不足等问题。
④成本更低。从开发成本到运营推广成本，小程序的花费仅为APP的十分之一。
微信小程序的劣势
①单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M
②需要像app一样审核上架，这点相对于H5的发布要麻烦一些
③处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

二、小程序的模板语法

1.标签

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。
text标签也是我们开发中常用的，这个相当于Html中的span
image标签相当于我们Html中的img。

2.数据

定义数据，在data属性中定义数据

 data: {
	msg:"hello world",
	num: 18,
  },

引用数据：通过{{}}的方式引用数据，也可以在{{}}进行一些计算

<view>{{msg}},{{num + 10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

3.渲染

1、逻辑渲染
wx:if

<view wx:if="{{condition}}"> True </view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

hidden 隐藏

<view hidden="{{condition}}">
隐藏
</view>

wx:if通过添加和删除元素控制显示和隐藏
hidden通过display:none控制元素隐藏
wx:if可以搭配wx:else wx:elif使用

2、列表渲染
wx:for
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>
//js中
data: {
    array: [{name: '天亮教育',}, {name: '尚云科技'}]
  }

wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.name}}
</view>

key

wx:key 来指定列表中项目的唯一的标识符
wx:key的值的形式：
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
key可以提高重排的效率。

3、模板Template
name ：作为模板的名字
is：声明需要的使用的模板
data：模板需要的数据

<template name="demo">
  <view>
    <text>模板内容：</text>
    <text>{{msg}}</text>
  </view>
</template>
<template name="demo1">
  <view>
    <text>{{title}}</text>
    <text>{{id}}</text>
  </view>
</template>
<template is="demo" data="{{msg}}"></template>
<view wx:for="{{list}}" wx:key="id">
  <template is="demo1" data="{{...item}}"></template>
</view>

4、引用
Import
1、import只导入template
2、import 不具有递归的特性。

<!-- course.wxml -->
<template name="course1">
  <view>{{title}}：{{price}}</view>
</template>
<view>
  模板中的view的内容
</view>

<!--import只导入template -->
<import src="./course"/>
<template is="course1" data="{{...course}}"></template>

include
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入

<!-- include -->
<include src="./course"></include>

三、wxss和css的区别

wxss为了更适合小程序开发，对CSS做了一些补充以及修改。

1.尺寸单位

在wxss中引入新的尺寸单位----rpx，目的是适配不同宽度的屏幕
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = （屏幕宽度/750）px

2.样式导入

在wxss文件中引入其他样式文件
@import ‘./test_0.wxss’

3.样式选择器

类选择器、id选择器、元素选择器、伪元素选择器

四、小程序中的生命周期

App：
1、onLaunch：小程序初始化完成时，会触发 onLaunch（全局只触发一次）
2、onShow：小程序启动，或从后台进入前台显示，会触发 onShow
3、onHide：小程序从前台进入后台，会触发 onHide
4、onError：小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
Page：
1、onLoad：监听页面加载，触发时机早于onShow和onReady
2、onReady：监听页面初次渲染完成
3、onShow：监听页面显示，触发事件早于onReady
4、onHide：监听页面隐藏
5、onUnLoad：监听页面卸载
Component
组件的的生命周期也可以在 lifetimes 字段内进行声明
1、created：在组件实例刚刚被创建时执行
2、attached：在组件实例进入页面节点树时执行
3、ready：在组件在视图层布局完成后执行
4、moved：在组件实例被移动到节点树另一个位置时执行
5、detached：在组件实例被从页面节点树移除时执行
6、error：每当组件方法抛出错误时执行

五、小程序中事件定义与传参

1.事件定义

绑定事件可以以bind开头然后跟上事件的类型
书写：bindtap="事件"或者bind:tap="事件"

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>

// pages/my/index.js
Page({
  handleTap(){
    console.log("执行了点击事件");
  }
})

阻止事件冒泡
通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。

<view catchtap="handleTap">点击事件</view>
<view catch:tap="handleTap">点击事件</view>

事件捕获
事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定。

<view capture-bind:tap="handleTap">点击事件</view>

2.事件传参

利用自定义属性传参：在小程序中需要在标签上通过data-方式定义事件所需的参数
data-参数名=“参数值”

<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。

handleTap(e){
console.log("执行了点击事件");
	// 通过currentTarget中的dataset属性可以获取参数
    console.log(e.currentTarget.dataset.msg);
}

target 触发事件的组件的一些属性值集合
currentTarget 当前组件的一些属性值集合
注意：target和currentTarget的区别
currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件
currentTarget的事件触发了，可能是target引起的冒泡或者捕获的原因导致触发的

六、常见界面跳转

跳转方式	特点
wx.navigateTo	保留当前页面，只能跳转非tabBar页面
wx.switchTab	关闭所有非tabbar页面，只能打开tabbar页面
wx.redirectTo	关闭卸载当前页面，只能打开非tabBar页面
wx.reLaunch	关闭卸载所有页面，可以打开任意页面
wx.navigateBack	返回上一页面 delta：返回页数
<navigator >	open-type属性决定跳转方式

七、修改data上的数据

1、this.data.变量名
在js文件中，this.data.变量修改，只可以修改逻辑层的数据，渲染层不会改变
2、this.setData()方法
用app实例的this.setData()方法修改data数据逻辑层和渲染层的数据都会更新

八、小程序中如何进行本地存储

1、存储
异步存储：

wx.setStorage({
key:"key",
data:'value'
})

同步存储：

wx.setStorageSync('key','data')

2、获取
异步获取：

wx.getStorage({'key'})

同步获取：

wx.gettStorageSync('key')

九、界面跳转传递参数

声明式：

<navigator url='url?id=1'></navigator>
<navigator url='url?id={{变量名}}'></navigator>

函数式：

toPath(){
  wx.navigateTo({
	url:'url?id=123',
	})
}
toPath(){
  wx.navigateTo({
		url:'url?id={{变量名}}',
	})
}

}

注意：wx.switchTab和wx.navigateBack不能传递参数
获取：利用界面的onLoad生命周期中的options参数获取到传递的参数

onLoad(options){
	console.log(options.type)
	//type传递的参数，利用options接收
}

十、小程序中父子组件传参

1.父传子

父组件在引用子组件的时候通过设置属性的方式给子组件传值

//在父页面中：
<son msg='hello'></son>
<son></son>
  //子组件：
//子组件接收：
 properties:{
	msg:{
	  type:[String,Number],
	  value:’hello world’,
	}
 }
 //vue中子组件用props接收传递的数据
 <view>{{msg}}</view>

2.子传父

//父组件：在组件中绑定一个自定义事件
<son bind:fromson='fromson'></son>

//父组件接收子组件参数：
	fromson(res){
		console.log(res.detail)
		this.setData({
			'fromson':res.detail
		})
	}
//子组件：
<button bindtap='tofather'>子传父</button>
//子组件中触发：子组件中通过triggerEvent触发事件
methods：{
		tofather(){
			this.triggerEvent(‘fromson’,’111’)
		}
}
//vue中子组件通过$emit触发事件

十一、对Behaviors的理解

Behaviors是用于组件间代码共享的特性，类似于 “mixins”。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法
属性：myBehaviorProperty
数据字段：myBehaviorData
方法：myBehaviorMethod
生命周期函数：attached、created、ready

//注册一个 behavior，接受一个 Object 类型的参数
// 组件中的参数一样
module.exports = Behavior({
  data:{
    Behavior:"Behavior",
    msg:"behavior",
    obj:{
      msg:"behavior"
    }
  },
  created(){
    console.log('created-Behavior');
  },
 })
//  在son中用Behavior

//son.js
import Behavior from "../../behaviors/behavior"
Component({
  // 用Behavior
  behaviors:[Behavior],
  // 组件的属性或方法会覆盖 behavior 中的同名属性或方法；
  data: {
    // 有同名的数据字段，对象类型，会进行对象合并，其他会覆盖
    msg:"son",
    obj:{
      id:2,
      msg:'son'
    }
  },
  // 组件和Behavior的生命周期不会覆盖，会合并
  created(){
    console.log('created-son');
  },

十二、谈谈对组件封装的心得

在开发中，页面之间有很多相似的代码，我们可以对其相似的代码块进行封装，进行复用。

对组件进行封装有以下好处：
符合高内聚低耦合；
避免了代码间的冲突；
容易维护；
提高开发效率，方便重复利用，提高可维护性；

十三、如何提高小程序的加载速度

1、控制代码包的大小：
（1）代码包的体积压缩可以通过勾选开发者工具中“上传代码时，压缩代码”选项（2）及时清理无用的代码和资源文件（3）减少资源包中的图片等资源的数量和大小
2、分包加载,预加载：
将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载；采用子包预加载技术，并不需要等到用户点击到子包页面后在下载子包
3、预请求：
请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
4、避免不当的使用setData：
不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用
5、使用自定义组件：
对于一些独立的模块我们尽可能抽离出来，这是因为自定义组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

十四、微信小程序常见的开放能力API有哪些

1、 wx.getNetworkType({})：检查网络类型，例如：wifi,5g,4g,3g,2g等
2、 wx.downloadFile({}）----从网络上下载文档
3、wx.scanCode({}） ----扫一扫
4、wx.canIUse() ----判断小程序的API，回调，参数，组件等是否在当前版本可用。返回值为布尔类型。
5、wx.getUserProfile ----获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。
6、wx.getUserInfo ----获取用户信息。//已经停止使用

十五、怎么封装小程序的数据请求

小程序接口请求：wx.request
不会跨域，因为不是浏览器，没有同源策略

封装请求

  function request(options) {
  // 请求拦截器
  //  ...
  // 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") &&!options.url.startsWith("http://")) {
    options.url = "https://showme2.myhope365.com" + options.url
  }
    // 默认的请求头
  let header = {
    "cookie": wx.getStorageSync("cookie") || "",
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器，所有接口获取数据之前，都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常，请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}
//封装get请求
export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}
//封装post请求
export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}

十六、对WebSocket的理解

由于http只能是单向发起的，只能由客户端主动发起，服务端被动响应。服务端无法主动向客户端发送消息，如果想实现类似于聊天室这种即时通讯的功能，就需要使用消息轮询。轮询的效率低，比较消耗资源。
WebSocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

而WebSocket协议具有以下特点：（可以更好的实现即时通讯）
1、 webSocket是一种在单个TCP连接上进行全双工通信的协议
2、websocket建立连接时，数据是通过http传输的，建立连接后就不需要http协议了。
3、websocket建立连接后就是全双工模式，也是基于tcp协议。
4、建立连接之后，不必在客户端发送request之后服务器才能返回信息到浏览器，这时候服务器有主动权，允许可以随时发消息给客户端
5、发送的信息中不必带有head部分信息了，相对于http来说，降低了服务器的压力，极大的减少了不必要的网络流量与延迟。
6、没有同源限制，客户端可以与任意服务器通信
7、协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

十七、瀑布流的实现

将数组拆分成左右两个数组
记录左右数组的高度，遍历总数组，将新的元素放在高度比较小的数组里

//wxml文件
 <template name="postList">
    <view class="box"  bindtap="toChat" data-postid="{{item.postsId}}">
      <view class="title">
        {{item.title}}
      </view>
      <view class="imgBox">
        <image src="{{item.coverImgUrl}}" mode="widthFix"></image>
      </view>
    </view>
  </template>
<view class="bigBox">
  <view  class="leftBox">
      <template is="postList" data="{{item}}" wx:for="{{leftList}}" wx:key="postsId">						  			        				</template>
  </view>
  <view class="leftBox">
      <template is="postList" data="{{item}}" wx:for="{{rightList}}" wx:key="postsId"></template>
  </view>
</view>
<view class="load">
  <van-loading type="spinner" wx:if="{{isLoading}}" />
</view>
<view wx:if="{{isEnd}}" class="tip">没有更多了...</view>
<view class="back" hidden="{{backShow}}" bindtap="backTap" >
  <van-icon name="back-top" />
</view>

//js文件
import { getlist } from "../../api/chat"

// pages/chat/chat.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    leftList:[],
    rightList:[],
    leftHeight:0,
    rightHeight:0,
    // 整个数据处理完成
    finish:false,
    pageNum:1,
    pageSize:10,
    total:0,
    isEnd:false,
    isLoading:true,
    // 返回顶部
    backShow:true,
  },
// 请求的函数封装
getPost(){
  getlist(this.data.pageNum,this.data.pageSize).then(res=>{
    if(res.data.code == 0){
      wx.stopPullDownRefresh();
      this.initList(res.data.rows);
      this.data.total = res.data.total;
    }
  })
},
// 处理数据的封装
initList(list){
  this.data.finish = false
  if(list.length == 0){
    this.data.finish = true;
    // 没数据了
    return
  }
  let item = list.shift();
  // 获取图片信息
   wx.getImageInfo({
    src:item.coverImgUrl,
    success:(res)=>{
      if(this.data.leftHeight <= this.data.rightHeight){
        // 加到左列表
        this.data.leftList.push(item);
        this.data.leftHeight += res.height / res.width
      }else{
        this.data.rightList.push(item);
        this.data.rightHeight += res.height / res.width
      }
      // 更改视图
      this.setData({
        leftList:this.data.leftList,
        rightList:this.data.rightList,
        isLoading:false
      })
    },
    complete:()=>{
      this.initList(list);
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      isLoading:true
    })
    // 处理数据
    this.getPost();
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      isEnd:false
    })
     // 下拉刷新
    if(this.data.finish){
      this.data.pageNum = 1
      this.setData({
        leftList:[],
        rightList:[],
        leftHeight:0,
        rightHeight:0
      })
      this.getPost();
    }else{
      return
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.setData({
      isLoading:true,
    })
    // 触底了
    if(this.data.finish){
      if(this.data.pageNum * this.data.pageSize >= this.data.total){
        this.setData({
          isEnd:true,
          isLoading:false,
        })
      }else{
        this.data.pageNum ++;
        this.getPost()
      }
    }
  },
})