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

本文章旨在记录快速搭建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 是你实际的文件指向地址)

"stylesheet" href="path/to/muse-ui.css">

复制代码

项目中使用涉及到单个组件加载的请参考官网配置

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: '',
  components: {
    App
  }
})

复制代码

在组件最外层App.vue内添加Toast组件







复制代码

在全局内调用

   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的组件内引用并且初始化使用


复制代码

相关api接口请查看 api接口文档

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

按说明一项一项的配置

运行调试可以通过数据线连接手机开启调试模式然后运行->真机运行->基座调试。

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

最终打包

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

根据需求填写和生成

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