一，前言

众所周知，HBuilderX的功能特别强大，HBuilderX对字处理提供了更崇高的支持。
更强大的多光标、智能双击、选区管理…
让文字处理的效率大幅提升。

二，HBuilderX

还是众所周知，HBuilderX开发app很方便，以mui框架为例子。
我们写好了若干个网页，一个主页面里涉及到跳转问题。我们就会发现，代码没有问题的情况下，运行到网页的话这个跳转链接是不能正常使用的，每次调试打包过于麻烦，所以我们应该使用设计模拟器。

三，手机模拟器

众所周知，现在主流的手机模拟器有：腾讯、逍遥、mumu、夜神、雷电、蓝叠。
众所周知主流的手机模拟器的对应端口号为

四，环境配置

我们随机下载一个mumu模拟器。

之后找到HBuilderX里面的adbs路径，如下：

HBuilderX\plugins\launcher\tools\adbs

4.1，复制adbs路径

4.2，配置环境变量

4.2.1，打开电脑的环境配置：

4.2.2，进入环境变量

4.2.3，找到path，点击进入

4.2.4，新建->将加入adbs路径加入进去

4.3，测试adbs是否可用

4.3.1，输入adb version 查看adbs版本。

adb version

显示版本号，没有啥问题哈。

4.3.2，查看已连接的端口

adb devices

因为我之前连过了，一般应该是没有已连接的端口的。

4.3.3，使用adb命令 让模拟器连接上电脑

如果是网易mumu模拟器，众所周知它的端口号为7555。
输入命令：

adb connect 127.0.0.1:7555

显示连接成功。

五，Hbuilder连接到手机模拟器

如果是网易mumu模拟器，众所周知它的端口号为7555。填入7555.

六，启动模拟器

七，运行项目到模拟器

八，启动成功

运行到模拟器上就，可以正常的调试了，非常的方便。

很多人初学WAP2APP的打包小白看不懂官方的文档，这里我就给大家写一个WAP2APP打包操作教程，希望能够帮助到使用HBuilderX的初学者，这里先教大家如何将已有的WAP2APP源码导入到HBuilderX工具里然后打包成APP的方法。

第一步：先到DCLOUD官方网站下载HBuilderX开发工具，下载地址https://www.dcloud.io/hbuilderx.html如下图点击下载APP开发版，下载完成后打开压缩包把HBuilderX解压到桌面。

第二步，打开HBuilderX开发工具

第三步：导入已有的DCLOUD系列的APP源码，这里以WAP2APP为示列。

1.打开开发工具后点击左上角的文件如下图：

2.选择要打开的APP源码既可导入到开发工具如下图：

3.配置APP信息基础配置应用名称就是你的APP名字，应用版本名称就是你的APP版本号。

4.配置APP图标配置。

5.APP模块参数配置如下图：

 第四步：发行原生APP云打包生成APK或ipa文件。

 第五步：提包ipa文件或apk文件，既完成APP发布了。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

查看更多

1、工具安装

HBuilderX：官方IDE下载地址

2、创建uni-app

创建项目：

创建完后目录结构（common目录是手动创建的）

3、使用vuex

vuex是HBuilderX已经内置好了，可以直接使用

代码如下

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import componentView from './modules/componentView'


Vue.use(Vuex)
const store = new Vuex.Store({
  // 开启严格模式  确保state 中的数据只能 mutations 修改 不开启就可以随便修改
  //strict:true,
  state: {
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
    componentView
  }
})

export default store;

componentView.js

/**
 * 动态组件状态
 * @type {{state: {componentView: string}, mutations: {setRoleManageDetailState(*, *): void, setAuthoritySettingState(*, *): void}, getters: {getRoleManageDetail: (function(*): *)}, actions: {showRoleManageDetail({commit: *}, *=): void, showAuthoritySetting({commit: *}, *=): void}}}
 */
const componentView = {
  state: {
    componentView: Math.ceil(Math.random()*1000)
  },
  mutations: {
    setComponentViewState (state, flg) {
      state.componentView = flg
    }
  },
  getters: {
    getComponentViewState: state => {
      return state.componentView
    }
  },
  actions: {
    showComponentView ({ commit }, flg) {
      commit('setComponentViewState', flg)
    },
    showMathComponentView ({ commit }) {
		let number = Math.ceil(Math.random()*1000);
		console.log(number);
      commit('setComponentViewState', number)
    }
  }
}

export default componentView

修改main.js

4、测试

以上项目基本框架已经搭建好了。下面就是模拟运行了。

双击manifest.json配置，进行自定义配置即可。

需要配置微信开发工具安全设置，如图

运行结果：

以上就是一个简单的uni-app搭建过程。