2、在同一个目录下搭建 electron 项目
（1）安装electron，npm install --save-dev electron
（2）配置electron主进程入口 和 启动命令
package.json
（3）main.js
（4）使用api
3、构建运行，npm run build;npm run start
Electron 整合 Vue 注意事项
1、在vue组件中 require('electron') 会导致webpack编译不通过，因为 electron模块 依赖了NodeJS环境的内置模块
解决方案一：
解决方案二：发送消息给主进程
Electron 打包发布 之 手动打包
1、在github下载Electron 的 prebuilt binaries，即Electron Release 里的 electron-**.zip，要对应合适的运行平台，例如 electron-v6.1.11-win32-x64.zip、electron-v21.3.3-linux-x64.zip
备注：网速不好要科学上网，选对地域
2、解压 prebuilt binaries
3、把web项目（package.json、main.js、dist）放到 resourcesapp 目录下，加上 node_modules 中被项目用到的 nodejs 依赖
4、【Windows】用 ResourceHacker 更改 electron.exe 的图标；双击 electron.exe 运行
5、【Linux】开通运行权限 chmod +x electron；https://blog.csdn.net/saoraozhe3hao/article/details/electron 运行
6、【Linux 图形化界面】设置桌面入口
在桌面新建 name.desktop，填入
添加可执行权限：chmod a+x name.desktop
允许启动：右键 Allow Launching
Electron 打包发布 之 electron-packager
缓存目录：~/.config/项目名
微信小程序开发
对比
与微信网页：微信网页 给 微信提供的是 URL，小程序给微信提供的是 源代码；微信给小程序提供了框架、组件、更多Native能力的API；小程序需要审核才能上线；小程序被收藏后有更多入口；
与MVVM：page 接近于 vue 的单文件组件，模板、样式、脚本完全分离，模板采用xml；检查模型变化的方式 this.setData() 接近于 react 的 this.setState()
代码示例
1、获取用户信息（昵称、头像、性别、省市县）
2、登录（获取openId，session_key、unionid）
3、获取手机号
前提：已登录
4、获取unionId
前提：微信开放平台上绑定了小程序，已经调用过wx.login()，后端已存有session_key
5、登录与获取用户信息的结合
0、用户进入小程序时，有16种情况：有没有getUserInfo权限 2 * 我方服务器有没有记录这个用户 2 * 有没有登录我方服务器 2 * 有没有登录微信服务器
1、虽然登录与获取用户信息可以分离，但是可以设计成 获取用户信息 是登录的前提，从而能采集一些用户信息；具体来说是，用户触发 getUserInfo 按钮 后再 wx.login()，并把用户信息保存到后端
2、用户触发过 getUserInfo 按钮，即可奖获取的信息保存到后端，但是有必要获取用户最新的信息，因此可以设计成每次登录都触发 getUserInfo
3、第一次获取用户信息 只能是 getUserInfo 按钮，之后可以是 wx.getUserInfo，可以设计成 任何情况都是 getUserInfo 按钮，从而不用区分两种情况
4、有getUserInfo权限的情况下，使用getUserInfo 按钮，不会弹出授权框，但能正常回调；因此，在显式登录的场景中，（type为getUserInfo的登录按钮 + wx.login） 不会比 （登录按钮 + wx.getUserInfo + wx.login）给用户带来更多负担；因此，在显式登录的场景中，无需判断是否有getUserInfo权限，统统使用getUserInfo 按钮
5、不在code2Session时获取unionId，因为此时往往没有unionId；可用在登录我方服务器后判断是否已存有unionId，没有的话再调用wx.getUserInfo({withCredentials: true})获取加密数据，发给后端解密出unionId（前提是 微信开放平台上绑定了小程序）
6、登录功能可以设计成一个抽屉，能被各处调用
总结：
方案一：不要自动wx.login()，用户要进行登录后才能有的操作时，弹出登录抽屉，抽屉里放置getUserInfo 按钮；用户触发getUserInfo 按钮后，再调用wx.login()，并将最新的用户信息保存到后端；缺点，用户每次都要显式的登录
方案二：先用wx.getSetting判断有没有getUserInfo权限，有的话，自动wx.getUserInfo并wx.login，并将最新的用户信息保存到后端；还没有getUserInfo权限的话，再按方案一
场景一：在有退出功能的小程序中，不能自动wx.login()，需要显式的登录，此场景采用方案一
6、登录与获取手机号的结合
需求：获取用户手机号即登录
0、获取手机号之前必须先wx.login，且后端存有session_key
1、只有一个按钮获取手机号的话，那么得不到getUserInfo权限，但是可以通过<open-data>显示用户基本信息
方案
1、刚进入小程序就自动wx.login()，并登录我方服务器，如果已有phoneNumber，则返回给前端，如果没有phoneNumber，当作未登录
2、未登录的情况下，用户要进行登录后才能有的操作时，弹出登录抽屉，抽屉里放置getPhoneNumber 按钮，用户触发getPhoneNumber 按钮后，调用敏感数据解密接口，得到phoneNumber
3、用<open-data>显示用户基本信息
7、cookie
小程序不支持cookie机制，但可以读取响应头的Set-cookie，有Storage机制。
可以用现成的组件使得小程序支持cookie：https://github.com/charleslo1/weapp-cookie
8、canvas
获取CanvasContext实例的三中方法：
9、<web-view>打开第三方网页
问题：需要配置域名白名单，iframe 引用的域名也需要
方案1：在 nginx 中配置代理，将请求转发到第三方；缺点：会受防盗链限制
方案2：小程序关联的公众号网页中嵌入ifram（待试）
10、自定义TabBar
1、参考官方文档的示例代码
2、修改 path 和 icon 路径，注意有没有前面的 /
3、在TabBar组件中切换页面
4、由于每个Tab页都有各自的TabBar组件实例，因此在TabBar组件中无法知道当前实例属于哪个Tab页，因此在Tab页中告知TabBar组件实例其所在的index
11、iPhoneX 底部横条避让
12、注意事项
IOS 不支持 webp 图片
IOS 抖音小程序 不支持引用网络字体文件，需要把字体文件放到项目中
运行平台
小程序平台：百度智能小程序、支付宝小程序、微信小程序、QQ小程序、字节跳动小程序
快应用平台：努比亚手机、联想手机、一加手机、小米手机、vivo手机、华为手机、OPPO手机、金立手机、魅族手机、中兴手机
跨平台框架
omix：是腾讯omi项目的子项目，是腾讯webstore项目的进化版，是原生微信小程序项目的状态管理组件、响应式组件
腾讯 WePY（类vue）：支持输出 微信小程序
腾讯 kbone（纯vue，模拟浏览器环境）：支持输出 微信小程序、H5
美团点评 mpvue（纯vue）：支持输出 微信小程序、H5
滴滴 MPX（微信小程序原生语法增强为类vue）：支持输出 微信/QQ/支付宝/百度/头条小程序
滴滴 Chameleon（CML，类vue）：支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、Weex
DCLOUD uni-app（纯vue）：支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、Weex
京东 Taro（纯react）：支持输出 微信/QQ/支付宝/百度/头条小程序、快应用、H5、React Native
阿里巴巴 Rax（类React）：支持输出 支付宝/微信小程序、H5（PWA）、Weex、Flutter
小程序框架指标
跨端支持度：小程序、H5、Native App、快应用
学习成本：是否独立DSL（Domain Specific Language，领域特定语言）、目前掌握的是vue还是react
组件丰富度：官方(内置)组件库、第三方组件库、是否支持原生(H5、小程序)组件库
坑数：跨端数越多，bug就会越多，性能就会越差，使用各端的原生能力就越难；增强型框架跨平台
热度：社区活跃度、更新频率
微信小程序组件库
有赞-Vant Weapp、微信-weui-miniprogram、TalkingData - iView Weapp、蘑菇街-MinUI、Wux Weapp（个人项目，组件最多）
京东-TaroUI（基于Taro框架）、ColorUI（WXSS框架）、腾讯-WeUI-wxss（WXSS框架）
转译型 与 增强型
转译型框架（MPX以外）：将其他的语法规范转译为小程序语法规范
转译型框架的缺点：不支持源框架的一些语法特性，不支持原生组件库(H5、小程序)
增强型框架（MPX）：基于某一小程序语法规范，使用Vue中优秀的语法特性进行增强；但在跨平台编译时，仍然是转译
增强型框架的优点：可以从原生小程序项目渐进迁移、一定程度上支持原生小程序组件库
增强型框架的缺点：由于是基于某一小程序的语法规范，跨平台编译时，更难抹平平台差异；一旦抹平了，也就有了转译型框架的缺点
总结：不跨平台编译时，用MPX作为语法增强，是可行的。需要跨平台编译时，会出现很多不支持转译的语法特性
MPX跨平台编译
思路：新平台不支持的内容，要么抹平 要么 再编译前进行差异化
抹平案例：微信小程序代码 编译成 头条小程序
问题：vant-weapp组件库用到了<wxs>，不能跨平台编译成 头条小程序
解决思路：去掉vant-weapp里的<wxs>
步骤：
1、把 /wxs 目录下的 wxs文件 改为 .js，在wxss中引入
2、把这些文件里的wxs语法改为js语法，例如 模块导入导出语法、getRegExp()改为new RegExp()、判断是否是数组array.constructor === 'Array' 改为 Array.isArray(array)
3、template里调用方法 {{f(x)}} 改用 computed 方法实现
4、template里wx:for 内 调用方法 {{f(x)}} 得想办法展开成表达式 或者 数据预处理
kbone
不能用现成的第三方vue组件库；使用了小程序原生组件，则web端用不了；使用kbone-ui，才能两端通用
启动时打开指定路径：每个页面要设置成单独的page，而不能是一个单页多个路由；打开新页要用window.open(route); 否则会出现页面空白、没有返回按钮、没有Home按钮等问题
从外部（公众号菜单、分享到对话框的卡片、分享到朋友圈的卡片、服务消息、小程序码等）打开指定路径要用 pages/xx/index?type=share&targeturl=${encodeURIComponent(location.href)}，这里坑比较多，比如生成小程序码时不能带参
uniapp
1、微信小程序不支持指定tabBar高度，开发者工具模拟器某些机型下，tabBar文字会贴边，不代表真机会贴边