微信小程序知识点总结

微信小程序主要目录和文件的作用？

   project.config.json：项目配置文件，用的最多的就是配置是否开启https校验

   App.js：设置一些全局的基础数据等

   App.json：底部tab，标题栏和路由等设置

   App.wxss：公共样式，引入iconfont等

   pages：里面包含一个个具体的页面

   index.json：配置当前页面标题和引入组件

   index.wxml：页面结构

   index.wxss：页面样式表

   index.js：页面的逻辑，请求和数据处理

wxml与标准的html的异同？

  相同点：都是用来描述页面的结构

           都由标签，属性等构成

  不同点：标签名字不一样，且小程序标签更少，单一标签更多

      多了一些 wx:if 这样的属性以及{{}} 这样的表达式

      WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

      组件封装不同，WXML对组件进行了重新封装

      小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。

WXSS和CSS的异同？

相同点：都是用来描述页面的样子

不同点：WXSS具有CSS大部分的特性，也做了一些扩充和修改

        WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx

        WXSS仅支持部分CSS选择器

        WXSS提供全局样式与局部样式

小程序页面之间有哪些传递数据的方法？

使用全局遍历实现数据传递

页面跳转或重定向时，使用url带参数传递数据

使用组件模板 template传递参数

使用缓存传递参数

使用数据库传递参数或

给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）

设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据

在navigator中添加参数数值

小程序的生命周期函数

   App中的：

onLaunch     小程序初始化完成时触发，全局只触发一次

onShow     小程序启动，或从后台进入前台显示时触发

onHide      小程序从前台进入后台时触发

onError              小程序发生脚本错误或 API 调用报错时触发

onPageNotFound           小程序要打开的页面不存在时触发

onUnhandledRejection    小程序有未处理的 Promise 拒绝时触发

onThemeChange          系统切换主题时触发

   页面中的：

onLoad       监听页面加载 发送请求获取数据

onShow      监听页面显示 请求数据

onReady       监听页面初次渲染完成     获取页面元素

onHide       监听页面隐藏 终止任务

onUnload      监听页面卸载       终止任务

   组件中的：

         created        监听页面加载

attached         监听页面显示

ready           监听页面初次渲染完成

moved         监听页面隐藏

detached        监听页面卸载

error            每当组件方法抛出错误时执行

简述微信小程序原理

 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；

它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；

它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；

功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；

webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；

两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持

wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的

wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）

哪些方法来提高微信小程序的应用速度？

用户行为预测

组件化方案

精简代码，降低WXML结构和JS代码的复杂性；

合理使用setData调用，减少setData次数和数据量

必要时使用分包优化

分析微信小程序的优劣势？

优势：

容易上手，基础组件库比较全，基本不需要考虑兼容问题

开发文档比较完善，开发社区比较活跃，支持插件式开发

良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多

开发成本比APP要低

为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

限制较多，页面大小不能超过1M，不能打开超过5个层级的页面

样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航

推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广

依托与微信，无法开发后台管理功能

后台调试麻烦，因为api接口必须https请求且公网地址

真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

微信小程序和H5的区别？

运行环境不同（小程序在微信运行，h5在浏览器运行）

开发成本不同（h5需要兼容不同的浏览器）

获取系统权限不同（系统级权限可以和小程序无缝衔接）

应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserlnfo方法 withCredentials为true时，可获取encryptedData，里面有union_id，后端需要进行对称解密

bindtap和catchtap的区别？

bind事件绑定不会阻止冒泡事件向上冒泡

catch事件绑定可以阻止冒泡事件向上冒泡

简述微信小程序的跳转方式的区别

wx.navigateTo

wx.navigateTo({

  url: 'test?id=1',

})

保留当前页面，只能打开非 tabBar 页面。

wx.redirectTo

wx.redirectTo({

  url: 'test?id=1'

})

关闭卸载当前页面，只能打开非 tabBar 页面。

wx.switchTab

wx.switchTab({

  url: '/index'

})

关闭所有非tabbar页面， 只能打开 tabBar 页面。

wx.reLaunch

wx.reLaunch({

  url: 'test?id=1'

})

关闭卸载所有页面，可以打开任意页面。

wx.navigateBack

wx.navigateBack({

  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。

})

返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去

路由跳转传参

       路由跳转传参可以通过？的方式拼接参数。跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对象）拿到路由跳转的参数。

小程序与原生App的比较？

各有各自的优点，都又有缺点

小程序的优点：

基于微信平台开发，享受微信自带的流量，这个优点最大

无需安装，只要打开微信就能用，不占手机内存，体验好

开发周期段，一般最多一个月就可以上线完成

开发所需的资金少，所需资金是开发原生APP的一半不到

小程序名称是唯一的，在微信的搜索里权重很高

容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题

基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序

发布、审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布

开发文档完善，社区活跃

支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

缺点：

局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能

不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制

后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦

前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致

js引用只能使用绝对路径，不能操作DOM

原生App优点：

原生的相应速度快

对于有无网络操作时，譬如离线操作基本选用原生开发

需要调用系统硬件的功能（摄像头，拨号，短信蓝牙..）

在无网络或者弱网情况下体验好

原生App缺点：

开发周期长，开发成本高，需要下载

小程序的发布流程（开发流程）

注册微信小程序账号

获取微信小程序的AppID

下载微信小程序开发者工具

创建demo项目

去微信公众号配置域名

手机浏览

代码上传

提交审核

小程序发布

简述微信小程序原理

小程序的页面主要由四部分组成，分别是wxml、wxss、js、json。wxml用于构建用户界面，wxss用于编写界面的样式，js用于编写界面逻辑，json用于界面的配置。

微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

微信小程序的好处和缺点

优势：

入口众多。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。

体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。

微信助力，容易推广。

成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

劣势：

大小限制为2M，这导致无法开发大型的应用。

不能直接分享到朋友圈。

需要像app一样审核上架，这点相对于H5的发布要麻烦一些

微信对小程序的开发也有限制

小程序的双向绑定和vue哪里不一样

小程序直接this.data的属性是不可以同步到视图的，必须调用setData

如何给方法传值

通过设置标签的data-*属性，在方法中通过e.currentTarget.dataset获取到数据

小程序常用的接口请求

HTTPS 请求（wx.request）

上传文件（wx.uploadFile）

下载文件（wx.downloadFile) 

WebSocket 通信（wx.connectSocket）

小程序如何进行登录

通过wx.login可以获得code。

调用服务端提供的code2Session，可以拿到用户的open_id（唯一id)。

open_id可以和后端的账号关联，后端会根据open_id返回关联的用户信息。

小程序页面跳转如何传递参数

跳转的时候可以在链接后面加上?参数名=参数值

跳转到的页面可以在onLoad的生命周期函数中的options获取到参数

如果被问到taro框架传递参数，在taro组件的生命周期函数中都可以通过this.$router.params 获取到参数

微信小程序使用npm的步骤（外部依赖）

首先在项目根目录执行npm init

根据需要安装相应的组件，这里需要注意的加上--production参数减少安装一些业务无关的包，从而减少整个小程序的大小。

在微信开发工具的本地设置中打开使用npm模块

在微信开发工具的工具菜单栏点击构建npm

谈谈对Behaviors的了解

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用：

//调用Behavior()方法，创建实例

// 并使用exports导出

module.exports =  Behavior({

// 属性节点

properties:{},

// 私有数据节点

data:{ usename:'zs'},

// 事件处理函数和自定义方法

methods:{},

// 其他节点

})

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下：

// 引入Behavior实例对象

const myBhavior = require("../../behaviors/behavior")

Component({

    // 将导入的myBhavior挂载到behaviors节点上

   behaviors:[myBhavior],

})