本文章旨在記錄快速搭建web2app應用流程。
1. 生成框架
2. 引用muse-ui
3. 基礎元件引用
4. 嵌入hbuilder
5. 轉成app&ios app
6. 打包釋出
- 前期準備
- 安裝nodejs,
- 安裝npm包管理。
- 安裝vue-cli
npm install -g vue-cli
複製程式碼- 使用vue-cli 生成專案骨架
vue init webpack-simple your-project-name #
複製程式碼根據自己的需求選擇專案規則以及eslint 和是否需要單元測試模組。
最終生成專案結構如圖
├─build //webpack打包配置資料夾
├─config //專案配置資料夾
├─dist //最終打包生成檔案存放位置
├─node_modules //webpack引用包
├─src //具體業務原始碼儲存位置
│ ├─api //api請求介面存放
│ ├─assets //靜態資源
│ ├─common //通用js檔案
│ ├─components //元件
│ ├─router //路由
│ ├─store //vuex
│ ├─utils //工具
│ └─views //檢視檔案
├─static //靜態非打包檔案
├─.babelrc //webpack打包配置檔案
├─.editorconfig //編輯器配置檔案 區分於不同的IDE
├─.eslintignore //eslint規則忽略檔案
├─.eslintrc.js //eslint規則
├─index.html //入口檔案
├─package.json //打包配置件
├─README.md //說明檔案
複製程式碼- 引用muse-ui
npm install --save muse-ui 或 yarn add muse-ui
複製程式碼或者通過script標籤引用(path/to 是你實際的檔案指向地址)
<link rel="stylesheet" href="path/to/muse-ui.css">
<script src="path/to/muse-ui.js"></script>
複製程式碼專案中使用 涉及到單個元件載入的請參考官網配置
mport Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
複製程式碼- 關於muse-ui基礎元件的應用
- toast全域性通知,通過vuex解決方案. 首先在專案中引用vuex
npm install vuex
複製程式碼在 src/store/內新增store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 需要維護的狀態
const state = {
title: "", // title元件動態標題
loading: false, // 全域性loading狀態
open: false, // siderbar 狀態
showToast: false, // toast 狀態
showText: "" // toast提示文字
};
const mutations = {
// 初始化 state
calltitle(state, title) {
state.title = title
},
updateLoading(state, value) {
state.loading = value
},
updateOpen(state, value) {
state.open = value
},
showToast(state, model) {
state.showToast = model.state
state.showText = model.text
setTimeout(() => {
state.showToast = false
}, 1000);
}
};
const actions = {
show(context, model) {
context.commit('showToast', model)
}
};
export default new Vuex.Store({
state,
mutations,
actions
});
複製程式碼- 在main.js 內新增引用
import Vue from 'vue'
import App from './App'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-carbon.css'
import router from './router'
import store from './store'
import vueMoment from 'vue-moment';
Vue.use(vueMoment)
Vue.use(MuseUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: {
App
}
})
複製程式碼- 在元件最外層App.vue內新增Toast元件
<template>
<div id="app">
<router-view></router-view>
<mu-toast v-if="showToast" :message="showText" />
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "app",
data() {
return {};
},
computed: {
...mapState(["showToast", "showText"])
},
methods: {}
};
</script>
<style>
</style>
複製程式碼在全域性內呼叫
login() {
Authenticate(this.model)
.then(r => {
if (r && r.result) {
//業務程式碼
} else {
//呼叫全域性toast
this.$store.dispatch("show", {
state: true,
text: r.error.message
});
}
})
.catch(e => {
this.$store.dispatch("show", {
state: true,
text: e.error.message
});
});
},
複製程式碼至此專案搭建完成,之後依據業務需求完善相應模組即可.
執行npm run build 可以在dist資料夾下生成打包好的檔案，以便執行下一步。
- 嵌入hBuilder
-
在官網下載Hbuilder IDE 按提示安裝
-
安裝完成如上圖所示，依次選擇檔案->開啟目錄->選擇剛生成好的打包檔案
-
在左側目錄會顯示Icon為W的專案 右鍵轉換為移動短app Icon會變為A
此處如果生成打包檔案需要修改 config/index.js下的 2處assetsPublicPath路徑 '/'=> './' 複製程式碼 -
如需呼叫hbuilder封裝的原生介面需要新增plusready事件支援。 在專案內src 下新增common/index.js 檔案
const plusready = fn => {
if (window.plus) {
setTimeout(fn, 0)
} else {
document.addEventListener("plusready", fn, false)
}
}
export default plusready
複製程式碼- 在需要使用api的元件內 引用 並且初始化使用
<script>
import { plusReady } from "common/index.js";
export default {
name: "camera",
data() {
return {
cw: null,
camera: null
};
},
created() {
plusReady(this.plusReady);
},
methods: {
plusReady() {
//plus為根物件 獲取原生視窗物件
this.cw = plus.webview.currentWebview();
//獲取攝像機物件
this.camera = plus.camera.getCamera();
},
photo() {
this.camera.captureImage(p => {
console.log(p);
});
},
show() {
plus.gallery.pick(
s => {
console.log(s);
},
e => {
console.log(e);
}
);
}
}
};
</script>
複製程式碼相關api介面 請檢視 api介面文件
- 生成相應的打包配置
在hbuilder中雙擊manifest.json 開啟配置頁面
按說明一項一項的配置
執行除錯 可以通過資料線連線手機開啟除錯模式 然後 執行->真機執行->基座除錯。
在手機允許安裝會自動安裝框架並開啟頁面。
- 最終打包
發行->雲打包-打原生安裝包
根據需求填寫和生成
最終打包完成會自動下載安裝包到本地,傳輸到手機安裝即可看到效果。