Hola学习总结
1.Hola是什么？
Hola 是一个开放式跨端跨框架解决方案，支持使用 Vue 框架来开发 微信小程序 / H5 / GMU 小程序 / 支付宝小程序 / GMU App 等应用。
对于使用者来说，可以一套代码适配多端（Web、快应用、微信小程序等）。
2. 快速上手
#1.安装cli
npm install -g lighting
#2.安装hola插件
light plugin -a hola
#3.查看插件列表
light plugin -l
#4.创建一个项目
light create -t hola -n myApp
#5.执行编译
npm script
npm run dev:weapp
npm run build:weapp
#or
light release --type weapp --watch
执行编译微信小程序后，并用微信开发者工具打开后，如下图所示。
这里需要注意的是，通过hola创建的默认文件project.config.json只能用于微信小程序。其基本配置如下：
gmu小程序配置
3.页面配置
可以通过多种形式对小程序页面进行配置。如下：
- 页面目录
index.config.js
对窗口的配置，会覆盖app.config.js的window中相同的配置项。
- 在页面目录
index.vue中配置
需要注意的是，使用 definePageConfig 定义的页面配置对象 不能使用变量 。如果在vue文件中进行了配置，就不用在index.config.js来进行配置了。
<template>
<view className='index'/>
</template>
<script>
definePageConfig({
navigationBarTitleText:'首页'
})
export default{}
</script>
4.设置配置同时编译和打开开发者工具
#设置同时打开微信和支付宝开发者工具
light config set <weapp.|alipay> <tool-path>
#编译指令命令
light release --type weapp --open
设置成功，如下图所示。
执行编译成功如下图所示。
5.跨平台开发
- 内置环境变量
内置环境变量
process.env.TARO_ENV，用于帮助用户做一些特殊情况处理
个人感觉，有点类似Node中的process.env(Node.js中的一个环境对象)。在编译阶段，会移除不属于当前编译类型的代码，只保留当前编译类型下的代码。
主要作用如下：
- 可以在不同端引用不同资源
- 可以在不同端的页面加载所需的组件
- 设置多端的不同路由规则
注意：不要解构环境变量。
- 统一接口的多端文件
开发者可以通过使用 统一接口的多端文件 ，来解决跨端差异。
假设多端对Test组件都存在差异， 代码定义形式如下：
├── test.js Test 组件默认的形式，编译到微信小程序、支付宝小程序和 H5 之外的端使用的版本
├── test.weapp.js Test 组件的微信小程序版本
├── test.alipay.js Test 组件的支付宝小程序版本
├── test.gmump.js Test 组件的gmu小程序版本
├── test.gmuapp.js Test 组件的gmuapp版本
└── test.h5.js Test 组件的 H5 版本
使用形式，对于使用者来说，正常引用Test即可。
6. GMU调试
#1.安装hola插件
yarn add @holajs/plugin-platform-gmump
#2.进入到gmuapp文件目录
cd ./dist/gmuapp
#3.添加debug命令
light release -wb --debug
debug命令完成后，自动打开浏览器，如下图。
7.组件库
Hola 以 微信小程序组件库 为标准，结合 vue 语法规范，定制了一套自己的组件库规范。
7.1 视图容器
主要对view、scrollview、swiper三种视图容器进行了细致的学习。
<template>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>Vertical Scroll 纵向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view
:scroll-y="true"
style="height: 300rpx"
@scrolltoupper="upper"
@scrolltolower="lower"
@scroll="scroll"
:scroll-into-view="toView"
:scroll-top="scrollTop"
>
<view id="demo1" class="scroll-view-item demo-text-1">1</view>
<view id="demo2" class="scroll-view-item demo-text-2">2</view>
<view id="demo3" class="scroll-view-item demo-text-3">3</view>
</scroll-view>
</view>
</view>
<view class="components-page">
<text>flex-direction: row 横向布局</text>
<view class="flex-wrp flex-wrp-row" hover-class="hover">
<view class="flex-item demo-text-1" :hover-stop-propagation="true" />
<view
class="flex-item demo-text-2"
hover-start-time="1000"
hover-class="hover"
/>
<view
class="flex-item demo-text-3"
hover-stayTime="1000"
hover-class="hover"
/>
</view>
</view>
<view class="swiper">
<swiper
class="test-h"
indicator-color="#999"
indicator-active-color="#333"
:vertical="true"
:circular="true"
:indicator-dots="true"
:autoplay="true"
>
<block v-for="(item, index) in background" :key="item">
<swiper-item>
<view :class="background[index]">
{{ index }}
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
<script>
// import { method } from "lodash";
const order = ["demo1", "demo2", "demo3"];
export default {
name: "detail",
data() {
const background = ["demo-text-1", "demo-text-2", "demo-text-3"];
return {
background,
scrollTop: 0,
toView: "demo2",
};
},
methods: {
upper(e) {
console.log("upper", e);
},
lower(e) {
console.log("lower", e);
},
scroll(e) {
console.log("scroll", e);
},
},
};
</script>
<style>
.flex-wrp {
display: flex;
}
.flex-wrp-column {
flex-direction: column;
}
.flex-wrp-row {
flex-direction: row;
padding: 20px;
background: #f1f1f1;
}
.flex-item {
width: 180px;
height: 90px;
}
.demo-text-1 {
background: #ccc;
}
.demo-text-2 {
background: #999;
}
.demo-text-3 {
background: #666;
}
.hover {
background: #000;
}
.scroll-view-item {
height: 300rpx;
}
</style>
7.2 基础内容
主要对icon、text、progress三种基础内容进行了学习。
7.3 表单组件
主要对textarea、button、form、checkbox、picker进行了细致学习。
其中，form可以使用内置的behaviors，支持以下三种内置。
-
wx://form-field
使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下
name和value两个属性。 -
wx://form-field-group
-
wx://form-field-button
微信小程序中的behaviors类似Vue中的mixins。每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。
//wxml
<form bindsubmit="formSubmit">
<text>表单</text>
<custom-form-field name="custom-name"></custom-form-field>
<button form-type="submit">提交</button>
</form>
8.媒体组件
因现在很多在线媒体受到限制（比如很多音乐网站禁止使用外链），所以仅对image、video进行着重学习。
9.多端处理的历史发展
以Taro为例，重点对编译时和运行时进行学习。
「当一门语言的能力不足，而用户的运行环境又不支持其它选择的时候，这门语言就会沦为 “编译目标” 语言」
早版本的Taro的思想是“重编译时，轻运行时”，并且和React强绑定。其中，编译时是通过Babel完成。简要过程如下：
后面，Taro团队在考虑提升“运行时”的作用，创建了taro-runtime包，从而达到了实现框架更大的灵活性和更好的适配性的目的。具体来说，该团队在包中实现了一套高效、精简版的DOM/BOM API，通过 Webpack 的 ProvidePlugin 插件，注入到小程序的逻辑层，如下图所示。
现在版本的Taro的本质可以看作是将React/Vue运行在小程序上。
学会的一些小技巧
在很多命令行语句中，如果不明白命令的作用，可以-h一下，即可查看帮助，类似linux shell命令，如：
一些心得
个人感觉，多端框架很多工作其实是在做一些polyfill的事情，如抹平不同小程序的api差异，生命周期的“对齐”。在今后的工作过程中，应具备“与时俱进”的意识，提高对小程序领域发展的敏感性。在优先学习深入“技术栈”的前提，也要扩展一下“广度”，如一些工具链的使用、工程化思想。