3 | {{info.version}}
7 |
8 |
9 |
10 |
11 |
32 |
--------------------------------------------------------------------------------
/docs/hotfix/old/usage.md:
--------------------------------------------------------------------------------
1 | # 接入方式
2 |
3 | ## 引入方式
4 |
5 | 可以在`main.js`中添加`checkUpdate(URL);`,打开 app 就会自动检测.还可以放在`检查更新`的按钮上触发.
6 |
7 | ### ES6 Module 引入
8 |
9 | 首先在`page.json`把用到`checkUpdate`的页面加上管道`|plusReady`.
10 |
11 | 然后加载使用.
12 |
13 | ```js
14 | import { checkUpdate } from "./utils/update";
15 | checkUpdate(URL); // 填入您检查api的url地址
16 | ```
17 |
18 | ### ` // 这段必须加载title底下
25 | ....
26 |
27 |
30 | ```
31 |
32 | 如果您没有后端接入,可以使用`FEmirror云更新`
33 |
--------------------------------------------------------------------------------
/test/unit/jest.conf.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | rootDir: path.resolve(__dirname, '../../'),
5 | moduleFileExtensions: [
6 | 'js',
7 | 'json',
8 | 'vue'
9 | ],
10 | moduleNameMapper: {
11 | '^@/(.*)$': '
4 | 
5 |
6 |
5 | 22 | 23 |
26 |
29 |
32 |
34 | 35 |
3 | 
4 |
5 |
6 |
8 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
19 |
20 |
22 |
23 |
24 |
28 |
29 |
30 |
31 |
43 |
44 |
66 |
--------------------------------------------------------------------------------
/src/page/mui/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 |
4 |
5 | ![]()
6 |
7 |
8 |
9 |
10 |
13 | 14 | 15 |
16 | 30 |
31 |
40 |
41 |
42 |
59 |
60 |
62 |
--------------------------------------------------------------------------------
/docs/hotfix/old/introduction.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | > `Hotfix`+`FEmirror 云更新` 让您的 H5+应用快速拥有热更新功能.
4 |
5 | 只需`几分钟`,让您的应用拥有更新能力!
6 |
7 | | iphone 热更新 效果如下 | 安卓热更新效果如下 | 安卓安装更新如下 |
8 | | ---------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
9 | | 4 |
10 |
Mui V2.0
11 |这里主要演示MUI的一些样式和JS,我仍然推荐您使用其他vueUI(Vux,Vant,mint)来代替mui
12 |13 | 14 | 15 |
16 | 30 |
31 |
-
32 |
-
33 | 面板1
34 | 35 |37 |
面板1子内容
36 |
38 |
3 |
84 |
85 |
86 |
96 |
97 |
98 |
114 |
--------------------------------------------------------------------------------
/docs/hotfix/config.md:
--------------------------------------------------------------------------------
1 | # Hotfix配置
2 |
3 | 热更新能够不提交应用商店审核而修改 APP 内容,使得 app 的迭代变的非常灵活.
4 |
5 | `MogoH5+`在`1.3.0`后加入了`热更新/安装更新`的集成.同时,我们的`热更新服务器`也在内测中,将在不久公测使用.您无需后端就可以完成整个软件的`热更新/安装更新`服务.
6 |
7 | ## 介绍
8 |
9 | 在使用热更新前,请看完这份介绍再使用.
10 |
11 | ### 热更新
12 |
13 | 对于安卓来说,热更新是没有任何问题的,但是苹果您可以看下面这段话.
14 |
15 | #### App store 应用更新说明(引自 dcloud)
16 |
17 | > 应用资源更新肯定是违反 apple 政策的，但目前看起来它也不管。你在官网案例那里下载 Appstore 版本的那些 app，大多启动后都会提示更新，反正也都没下架。如果你不是很大的公司，apple 不会理睬你。如果你是大公司，建议不要做整体更新，每次更新几个页面，也不要提示更新后需要重启，这样会安全点。
18 |
19 | 作者本人的实践中也经常使用热更新,名声不大,不频繁基本上可以自由使用.
20 | 同样,我们加入了`静默更新`这种比较无脑的更新.
21 |
22 | ### 安装更新
23 |
24 | 安装更新在这里指的就是更新大版本,比如添加了模块,必须重新安装.
25 |
26 | #### 在安卓的安装更新
27 |
28 | 1. 可以让 APP 提示,然后用户选择自己下载安装
29 | 2. 应用商店更新
30 |
31 | #### 在苹果的安装更新
32 |
33 | 1. 必须提交 AppStore 提交审核
34 |
35 | 在这里顺便提一下,苹果用户的习惯一般是自己主动更新.
36 | 在苹果应用商店的大厂 app (微信,淘宝,京东) 更新几乎不会受到 app 的更新推送,也没有所谓`检查更新`的功能,也就是说,更新是用户主动操作的.我们的`迭代`同样也遵循这条`行规`.
37 |
38 |
39 | ## Hotfix参数
40 |
41 | |参数|说明|类型|
42 | |-|-|---|
43 | |`url`|更新请求地址|string|
44 | |`before(data)`| `data`返回的是请求后的`json`数据; 可在函数中执行安装前进行的操作,在此函数中,可以做一些确认操作,返回`Promise.resolve()`则执行下载安装,不返回或返回其他则不执行下载安装|`Promise`|
45 | |`success`|安装完成后执行的动作,比如重启app|`void`|
46 | |`error(e)`|返回error对象,一般在调试中使用|`Error`|
47 | |`onProgress(n)`|下载进度,`n`为0-100的下载进度|`int`|
48 |
49 |
50 |
51 | ## 后端接收的数据格式
52 |
53 | `checkUpdate(url)` 是以 `POST` 去访问 URL 的.数据类型为`application/json`
54 |
55 | | 名称 | 描述 | 类型 |
56 | | ------- | ------------------------------- | ------ |
57 | | version | app 当前的版本 ,如 2.1.0 | string |
58 | | os | app 设备的系统信息 比如系统版本 | json |
59 | | device | app 设备的设备信息 比如 uuid | json |
60 |
61 | ## 后端返回的数据格式
62 |
63 | 下面是一个完整的数据返回 返回格式为`application/json` ,返回状态码为`200`.
64 |
65 | > 注意 : 返回`200`以外的状态码将不被处理,如果想自行处理可以改写代码
66 |
67 | | 名称 | 描述 | 参数 |
68 | | -------------- | --------------------------------------------------------------- | ------------------------ |
69 | | name | 版本号 如果检测的版本大于本地版本就会更新 | string |
70 | | title | 升级提示标题 | string |
71 | | description | 升级提示内容 | string |
72 | | platform | 符合升级的平台 ios:升级苹果 android:升级安卓 both:都更新 | `ios` ,`android`, `both` |
73 | | hotupdate_type | 更新提示 silence:静默更新 tip:提示更新 (apk 的安装是需要提示的) | `silence`,`tip` |
74 | | android_url | 更新下载地址 以`.apk`,`.wgt`结尾的 http 地址 | url |
75 |
--------------------------------------------------------------------------------
/src/utils/common.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 该js为所有页面都必须加载的js
3 | * 可以用于全局添加某功能
4 | */
5 | import FastClick from "fastclick";
6 | // 去除300ms延迟
7 | document.addEventListener(
8 | "DOMContentLoaded",
9 | function() {
10 | FastClick.attach(document.body);
11 | },
12 | false
13 | );
14 |
15 | // 自动关闭窗口 可根据具体逻辑自定义
16 | function plusReady() {
17 | plus.key.addEventListener(
18 | "backbutton",
19 | function () {
20 | var ws = plus.webview.currentWebview();
21 | if (ws.webviewPreload == true) {
22 | plus.webview.hide(ws, 'auto');
23 | } else {
24 | plus.webview.close(ws, 'auto');
25 | }
26 | },
27 | false
28 | );
29 | }
30 | if (window.plus) {
31 | plusReady();
32 | } else {
33 | document.addEventListener("plusready", plusReady, false);
34 | }
35 | // 页面调试工具
36 | var print = function (json, options) {
37 | var reg = null,
38 | formatted = "",
39 | pad = 0,
40 | PADDING = " ";
41 | options = options || {};
42 | options.newlineAfterColonIfBeforeBraceOrBracket =
43 | options.newlineAfterColonIfBeforeBraceOrBracket === true ? true : false;
44 | options.spaceAfterColon = options.spaceAfterColon === false ? false : true;
45 | if (typeof json !== "string") {
46 | json = JSON.stringify(json);
47 | } else {
48 | json = JSON.parse(json);
49 | json = JSON.stringify(json);
50 | }
51 | reg = /([\{\}])/g;
52 | json = json.replace(reg, "\r\n$1\r\n");
53 | reg = /([\[\]])/g;
54 | json = json.replace(reg, "\r\n$1\r\n");
55 | reg = /(\,)/g;
56 | json = json.replace(reg, "$1\r\n");
57 | reg = /(\r\n\r\n)/g;
58 | json = json.replace(reg, "\r\n");
59 | reg = /\r\n\,/g;
60 | json = json.replace(reg, ",");
61 | if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
62 | reg = /\:\r\n\{/g;
63 | json = json.replace(reg, ":{");
64 | reg = /\:\r\n\[/g;
65 | json = json.replace(reg, ":[");
66 | }
67 | if (options.spaceAfterColon) {
68 | reg = /\:/g;
69 | json = json.replace(reg, ":");
70 | }
71 | json.split("\r\n").forEach(function (node, index) {
72 | //console.log(node);
73 | var i = 0,
74 | indent = 0,
75 | padding = "";
76 |
77 | if (node.match(/\{$/) || node.match(/\[$/)) {
78 | indent = 1;
79 | } else if (node.match(/\}/) || node.match(/\]/)) {
80 | if (pad !== 0) {
81 | pad -= 1;
82 | }
83 | } else {
84 | indent = 0;
85 | }
86 |
87 | for (i = 0; i < pad; i++) {
88 | padding += PADDING;
89 | }
90 |
91 | formatted += padding + node + "\r\n";
92 | pad += indent;
93 | });
94 | console.log(formatted);
95 | };
--------------------------------------------------------------------------------
/src/utils/webview.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 打开一个webview窗口
3 | */
4 | export function openWebview(config, style = {}, extras = {}) {
5 | var wv = plus.webview.create(
6 | config.url,
7 | config.id,
8 | {
9 | top: 0, // 新页面顶部位置
10 | bottom: 0, // 新页面底部位置
11 | render: "always",
12 | popGesture: "hide",
13 | bounce: "vertical",
14 | bounceBackground: "#efeff4",
15 | titleNView: {
16 | // 详情页原生导航配置
17 | backgroundColor: "#f7f7f7", // 导航栏背景色
18 | titleText: config.title, // 导航栏标题
19 | titleColor: "#000000", // 文字颜色
20 | type: "transparent", // 透明渐变样式
21 | autoBackButton: true, // 自动绘制返回箭头
22 | splitLine: {
23 | // 底部分割线
24 | color: "#cccccc"
25 | }
26 | },
27 | ...style
28 | },
29 | extras
30 | );
31 | var w = plus.nativeUI.showWaiting();
32 | // 监听窗口加载成功
33 | wv.addEventListener(
34 | "loaded",
35 | function () {
36 | wv.show("slide-in-right"); // 显示窗口
37 | w.close();
38 | w = null;
39 | },
40 | false
41 | );
42 | }
43 |
44 | // webview.open 打开得很快 但是不能传参
45 | export function openWebviewFast(url, id, title) {
46 | plus.nativeUI.showWaiting("加载中");
47 | plus.webview.open(
48 | url,
49 | id,
50 | {
51 | titleNView: {
52 | backgroundColor: "#f7f7f7", // 导航栏背景色
53 | titleText: title, // 导航栏标题
54 | titleColor: "#666", // 文字颜色
55 | // type: "transparent", // 透明渐变样式
56 | autoBackButton: true, // 自动绘制返回箭头
57 | splitLine: {
58 | // 底部分割线
59 | color: "#cccccc"
60 | }
61 | },
62 | },
63 | "slide-in-right",
64 | 420,
65 | function () {
66 | plus.nativeUI.closeWaiting();
67 | }
68 | );
69 | }
70 | // 预加载页面 速度很快,但是不要加载超过10个
71 | export function preLoad(webviews = []) {
72 | webviews.map(webview => {
73 | const fullExtras = {
74 | webviewPreload: true,
75 | ...webview.extras
76 | };
77 | plus.webview.create(
78 | webview.url,
79 | webview.id,
80 | {
81 | top: 0, // 新页面顶部位置
82 | bottom: 0, // 新页面底部位置
83 | render: "always",
84 | popGesture: "hide",
85 | bounce: "vertical",
86 | bounceBackground: "#efeff4",
87 | titleNView: {
88 | // 详情页原生导航配置
89 | backgroundColor: "#f7f7f7", // 导航栏背景色
90 | titleText: webview.title, // 导航栏标题
91 | titleColor: "#000000", // 文字颜色
92 | type: "transparent", // 透明渐变样式
93 | autoBackButton: true, // 自动绘制返回箭头
94 | splitLine: {
95 | // 底部分割线
96 | color: "#cccccc"
97 | }
98 | },
99 | ...webview.style
100 | },
101 | fullExtras
102 | );
103 | });
104 | }
105 |
106 | export function showWebviewById(id) {
107 | plus.webview.show(id, "slide-in-right", 200);
108 | }
109 |
--------------------------------------------------------------------------------
/docs/guide/update_log.md:
--------------------------------------------------------------------------------
1 | # 更新日志
2 |
3 | 
4 |
5 | ### 1.3.0 [20180727]
6 |
7 | #### [新增]
8 |
9 | 1. 增加`热更新/迭代`集成,具体文档查看[热更新/迭代](../practice/hotfix.md)
10 | 2. 增加自定义返回实现,返回按钮可以[自定义返回按钮事件](./qa.html#自定义返回按钮事件)
11 | 3. 增加"商品加入购物车"功能实例演示页面间通讯
12 | 4. 新增 VConsole 以 webpack 插件的形式加载,`run build`会自动去掉
13 |
14 | #### [修复]
15 |
16 | 1. 修复了超多页面下调试慢的问题,使用`html-webpack-plugin-for-multihtml`解决
17 | 2. 修改了版本文档
18 |
19 | #### [升级指导]
20 |
21 | 1. 将 VConsole 在 common.js 中删掉,因为已经以 webpack 插件形式加载
22 | 2. `utils` 是我们会经常修改的, 如果有自己的工具库,请另建文件夹
23 |
24 | ### 1.2.0 [20180719]
25 |
26 | #### [新增]
27 |
28 | - 增加预加载窗口打开方式,根据不同场景使用不同的打开方式,可以大大提高 webview 的打开速度,首页已加入使用案例
29 | - 由于 VConsole 并不能解决全部调试问题,增加一个`print`方法,用于在 Hbuilder 上打印对象
30 |
31 | #### [速度优化方案]
32 |
33 | 最近许多反映脚手架很慢的可以参考一下优化方案,可以大大提高调试/打包速度.
34 |
35 | 1.2 的版本中移除了一些不必要的插件,应该会快那么一点吧.追求速度的继续往下看.
36 |
37 | 由于 demo 需要展示各种 ui,加载了各种的 ui 的 loader,所以如果开发者用不到可以将其移除.
38 |
39 | ##### 1.如果不使用 VUX
40 |
41 | 注释掉 `vux-loader` 即可,在`webpack.base.conf.js`中,修改以下代码
42 |
43 | ```
44 | const vuxLoader = require("vux-loader");
45 |
46 | module.exports = vuxLoader.merge(webpackConfig, {
47 | plugins: ["vux-ui"]
48 | });
49 | ```
50 |
51 | 修改后
52 |
53 | ```
54 | module.exports = webpackConfig;
55 | ```
56 |
57 | ##### 2.如果不使用 vant
58 |
59 | 移除掉`.babalrc`中以下代码
60 |
61 | ```
62 | [
63 | "import",
64 | {
65 | "libraryName": "vant",
66 | "libraryDirectory": "es",
67 | "style": true
68 | }
69 | ]
70 | ```
71 |
72 | ##### 3.优化建议
73 |
74 | 对于一些简单的页面其实可以不用 ui 框架,加载的时候会很快
75 | 使用 ui 框架大概也只会增加 100-200ms 的 js 运行时间,窗口过渡 200ms 的话,基本上不会影响用户体验
76 | 如果使用大量组件,增加的时间可能会比较大,这个时候可以考虑预加载这个窗口了.
77 |
78 | 参考:http://ask.dcloud.net.cn/article/25
79 |
80 | #### [升级方案]
81 |
82 | 几乎每个版本都是兼容的,所以只要将`src`中的文件转移到新版本就 ok 啦!
83 |
84 | #### [终极解决:webpack4]
85 |
86 | 由于官方的 `webpack3` 脚手架速度也提升不了多少了,所以 `1.2` 之后的 `1.x` 版本之后可能几乎不会对脚手架做修改了,只会增加很多实用的使用案例和工具方法
87 |
88 | 不过现在已经开始对 `webpack4` 开始研究了 webpack4 `2.0`版本见啦
89 |
90 | ### 1.1.0 [20180706]
91 |
92 | #### [新增]
93 |
94 | - `page.json`可以配置是否加载 mui 或者是否使用 plusready
95 | - 增加`fire`页面传值函数,详情可见商品详情页和首页的自定义事件
96 |
97 | #### [修复]
98 |
99 | - 修复了资源路径加载问题(需修改`page.json`配置)
100 | - 修复了 mui 加载不灵活的问题,减少打包的体积
101 | - 修复了 mui 字体文件加载失败的问题
102 |
103 | #### 1.0.x 到 1.1.x
104 |
105 | 由于之前资源路径的问题,目前的解决方案是修改`page.json`的配置,将原来的以路径作为键`mui/index`写成`mui.index`即可,如下
106 |
107 | 如果要使用 mui 就加入 `|mui`, 如果要使用 mui 就加入 `|plusReady`,不用则不加.
108 |
109 | > plusReady 在安卓手机上提前载入可能会影响页面打开速度,解决方法有两种:1 不提前使 plus 生效 2.预加载 plus
110 |
111 | ```json
112 | {
113 | "mui.index|mui|plusReady": "./src/page/mui/index.js"
114 | }
115 | ```
116 |
117 | #### 注意事项
118 |
119 | 请在`created`生命周期里面接收事件,否则会因为视图刷新多次执行.
120 |
121 | ### 1.0.1 [20180704]
122 |
123 | - 修复了 background 图片路径打包后不正确的问题
124 |
125 | ### 1.0.0 [20180630]
126 |
127 | - 使用 vue 官方脚手架作为基层,健壮性得到`史诗级`提升
128 | - 添加了 vux 的支持
129 | - 修改的 mui 的加载方式
130 | - 配置方面有部分变化,详情请看文档
131 | - 升级了安卓 app
132 |
133 | ### 0.3.0 [20180628]
134 |
135 | - 解决了因为新增/删除页面导致的 webpack 错误
136 | - 添加了 openWebview 的 extras 参数
137 |
138 | ### 0.2.0 [20180623]
139 |
140 | - 添加了对 mui 样式和 js 的支持
141 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mogo-h5plus",
3 | "version": "1.3.0",
4 | "description": "A Scaffolding To Develop H5+ App Fast.",
5 | "author": "ArH <626019610@qq.com>",
6 | "private": true,
7 | "scripts": {
8 | "dev": "nodemon -e json --exec \"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js\"",
9 | "start": "npm run dev",
10 | "unit": "jest --config test/unit/jest.conf.js --coverage",
11 | "test": "npm run unit",
12 | "build": "node build/build.js",
13 | "lint": "eslint --ext .js,.vue src test/unit",
14 | "docs:dev": "cd docs && vuepress dev",
15 | "docs:publish": "cd docs && ./deploy.sh"
16 | },
17 | "dependencies": {
18 | "axios": "^0.18.0",
19 | "fastclick": "git+https://github.com/mogoclub/fastclick.git",
20 | "h5plus-hotfix": "^1.0.1",
21 | "vant": "^1.1.10",
22 | "vconsole": "^3.2.0",
23 | "vue": "^2.5.2",
24 | "vux": "^2.9.2"
25 | },
26 | "devDependencies": {
27 | "autoprefixer": "^7.1.2",
28 | "babel-core": "^6.22.1",
29 | "babel-eslint": "^8.2.1",
30 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
31 | "babel-jest": "^21.0.2",
32 | "babel-loader": "^7.1.1",
33 | "babel-plugin-dynamic-import-node": "^1.2.0",
34 | "babel-plugin-import": "^1.8.0",
35 | "babel-plugin-syntax-jsx": "^6.18.0",
36 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
37 | "babel-plugin-transform-runtime": "^6.22.0",
38 | "babel-plugin-transform-vue-jsx": "^3.5.0",
39 | "babel-preset-env": "^1.3.2",
40 | "babel-preset-stage-2": "^6.22.0",
41 | "chalk": "^2.0.1",
42 | "copy-webpack-plugin": "^4.0.1",
43 | "css-loader": "^0.28.0",
44 | "eslint": "^4.15.0",
45 | "eslint-config-standard": "^10.2.1",
46 | "eslint-friendly-formatter": "^3.0.0",
47 | "eslint-loader": "^1.7.1",
48 | "eslint-plugin-import": "^2.7.0",
49 | "eslint-plugin-node": "^5.2.0",
50 | "eslint-plugin-promise": "^3.4.0",
51 | "eslint-plugin-standard": "^3.0.1",
52 | "eslint-plugin-vue": "^4.0.0",
53 | "extract-text-webpack-plugin": "^3.0.0",
54 | "file-loader": "^1.1.4",
55 | "friendly-errors-webpack-plugin": "^1.6.1",
56 | "html-webpack-plugin": "^2.30.1",
57 | "html-webpack-plugin-for-multihtml": "^2.30.2",
58 | "jest": "^22.0.4",
59 | "jest-serializer-vue": "^0.3.0",
60 | "less": "^3.0.4",
61 | "less-loader": "^4.1.0",
62 | "node-notifier": "^5.1.2",
63 | "nodemon": "^1.17.5",
64 | "optimize-css-assets-webpack-plugin": "^3.2.0",
65 | "ora": "^1.2.0",
66 | "portfinder": "^1.0.13",
67 | "postcss-import": "^11.0.0",
68 | "postcss-loader": "^2.0.8",
69 | "postcss-url": "^7.2.1",
70 | "rimraf": "^2.6.0",
71 | "semver": "^5.3.0",
72 | "shelljs": "^0.7.6",
73 | "uglifyjs-webpack-plugin": "^1.1.1",
74 | "url-loader": "^0.5.8",
75 | "vconsole-webpack-plugin": "^1.4.0",
76 | "vue-jest": "^1.0.2",
77 | "vue-loader": "^13.3.0",
78 | "vue-style-loader": "^3.0.1",
79 | "vue-template-compiler": "^2.5.2",
80 | "vux-loader": "^1.2.9",
81 | "webpack": "^3.6.0",
82 | "webpack-bundle-analyzer": "^2.9.0",
83 | "webpack-dev-server": "^2.9.1",
84 | "webpack-merge": "^4.1.0"
85 | },
86 | "engines": {
87 | "node": ">= 6.0.0",
88 | "npm": ">= 3.0.0"
89 | },
90 | "browserslist": [
91 | "> 1%",
92 | "last 2 versions",
93 | "not ie <= 8"
94 | ]
95 | }
96 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require("path");
6 | const ip = require("ip");
7 | module.exports = {
8 | dev: {
9 | // Paths
10 | vConsole: true, //是否显示VConsole
11 | assetsSubDirectory: "static",
12 | assetsPublicPath: "/",
13 | proxyTable: {
14 | "/api": {
15 | name: "DOUBANAPI",
16 | target: "https://api.douban.com",
17 | pathRewrite: { "^/api": "" },
18 | changeOrigin: true,
19 | secure: false
20 | },
21 | "/localApi": {
22 | name: "LOCALAPI",
23 | target: "http://127.0.0.1:7001",
24 | pathRewrite: { "^/localApi": "" },
25 | changeOrigin: true,
26 | secure: false
27 | },
28 | "/femirror": {
29 | name: "FemirrorAPI",
30 | target: "https://api.hotfix.femirror.com",
31 | pathRewrite: { "^/femirror": "" },
32 | changeOrigin: true,
33 | secure: false
34 | }
35 | },
36 |
37 | // Various Dev Server settings
38 | host: ip.address(), // can be overwritten by process.env.HOST
39 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
40 | autoOpenBrowser: false,
41 | errorOverlay: true,
42 | notifyOnErrors: true,
43 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
44 |
45 | // Use Eslint Loader?
46 | // If true, your code will be linted during bundling and
47 | // linting errors and warnings will be shown in the console.
48 | useEslint: true,
49 | // If true, eslint errors and warnings will also be shown in the error overlay
50 | // in the browser.
51 | showEslintErrorsInOverlay: false,
52 |
53 | /**
54 | * Source Maps
55 | */
56 |
57 | // https://webpack.js.org/configuration/devtool/#development
58 | devtool: "cheap-module-eval-source-map",
59 |
60 | // If you have problems debugging vue-files in devtools,
61 | // set this to false - it *may* help
62 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
63 | cacheBusting: true,
64 |
65 | cssSourceMap: true
66 | },
67 |
68 | build: {
69 |
70 | vConsole: true, //是否显示VConsole
71 | // Template for index.html
72 | index: path.resolve(__dirname, "../dist/index.html"),
73 |
74 | // Paths
75 | assetsRoot: path.resolve(__dirname, "../dist"),
76 | assetsSubDirectory: "assets",
77 | assetsPublicPath: "/",
78 |
79 | /**
80 | * Source Maps
81 | */
82 |
83 | productionSourceMap: false,
84 | // https://webpack.js.org/configuration/devtool/#production
85 | // devtool: '#source-map',
86 |
87 | // Gzip off by default as many popular static hosts such as
88 | // Surge or Netlify already gzip all static assets for you.
89 | // Before setting to `true`, make sure to:
90 | // npm install --save-dev compression-webpack-plugin
91 | productionGzip: false,
92 | productionGzipExtensions: ["js", "css"],
93 |
94 | // Run the build command with an extra argument to
95 | // View the bundle analyzer report after build finishes:
96 | // `npm run build --report`
97 | // Set to `true` or `false` to always turn it on or off
98 | bundleAnalyzerReport: process.env.npm_config_report
99 | }
100 | };
101 |
--------------------------------------------------------------------------------
/src/page/goods/cart.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |Essential Links
5 |-
6 |
- 7 | 11 | Core Docs 12 | 13 | 14 |
- 15 | 19 | Forum 20 | 21 | 22 |
- 23 | 27 | Community Chat 28 | 29 | 30 |
- 31 | 35 | Twitter 36 | 37 | 38 |
- 40 | 44 | Docs for This Template 45 | 46 | 47 |
39 |
Ecosystem
49 |-
50 |
- 51 | 55 | vue-router 56 | 57 | 58 |
- 59 | 63 | vuex 64 | 65 | 66 |
- 67 | 71 | vue-loader 72 | 73 | 74 |
- 75 | 79 | awesome-vue 80 | 81 | 82 |
3 |
4 |
10 |
18 |
19 |
26 |
27 |
28 |
127 |
128 |
--------------------------------------------------------------------------------
/src/page/vux/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | THX to: https://github.com/wechatui/swiper
4 | list模式下，默认高度为180px, 如果设置aspect-ratio会根据宽度自动计算高度
5 | go to 0
9 | go to 1
10 | go to 2
11 |
12 |
13 | 14 |
15 |
16 |
17 |
115 |
116 |
--------------------------------------------------------------------------------
/docs/hotfix/old/hotfix.md:
--------------------------------------------------------------------------------
1 | # Hotfix [项目地址](https://github.com/tyaqing/hotfix)
2 |
3 | 热更新能够不提交应用商店审核而修改 APP 内容,使得 app 的迭代变的非常灵活.
4 |
5 | `MogoH5+`在`1.3.0`后加入了`热更新/安装更新`的集成.同时,我们的`热更新服务器`也在内测中,将在不久公测使用.您无需后端就可以完成整个软件的`热更新/安装更新`服务.
6 |
7 | | iphone 热更新 效果如下 | 安卓热更新效果如下 | 安卓安装更新如下 |
8 | | ---------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
9 | | Image Source: http://www.gratisography.com/
7 |current index: {{demo01_index}}
8 |12 |
13 | 14 |
3 |
4 |
5 | ![]()
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 | 运费：{{ goods.express }}
16 | 剩余：{{ goods.remain }}
17 |
18 |
19 |
20 |
21 |
22 |
23 | 有赞的店
24 | 官方
25 |
26 |
27 |
29 |
30 |
31 |
33 |
34 | 35 |
36 |
37 | 客服
38 |
39 |
40 | 购物车
41 |
42 |
43 | 触发首页事件
44 |
45 |
46 | 立即购买
47 |
48 |
49 |
50 |
51 |
52 |
130 |
131 |
160 |
--------------------------------------------------------------------------------
/docs/guide/development.md:
--------------------------------------------------------------------------------
1 | # 开发
2 |
3 | ## 下载脚手架
4 |
5 | 首先下载脚手架
6 | 脚手架项目地址[MogoH5+](https://github.com/tyaqing/mogo-h5plus)
7 |
8 | ### Git clone
9 |
10 | ```bash
11 | git clone https://github.com/tyaqing/mogo-h5plus.git
12 | ```
13 |
14 | ### 直接下载
15 |
16 | [下载地址](https://github.com/tyaqing/mogo-h5plus/archive/master.zip)
17 |
18 | 下载后把目录直接导入到 Hbuilder.
19 |
20 | ## 运行脚手架
21 |
22 | ```bash
23 | // 1 进入项目主目录
24 | cd mogo-h5plus
25 | // 2 安装npm依赖
26 | npm i // 或者 yarn 请不要使用cnpm
27 | // 3 调试运行
28 | npm start
29 |
30 | // 运行结果如下
31 | ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
32 | ℹ ｢wds｣: webpack output is served from /
33 | ℹ ｢wdm｣: Hash: e597725cca065f694fbd
34 | Version: webpack 4.10.2
35 | Time: 4959ms
36 | ```
37 |
38 | 直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP.
39 |
40 | > 本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI.
41 |
42 | ## 真机调试
43 |
44 | 将打印出来的 ip 地址,我们打印出来的是`http://192.168.199.155:8080/`,将这个填入页面入口.
45 |
46 | 
47 |
48 | 然后使用 Hbuilder 基座进行调试测试.
49 |
50 | 
51 |
52 | ## 新建页面
53 |
54 | 假如我们要新建一个名称为`list`的页面作为商品列表,我们就要在`./src/page/goods`下新建`list.js`和`list.vue`两个文件.`list.js`作为多页面的入口,`list.vue`,脚手架自带了几个页面可供参考.
55 |
56 | ```json
57 | {
58 | "index|plusReady": "./src/main.js",
59 | "goods.detail": "./src/page/goods/detail.js",
60 | "goods.cart": "./src/page/goods/cart.js",
61 | "mui.index|mui|plusReady": "./src/page/mui/index.js"
62 | }
63 | ```
64 |
65 | ### 访问页面
66 |
67 | ```js
68 | openWebview({ url: "./goods.cart.html", id: "goods.cart" });
69 | openWebview({ url: "./mui.index.html", id: "mui.index" });
70 | ```
71 |
72 | 这里要注意 2 个细节:
73 |
74 | 1. 后缀一定是`.html`
75 | 2. id 要按照页面的规范,不要出现重复 id
76 |
77 | ### 删除页面
78 |
79 | 如果删除页面了页面,也需要删除`page.json`相应的页面描述代码
80 |
81 | > 实现原理是监听了`page.json`,一旦`page.json`发生改变,会重启`webpack`
82 |
83 | ## 新建组件
84 |
85 | 组件放入`./src/components`目录下,如果组件较多,可自行建立目录.比如 demo 中使用的 Logo 组件可以作为参考.
86 |
87 | ## 新建工具库
88 |
89 | 工具库`./src/utils`主要放一些公用函数,比如请求,打开 webview,支付,分享等执行函数.
90 | demo 中封装了部分来自 mui 的函数比如`自定义事件`,`webview`.这些函数可以作为参考.
91 |
92 | `common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
93 |
94 | `./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from "Utils/common"`.
95 |
96 | > utils 是我们会经常修改的, 如果有自己的工具库,请另建文件夹
97 |
98 | ## 请求代理配置 Proxy
99 |
100 | 首先,只有开发的过程中才会有跨域的情况.App 中不存在跨域.
101 |
102 | **为什么会有跨域呢?**
103 |
104 | `MogoH5+`的调试是使用`npm run dev`构建了一个局域网服务器的,比如`http://192.168.199.155:8080/`,这样的好处就是视图修改同步很快,不受 Hbuilder 的限制.
105 |
106 | 起初考虑过`webpack watch`来实现,但是发现`watch`之后的文件变化 HBuilder 无法第一时间反应,也就是说,修改了一个界面,需要等 Hbuilder 发现`文件差异`才会去更新真机的试图.因此才考虑局域网服务器的.
107 |
108 | ### 请求库
109 |
110 | demo 的请求使用的是 `axios`,同样你喜欢什么库都可以自己去封装.
111 |
112 | 常见的请求库有`fetch`,`request`,`SuperAgent`,`jquery-ajax`.
113 |
114 | ### 跨域
115 |
116 | 由于`npm start`后,调试网页是挂在局域网上,并且作为 Hbuilder 的`页面入口`,因此,在请求时会出现`跨域`.
117 |
118 | 在`/config/index.js`中使用本地代理,将下面的`https://api.douban.com`修改成自己使用的业务域名即可.
119 |
120 | ```javascript
121 | proxy: {
122 | "/api": {
123 | name:"DOUBANAPI", // 自己取名
124 | target: "https://api.douban.com",
125 | pathRewrite: { "^/api": "" },
126 | changeOrigin: true,
127 | secure: false
128 | },
129 | "/baidu_api": {
130 | name:"BAIDUAPI", // 自己取名
131 | target: "https://api.baidu.com",
132 | pathRewrite: { "^/baidu_api": "" },
133 | changeOrigin: true,
134 | secure: false
135 | },
136 | ...
137 | }
138 | ```
139 |
140 | 如果有更多业务域名可以继续在`proxy`添加.
141 |
142 | 只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称`DOUBANAPI`
143 |
144 | ```javascript
145 | request({
146 | url: DOUBANAPI + "/bookList" // 在打包后会变成 https://api.baidu.com/bookList
147 | });
148 | ```
149 |
150 | ## 调试
151 |
152 | ### VConsole
153 |
154 | 在 Hbuilder 中调试会有诸多问题,比如:
155 |
156 | - 不能直接打印`数组`,`对象`,需要转成字符串.
157 | - 即使使用`webview调试`,仍然不能打印出数组,在 mac 上使用也非常不方便.
158 |
159 | 使用`VConsole`,调试的问题基本就脱离 Hbuilder 了,使用`VConsole`主要优点如下
160 |
161 | - 可以打印数组,对象
162 | - 可以查看请求,cookie,Localstorage
163 | - 在`System`栏目中可以看到页面加载速度
164 | - 可以查看元素
165 |
166 | 基本上就是一个简化的`开发者工具栏`,对于调试来说非常简便了.
167 |
168 | ### print 函数
169 |
170 | 由于 `VConsole` 并不能解决全部调试问题,比如页面关闭后调试信息消失,增加一个 `print` 方法,用于在 Hbuilder 上打印对象
171 |
172 | ```js
173 | print(someObjorArray);
174 | ```
175 |
176 | ## 使用 mui
177 |
178 | 1. 首先在`page.json`中给需要使用`mui`的页面加入`|mui`,这一步,`mui`的`js`将会嵌入到改页面当中.
179 |
180 | 2. 使用相对路径加入 mui 的 css,加入方式如下:
181 |
182 | ```html
183 |
186 | ```
187 |
188 | ## 使用 vux/vant
189 |
190 | 系统默认安装了`vux`和`vux-loader`,`vant`也是默认添加的,直接 import 使用即可.
191 |
192 | ```js
193 | import { Group, Calendar, Cell, Badge, CellBox, XButton } from "vux";
194 | ```
195 |
196 | > 如果您不使用 vux,或 vant,可以将其编译器去除来提高您的开发构建效率.[具体方式](qa.html#速度优化方案)
197 |
198 | ## page.json 配置
199 |
200 | 这是一份来自`demo`的页面配置,多页面的主要配置也是来自这里,具体实现细节请参看[多页面的实现]
201 |
202 | ```json
203 | {
204 | "index|plusReady": "./src/main.js",
205 | "goods.detail": "./src/page/goods/detail.js",
206 | "goods.cart": "./src/page/goods/cart.js",
207 | "mui.index|mui|plusReady": "./src/page/mui/index.js",
208 | "user.index": "./src/page/user/index.js",
209 | "vux.index|plusReady": "./src/page/vux/index.js"
210 | }
211 | ```
212 |
213 | 在配置的`键`中发现了`|`符号,`|`后面的值表示页面加载参数,这里主要对一些参数作解释
214 |
215 | | 参数 | 解释 | 备注 |
216 | | ----------- | -------------------------------------------------------------- | -------------- |
217 | | `mui` | 在页面中加载 mui,使用后 mui 会挂在到`window`上 | / |
218 | | `plusReady` | 是否使 plus 提前生效 ,提前生效就可以不用监听 plus 是否已经生效 | 仅在安卓上有效 |
219 |
220 | > 注意:plus 在安卓上提前生效会增加 50-200ms(根据性能)的加载时间,可以通过增加窗口过场动画的时间弥补,或者预加载窗口
221 |
--------------------------------------------------------------------------------
/docs/guide/guide.md:
--------------------------------------------------------------------------------
1 | # 简介
2 |
3 | 
4 |
5 | `MogoH5+` 是一个 vue 多页面**脚手架工具**,结合 H5+可以快速开发安卓与苹果 APP.
6 |
7 | 即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目.
8 |
9 | ### [APP 演示下载地址](https://fir.im/p52j)
10 |
11 | ## 特性
12 |
13 | - `支持 Npm 生态`
14 | - `支持 vue 语法,以及 vue 生态,比如 mint,vant`
15 | - `支持 ES6/ES7 语法`
16 | - `使用 VConsole 调试`
17 | - `VSCode 友好`
18 | - `局域网便捷调试,不插数据线也可以调试`
19 | - `支持mui`
20 |
21 | # 快速上手
22 |
23 | ## 下载脚手架
24 |
25 | 首先下载脚手架
26 | 脚手架项目地址[MogoH5+](https://github.com/tyaqing/mogo-h5plus)
27 |
28 | ### Git clone
29 |
30 | ```
31 | git clone https://github.com/tyaqing/mogo-h5plus.git
32 | ```
33 |
34 | ### 直接下载
35 |
36 | [下载地址](https://github.com/tyaqing/mogo-h5plus/archive/master.zip)
37 |
38 | 下载后把目录直接导入到 Hbuilder.
39 |
40 | ## 运行脚手架
41 |
42 | ```
43 | // 1 进入项目主目录
44 | cd mogo-h5plus
45 | // 2 安装npm依赖
46 | npm i // 或者 yarn
47 | // 3 调试运行
48 | npm start
49 |
50 | // 运行结果如下
51 | ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
52 | ℹ ｢wds｣: webpack output is served from /
53 | ℹ ｢wdm｣: Hash: e597725cca065f694fbd
54 | Version: webpack 4.10.2
55 | Time: 4959ms
56 | ```
57 |
58 | 直接下载项目然后根据需求定制打包,最后通过 Hbuilder 云打包即可生成 APP.
59 |
60 | > 本文自带一个案例是使用 VantUI 开发的几个界面,如果你喜欢其他 UI 同样可以替换成其他的 UI.
61 |
62 | ## 真机调试
63 |
64 | 将打印出来的 ip 地址,我们打印出来的是`http://192.168.199.155:8080/`,将这个填入页面入口.
65 |
66 | 
67 |
68 | 然后使用 Hbuilder 基座进行调试测试.
69 |
70 | 
71 |
72 | ## 使用
73 |
74 | 主要怎么使用 MogoH5+做正式的开发,在开发过程中一定要遵守**目录规则**,否则会有意想不到的错误.
75 |
76 | ### 目录结构
77 |
78 | ```
79 | .
80 | ├── assets // 静态资源
81 | ├── docs // 文档
82 | ├── index.html // 入口模板
83 | ├── jsconfig.json //js配置
84 | ├── manifest.json //hbuilder 入口文件
85 | ├── src
86 | │ ├── components //组件文件夹
87 | │ │ └── List.vue //组件
88 | │ ├── index.js //主页入口文件
89 | │ ├── index.vue // 主页vue文件
90 | │ ├── page // 页面
91 | │ └── utils // 工具
92 | ├── unpackage // hbuilder 构建目录
93 | │ └── res
94 | └── webpack.config.js //webpack配置目录
95 | ```
96 |
97 | ### 新建页面
98 |
99 | 假如我们要新建一个名称为`list`的页面作为商品列表,我们就要在`./src/page/goods`下新建`list.js`和`list.vue`两个文件.`list.js`作为多页面的入口,`list.vue`,脚手架自带了几个页面可供参考.
100 |
101 | ::: tip 路由
102 | 遵循相对路径原则,如果在`src`访问这个页面则就是`./goods/list.html`
103 | !!! 后缀一定是`.html`
104 | :::
105 |
106 | ### 新建页面/删除页面[0.3.0]
107 |
108 | 0.3.0 的新建页面和 0.2.0 是兼容的,但是建议您使用 0.3.0 的`page.json`,这样会减少很多因为新建,删除页面产生的错误
109 | 如果您需要更自由的页面结构,比如三级目录.可以按照`page.json`格式添加即可.
110 |
111 | ```json
112 | {
113 | "goods/detail": "./src/page/goods/detail.js",
114 | "map/map": "./src/page/map/map.js",
115 | "mui/index": "./src/page/mui/index.js",
116 | "user/index": "./src/page/user/index.js"
117 | }
118 | ```
119 |
120 | 比如您需要一个添加一个三级级页面,可以按照下面的方法添加,
121 |
122 | ```json
123 | {
124 | ...
125 | "user/index/point": "./src/page/user/point/index.js"
126 | }
127 | ```
128 |
129 | 如果删除页面了页面,也需要删除`page.json`相应的页面描述代码
130 |
131 | > 实现原理是监听了`page.json`,一旦`page.json`发生改变,会重启`webpack`
132 |
133 | ### 新建组件
134 |
135 | 组件放入`./src/components`目录下,如果组件较多,可自行建立目录.比如 demo 中使用的 Logo 组件可以作为参考.
136 |
137 | ### 新建工具库
138 |
139 | 工具库`./src/utils`主要放一些公用函数,比如请求,打开 webview,支付,分享等执行函数.
140 | demo 中封装了部分来自 mui 的函数比如`自定义事件`,`webview`.这些函数可以作为参考.
141 |
142 | ::: tip
143 | `common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
144 |
145 | `./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from "Utils/common"`.
146 | :::
147 |
148 | ### 发送请求
149 |
150 | #### 请求库
151 |
152 | demo 的请求使用的是 `axios`,同样你喜欢什么库都可以自己去封装.
153 |
154 | 常见的请求库有`fetch`,`request`,`SuperAgent`,`jquery-ajax`.
155 |
156 | #### 跨域
157 |
158 | 由于`npm start`后,调试网页是挂在局域网上,并且作为 Hbuilder 的`页面入口`,因此,在请求时会出现`跨域`.
159 |
160 | 在`./build.js`中使用本地代理,将下面的`https://api.douban.com`修改成自己使用的业务域名即可.
161 |
162 | ```javascript
163 | proxy: {
164 | "/api": {
165 | name:"DOUBANAPI", // 自己取名
166 | target: "https://api.douban.com",
167 | pathRewrite: { "^/api": "" },
168 | changeOrigin: true,
169 | secure: false
170 | },
171 | "/baidu_api": {
172 | name:"BAIDUAPI", // 自己取名
173 | target: "https://api.baidu.com",
174 | pathRewrite: { "^/api": "" },
175 | changeOrigin: true,
176 | secure: false
177 | },
178 | ...
179 | }
180 | ```
181 |
182 | 如果有更多业务域名可以继续在`proxy`添加.
183 |
184 | ::: tip 注意
185 | 只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称`DOUBANAPI`
186 |
187 | ```javascript
188 | request({
189 | url: DOUBANAPI + "/bookList"
190 | });
191 | ```
192 |
193 | :::
194 |
195 | ## 调试
196 |
197 | 在 Hbuilder 中调试会有诸多问题,比如:
198 |
199 | - 不能直接打印`数组`,`对象`,需要转成字符串.
200 | - 即使使用`webview调试`,仍然不能打印出数组,在 mac 上使用也非常不方便.
201 |
202 | 使用`VConsole`,调试的问题基本就脱离 Hbuilder 了,使用`VConsole`主要优点如下
203 |
204 | - 可以打印数组,对象
205 | - 可以查看请求,cookie,Localstorage
206 | - 在`System`栏目中可以看到页面加载速度
207 | - 可以查看元素
208 |
209 | 基本上就是一个简化的`开发者工具栏`,对于调试来说非常简便了.
210 |
211 | ## 打包
212 |
213 | ```bash
214 | npm run build
215 | ```
216 |
217 | 运行命令后会有一个`dist`目录,里面的经过压缩的静态文件.
218 |
219 | ### Hbuilder 发行打包
220 |
221 | 在使用 Hbuilder 制作安装包前,请将`入口文件`修改成`dist/index.html`.
222 | 然后可以安心的打包了.
223 |
224 | ## 如何使用 mui
225 |
226 | mui 默认未加载,但是相对应的 js 和 css 放在了 `assets` 目录下.如果需要使用,请按下面步骤操作
227 |
228 | ### 1.去掉加载注释
229 |
230 | 在根目录下去掉下面两段标签的注释
231 |
232 | ```html
233 |
234 |
235 |
236 | ```
237 |
238 | ### 2.使用`npm run build:mui`打包
239 |
240 | > 这个命令会复制`assets`中的文件到打包目录.
241 |
242 | ## 常见问题
243 |
244 | 常见问题一般来说就是白屏问题,或者页面不存在,可能有以下几种情况
245 |
246 | **Q1:删除一些页面后控制台报错**
247 |
248 | 这是由于`HtmlWebpackPlugin`没有找到模板的问题,只需要重新`npm start`即可.
249 |
250 | **Q2:`npm start`控制台报语法错误**
251 |
252 | 请升级你的 node 到最新版本
253 |
254 | **Q3:`npm start`后出现空白页面无法显示**
255 |
256 | 1. 电脑和调试的手机需要在同一个局域网下面
257 | 2. `npm start`后如果局域网 ip 地址有变,请同时在 manifest.json 中修改页面入口
258 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | {{ goods.title }}
12 | {{ formatPrice(goods.price) }}
13 | 34 | 35 |
| 
|
41 |
42 | ## 更新记录
43 |
44 | ### 2.0.0 [20180813]
45 |
46 | #### [新增]
47 |
48 | 1. `vue`以`commonChunk`的形式加载,多个页面加载同一个`vue`,减少了体积.
49 | 2. `mui`都会已公共文件的形式加载,减少了打包后的体积.
50 | 3. 修改了`webpack`部分配置,减少体积的同时,编译速度提高了很多.
51 | 4. 可以在`config/index.js`中配置是否载入`VConsole`,意味着你可以在`build`环境中使用`VConsole`
52 | 5. 加入`h5plus-hotfix`模块,启用应用的热更新
53 |
54 | #### [修改]
55 |
56 | 1. 移除了内置热更新,热更新以新项目`hotfix`单独维护
57 | 2. 修复了购物车侧滑可以直接返回
58 | 3. 删除了mui演示页中`import`加载的`mui.css`
59 | 4. 将模板`index.html`部分js转移到`common.js`
60 | 5. 解决ios假死的问题,修改了`fastclick`的npm源
61 |
62 | #### [升级指南]
63 |
64 | 1. 使用mui的开发者需要删除掉 vue页面中加载的`mui.css`,只要在`page.json`使用了`|mui`,脚手架已经自动加载了mui的css和js
65 | 2. 修改过index.html的开发者,需要注意内容变化做适应修改
66 |
67 | ### 1.3.0 [20180727]
68 |
69 | #### [新增]
70 |
71 | 1. 增加`热更新/迭代`集成,具体文档查看[热更新/迭代](../practice/hotfix.md)
72 | 2. 增加自定义返回实现,返回按钮可以[自定义返回按钮事件](./qa.html#自定义返回按钮事件)
73 | 3. 增加"商品加入购物车"功能实例演示页面间通讯
74 | 4. 新增 VConsole 以 webpack 插件的形式加载,`run build`会自动去掉
75 |
76 | #### [修复]
77 |
78 | 1. 修复了超多页面下调试慢的问题,使用`html-webpack-plugin-for-multihtml`解决
79 | 2. 修改了版本文档
80 |
81 | #### [升级指导]
82 |
83 | 1. 将 VConsole 在 common.js 中删掉,因为已经以 webpack 插件形式加载
84 | 2. `utils` 是我们会经常修改的, 如果有自己的工具库,请另建文件夹
85 |
86 | ### 1.2.0 [20180719]
87 |
88 | #### [新增]
89 |
90 | - 增加预加载窗口打开方式,根据不同场景使用不同的打开方式,可以大大提高 webview 的打开速度,首页已加入使用案例
91 | - 由于 VConsole 并不能解决全部调试问题,增加一个`print`方法,用于在 Hbuilder 上打印对象
92 |
93 | #### [速度优化方案]
94 |
95 | 最近许多反映脚手架很慢的可以参考一下优化方案,可以大大提高调试/打包速度.
96 |
97 | 1.2 的版本中移除了一些不必要的插件,应该会快那么一点吧.追求速度的继续往下看.
98 |
99 | 由于 demo 需要展示各种 ui,加载了各种的 ui 的 loader,所以如果开发者用不到可以将其移除.
100 |
101 | ##### 1.如果不使用 VUX
102 |
103 | 注释掉 `vux-loader` 即可,在`webpack.base.conf.js`中,修改以下代码
104 |
105 | ```
106 | const vuxLoader = require("vux-loader");
107 |
108 | module.exports = vuxLoader.merge(webpackConfig, {
109 | plugins: ["vux-ui"]
110 | });
111 | ```
112 |
113 | 修改后
114 |
115 | ```
116 | module.exports = webpackConfig;
117 | ```
118 |
119 | ##### 2.如果不使用 vant
120 |
121 | 移除掉`.babalrc`中以下代码
122 |
123 | ```
124 | [
125 | "import",
126 | {
127 | "libraryName": "vant",
128 | "libraryDirectory": "es",
129 | "style": true
130 | }
131 | ]
132 | ```
133 |
134 | ##### 3.优化建议
135 |
136 | 对于一些简单的页面其实可以不用 ui 框架,加载的时候会很快
137 | 使用 ui 框架大概也只会增加 100-200ms 的 js 运行时间,窗口过渡 200ms 的话,基本上不会影响用户体验
138 | 如果使用大量组件,增加的时间可能会比较大,这个时候可以考虑预加载这个窗口了.
139 |
140 | 参考:http://ask.dcloud.net.cn/article/25
141 |
142 | #### [升级方案]
143 |
144 | 几乎每个版本都是兼容的,所以只要将`src`中的文件转移到新版本就 ok 啦!
145 |
146 | #### [终极解决:webpack4]
147 |
148 | 由于官方的 `webpack3` 脚手架速度也提升不了多少了,所以 `1.2` 之后的 `1.x` 版本之后可能几乎不会对脚手架做修改了,只会增加很多实用的使用案例和工具方法
149 |
150 | 不过现在已经开始对 `webpack4` 开始研究了 webpack4 `2.0`版本见啦
151 |
152 | ### 1.1.0 [20180706]
153 |
154 | #### [新增]
155 |
156 | - `page.json`可以配置是否加载 mui 或者是否使用 plusready
157 | - 增加`fire`页面传值函数,详情可见商品详情页和首页的自定义事件
158 |
159 | #### [修复]
160 |
161 | - 修复了资源路径加载问题(需修改`page.json`配置)
162 | - 修复了 mui 加载不灵活的问题,减少打包的体积
163 | - 修复了 mui 字体文件加载失败的问题
164 |
165 | #### 1.0.x 到 1.1.x
166 |
167 | 由于之前资源路径的问题,目前的解决方案是修改`page.json`的配置,将原来的以路径作为键`mui/index`写成`mui.index`即可,如下
168 |
169 | 如果要使用 mui 就加入 `|mui`, 如果要使用 mui 就加入 `|plusReady`,不用则不加.
170 |
171 | > plusReady 在安卓手机上提前载入可能会影响页面打开速度,解决方法有两种:1 不提前使 plus 生效 2.预加载 plus
172 |
173 | ```json
174 | {
175 | "mui.index|mui|plusReady": "./src/page/mui/index.js"
176 | }
177 | ```
178 |
179 | #### 注意事项
180 |
181 | 请在`created`生命周期里面接收事件,否则会因为视图刷新多次执行.
182 |
183 | ### 1.0.1 [20180704]
184 |
185 | - 修复了 background 图片路径打包后不正确的问题
186 |
187 | ### 1.0.0 [20180630]
188 |
189 | - 使用 vue 官方脚手架作为基层,健壮性得到`史诗级`提升
190 | - 添加了 vux 的支持
191 | - 修改的 mui 的加载方式
192 | - 配置方面有部分变化,详情请看文档
193 | - 升级了安卓 app
194 |
195 | ### 0.3.0 [20180628]
196 |
197 | - 解决了因为新增/删除页面导致的 webpack 错误
198 | - 添加了 openWebview 的 extras 参数
199 |
200 | ### 0.2.0 [20180623]
201 |
202 | - 添加了对 mui 样式和 js 的支持
203 |
204 | ## 部分截图
205 |
206 | 
3 |
4 |
5 |
6 | 7 |
12 |
13 |
14 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
47 | 标签
48 | 标签
49 | 标签
50 | 标签
51 |
52 |
53 |
54 |
271 |
272 |
281 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "@platforms": ["android", "iPhone"],
3 | "id": "com.femirror.mogoh5" /*应用的标识，创建应用时自动生成，勿手动修改*/,
4 | "name": "MogoH5+" /*应用名称，程序桌面图标名称*/,
5 | "version": {
6 | "name": "1.6.0" /*应用版本名称*/,
7 | "code": "141"
8 | },
9 | "description": "MogoH5+" /*应用描述信息*/,
10 | "icons": {
11 | "72": "icon.png"
12 | },
13 | "launch_path":
14 | "dist/index.html" /*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/,
15 | "developer": {
16 | "name": "" /*开发者名称*/,
17 | "email": "" /*开发者邮箱地址*/,
18 | "url": "" /*开发者个人主页地址*/
19 | },
20 | "permissions": {
21 | "Cache": {
22 | "description": "管理应用缓存"
23 | },
24 | "Console": {
25 | "description": "跟踪调试输出日志"
26 | },
27 | "Contacts": {
28 | "description": "访问系统联系人信息"
29 | },
30 | "Events": {
31 | "description": "应用扩展事件"
32 | }
33 | },
34 | "plus": {
35 | "statusbar": {
36 | "immersed": true,
37 | "style": "dark"
38 | },
39 | "splashscreen": {
40 | "autoclose": true /*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/,
41 | "waiting": true /*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/
42 | },
43 | "popGesture":
44 | "close" /*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/,
45 | "runmode":
46 | "normal" /*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/,
47 | "signature":
48 | "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==" /*可选，保留给应用签名，暂不使用*/,
49 | "distribute": {
50 | "plugins": { "maps": {} },
51 | "apple": {
52 | "appid":
53 | "" /*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/,
54 | "mobileprovision": "" /*iOS应用打包配置文件*/,
55 | "password": "" /*iOS应用打包个人证书导入密码*/,
56 | "p12": "" /*iOS应用打包个人证书，打包配置文件关联的个人证书*/,
57 | "devices":
58 | "universal" /*iOS应用支持的设备类型，可取值iphone/ipad/universal*/,
59 | "frameworks": [] /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/
60 | },
61 | "google": {
62 | "packagename": "" /*Android应用包名，如io.dcloud.HelloH5*/,
63 | "keystore": "" /*Android应用打包使用的密钥库文件*/,
64 | "password": "" /*Android应用打包使用密钥库中证书的密码*/,
65 | "aliasname": "" /*Android应用打包使用密钥库中证书的别名*/,
66 | "permissions": ["5 |
6 | 7 |
9 | 下拉Ajax请求试试😋
10 |
11 | 40 |
41 |
42 |
43 |
44 |