vue2+muse-ui+hbuilder制做仿原生应用

本文章旨在记录快速搭建web2app应用流程。

1. 生成框架

2. 引用muse-ui

3. 基础组件引用

4. 嵌入hbuilder

5. 转成app&ios app

6. 打包发布

1. 前期准备

• 安装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              //说明文件
复制代码

2. 引用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)

复制代码

3. 关于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文件夹下生成打包好的文件，以便执行下一步。

4. 嵌入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接口文档

5. 生成相应的打包配置 在hbuilder中双击manifest.json 打开配置页面

   

按说明一项一项的配置

运行调试 能够经过数据线链接手机开启调试模式 而后 运行->真机运行->基座调试。

在手机容许安装会自动安装框架并打开页面。

6. 最终打包

发行->云打包-打原生安装包

根据需求填写和生成

最终打包完成会自动下载安装包到本地,传输到手机安装便可看到效果。