常见的小程序框架
1
2
3
4
uni-app (DCloud，基于Vue.js)
taro (京东，基于React)
mpvue (美团，基于Vue.js)
wepy (腾讯，基于Vue.js)
常见的移动跨平台原生渲染引擎
1
2
3
Flutter (google，2015年5月，使用Dart语言)
Weex (阿里巴巴，2016年4月，可以使用Vue、Rax[基于React]前端框架)
React Native (Facebook，2015年4月，使用React)

uni-app技术栈

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
文档: https://uniapp.dcloud.io/frame
基础技术栈: 
js、css、html: 前端开发基础知识
HTML5: H5，移动端html规范
Vue.js: js的view-data绑定式的框架(尤雨溪开发)
uni-app: 框架结构、组件、API
扩展技术栈: 
Nodejs: 基于 Chrome V8 JavaScript 引擎构建的 JavaScript 运行时 (Ryan Dahl开发)
Weex: js开发移动APP的渲染引擎 (阿里出品，uni中使用nvue，即native vue)
HTML5+: js可以直接调用丰富的原生能力，在移动App端内置HTML5+引擎，不能运行到小程序和H5端 (中国HTML5+联盟)
NPM: 管理依赖
TypeScript: JavaScript的扩展
ES6: ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版
WXS: 一套运行在视图层的脚本语言(https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/)

一些知识点

Flex布局

Flex布局是2009年W3C提出的一种新的布局方案
Flex布局的6个属性

1
2
3
4
5
6
7
8
9
10
11
1.flex-direction: 主轴的方向
flex-direction: row(默认，向右) | row-reverse(向左) | column(向上) | column-reverse(向下)
2.flex-wrap: 换行方式
flex-wrap: nowrap(默认，不换行) | wrap(默认，换行，第一行在上方) | wrap-reverse(默认，换行，第一行在下方)
3.flex-flow: 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.justify-content: 主轴上的对齐方式
justify-content: flex-start(默认左对齐) | flex-end | center | space-between(两端对齐，前后不留空间) | space-around(两端对齐，前后各留一半空间)
5.align-items: 交叉轴上的对齐方式
align-items: flex-start(交叉轴的起点对齐) | flex-end | center | baseline(项目的第一行文字的基线对齐) | stretch(默认，item未设置高度或设为auto，将占满整个容器的高度)
6.align-content: 多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认，轴线占满整个交叉轴)

Flex布局Item的6个属性

1
2
3
4
5
6
order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

vuex管理全局数据
1
2
3
4
5
state: 全局使用的数据
getters: state的计算属性
mutations: 同步更新state
actions: 异步更新state
modules: 扩展用法，比较大的项目中模块化处理全局数据

一般写法示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: { //全局状态的数据state
		userInfo: {},
	},
	getters: { //state的计算属性
		uid: state => {
			return 'ID_' + state.userInfo.userId
		},
		userTag: (state, getters) => {
			return getters.uid + state.userInfo.userName
		}
	},
	mutations: { //同步更新state (调用commit提交)
		login(state, userData) {
			state.userInfo = userData;
		},
		logout(state) {
			state.userInfo = {};
		}
	},
	actions: { //异步更新state (调用dispatch提交)
		login({ commit }, userData) {
			return commit('login', userData)
		},
		logout({ commit }) {
			return commit('logout')
		}
	},
	strict: process.env.NODE_ENV === 'development' //开发环境中启用严格校验
})

export default store

promise处理异步计算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Promise: ES6(JavaScript 6.0)中加入的异步处理解决方案
Promise对象代表一个异步操作，有三种状态: pending（进行中）、fulfilled（已成功，通过resolve方法设置状态）和rejected（已失败，通过reject方法设置状态）
var promiseObj = new Promise(function(resolve, reject){
		//做一些耗时操作
		if(success) { resolve(data) } else { reject(errorData) }
	});
then用法: promise().then(onResolveListener,onRejectListener)
catch用法: promise().then(onResolveListener).catch(onFailOrRejectListener)
链式调用: promise().then(onResolveListener:{return newPromise()}).then(...) //推荐的串行写法
并行统一处理结果，all用法: Promise.all([promise1(), promise2(), promise3()]).then(...) //统一处理多个并行任务的结果(任一个任务reject了，都返回到失败中处理)
并行按执行完成时间先后处理结果，race用法: Promise.race([promise1(), promise2(), promise3()]).then(...) //哪个任务先完成先处理，处理结果时不影响其他任务的运行

async: async函数返回一个 Promise 对象，可以使用then方法添加回调函数。
/*使用关键字 async 声明异步函数. 参数声明和普通函数没有任何的区别*/
async function asyncFun(param1, param2, ...){
    //do some thing
    return result;
}
/*调用异步函数, 返回值是一个 Promise 对象*/
asyncFun(param1, param2, ...).then(...)

await: 当函数执行的时候，遇到await会暂停执行，等到await的异步函数返回结果后，再继续执行函数体内后面的语句。
async function asyncFun2(param1, param2, ...){
    var result1 = await asyncFun1() //await异步函数为耗时操作语句，必须运行在async方法中
    return deal(result1)
}
Electron使用H5代码生成电脑客户端程序

参考： https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html
参考： https://www.cnblogs.com/zjf-1992/p/7354931.html?utm_source=gold_browser_extension
Electron模板工程： https://github.com/electron/electron-quick-start
1.使用前端框架编写完业务逻辑，进入项目目录；
2.修改 config/index.js ：将publicPath: '/'配置改成publicPath: './' (否则程序运行时会显示找不到路径)；
3.回到项目目录，使用相关npm命令打H5包，比如打好的包生成到dist目录；
4.进入Electron模板工程目录，把生成的dist目录复制到模板工程目录下；
5.打开Electron主入口main.js，更新入口html配置成刚打包好的H5：mainWindow.loadFile('./dist/index.html')；
6.进入Electron工程目录，执行npm install-npm start命令即可在电脑窗口模式预览操作H5界面；
7.在Electron工程目录通过命令安装打包EXE工具：npm install electron-packager；
8.在package.json中增加scripts配置："package": "electron-packager ./ --overwrite -all"；
9.执行打包命令：npm run package，即可生成EXE文件；