vue2+muse-ui+hbuilder製做仿原生應用

時間 2019-11-17

標籤 vue2+muse vue muse ui+hbuilder hbuilder 製做原生應用简体版

原文原文鏈接

本文章旨在記錄快速搭建web2app應用流程。css

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 和是否須要單元測試模塊。html

最終生成項目結構如圖 vue

├─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 是你實際的文件指向地址)html5

<link rel="stylesheet" href="path/to/muse-ui.css">
<script src="path/to/muse-ui.js"></script>
複製代碼

項目中使用涉及到單個組件加載的請參考官網配置node

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.jswebpack

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>

複製代碼

在全局內調用ios

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
          });
        });
    },
複製代碼

至此項目搭建完成,以後依據業務需求完善相應模塊便可.web

執行npm run build 能夠在dist文件夾下生成打包好的文件，以便執行下一步。vuex

嵌入hBuilder

在官網下載Hbuilder IDE 按提示安裝 vue-cli
安裝完成如上圖所示，依次選擇文件->打開目錄->選擇剛生成好的打包文件

在左側目錄會顯示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>
複製代碼