创建项目

开发工具安装

官网下载安装 HBuilderX 和微信小程序开发者工具

新建uniapp项目

打开 HBuilderX，上方目录栏依次选择文件>新建>项目>选择 uniapp->创建

运行

运行至浏览器

HBuilderX 中上方目录栏依次选择，运行>运行到浏览器，打开相应浏览器

运行至小程序

HBuilderX 中上方目录栏依次选择，运行>运行到小程序模拟器->运行设置，设置微信小程序工具路径为安装路径，如下(根据个人安装路径调整)：

需要去微信小程序开发者工具设置->安全->打开服务端口，才能正常运行

运行至手机

手机中打开设置
点击关于手机
点击版本信息
点击七次打开开发者模式
回到设置首页
点击其他设置
点击开发者选项
打开 usb 调试
使用数据线连接电脑

正常情况下，HBuilderX 中上方目录栏依次选择，运行>运行到手机或模拟器后，会显示自己的手机，运行到手机即可

HBuilderX 运行到小程序失败

出现“Fail to open IDE“报错

解决方案：打开微信小程序开发者工具，微信扫码登录，再使用 HBuilderX 运行到小程序

运行至手机模拟器

有的机型不能正常连接调试，可以选择使用手机模拟器进行开发调试

下载安装 mumu 手机模拟器
HBuilderX 中上方目录栏依次选择，运行>运行到手机或模拟器>ADB 路径设置
设置路径为，mumu 手机模拟器的安装路径 bin 目录下的 adb_server.exe
, 设置模拟器端口为 mumu 手机模拟器默认端口 7555
重启 HBuilderX 后上方目录栏依次选择，运行>运行到手机或模拟器>运行到安卓App基座，出现了127.0.0.1:7555的选项

如果 HBuilderX 未检测到模拟器，需要使用adb命令进行连接。找到 HBuilderX adb目录如D:\manager\HBuilderX\plugins\launcher\tools\adbs

运行cmd，执行以下命令行查看 adb 的版本（测试是否能使用）

adb version

adb connect 127.0.0.1:7555

插件配置

prettier

格式化 less、sass、vue、stylus(vue 内嵌)、ts、yaml 代码

printWidth：控制单行最大长度
semi：控制每条语句是否加上分号
tabWidth：控制一个 tab 对应的空格数
useTabs：控制缩进用 tab 还是 space
singleQuote：控制字符串是用单引号还是双引号
trailingComma：是否去掉末尾的逗号
bracketSpacing：控制 json 对象括号前后是否加上空格
parsers: 支持语言的文件后缀

module.exports = {
  printWidth: 180,
  semi: false,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'ignore',
  parsers: {
    '.jsx': 'flow',
    '.scss': 'scss',
    '.ts': 'typescript',
    '.less': 'css',
    '.vue': 'vue',
    '.nvue': 'vue',
    '.ux': 'vue',
    '.yml': 'yaml'
  }
}

module.exports = {
  printWidth: 180,
  semi: false,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'ignore',
  parsers: {
    '.jsx': 'flow',
    '.scss': 'scss',
    '.ts': 'typescript',
    '.less': 'css',
    '.vue': 'vue',
    '.nvue': 'vue',
    '.ux': 'vue',
    '.yml': 'yaml'
  }
}

导入 iconfont 文件

iconfont 网站上将需要的 icon 图标加入购物车，下载解压，将文件夹中后缀名为 ttf，woff，woff2，css 的文件复制到static目录下

修改 iconfont.css 文件的路径，路径使用~@和@都可以代表项目根目录将其指向 ttf，woff，woff2 所在目录

css

@font-face {
  font-family: 'iconfont'; /* Project id 2786326 */
  src: url('~@/static/icon/iconfont.woff2?t=1630582491207') format('woff2'), url('@/static/icon/iconfont.woff?t=1630582491207')
      format('woff'),
    url('@/static/icon/iconfont.ttf?t=1630582491207') format('truetype');
}

@font-face {
  font-family: 'iconfont'; /* Project id 2786326 */
  src: url('~@/static/icon/iconfont.woff2?t=1630582491207') format('woff2'), url('@/static/icon/iconfont.woff?t=1630582491207')
      format('woff'),
    url('@/static/icon/iconfont.ttf?t=1630582491207') format('truetype');
}

在App.vue中导入 iconfont.css

css

import '@/common/iconfont.css'

import '@/common/iconfont.css'

使用 uni-section

并不是 uni-ui 配置好的组件，需要手动去 uni-ui 模板中复制该组件为 easycom

hbuilderx 主题设置

hbuilderx 总共有三种主题，绿柔主题 Default,酷黑主题 Monokai,雅黑主题 Atom One Dark,修改主题色是基于三种主题之一的，不能直接创建一个新主题，比如下方配置是基于 Atom One Dark(对象名为[Atom One Dark])，则当前 hbuilderx 必须处于雅黑主题，配置才能有作用

工具>设置>源码视图>Settings.json 中加入以下配置

json

"workbench.colorCustomizations": {
   //    "[Default]": {// 绿柔主题
    //        "sideBar.background":"#faf6e6", // 项目管理器背景颜色
    //        "editor.background":"#faf6e6" // 编辑区域背景颜色
    //    },
    //    "[Monokai]": {// 酷黑主题
    //        "toolBar.background": "#272822",
    //        "sideBar.background":"#272822"
    //    },
    "[Atom One Dark]": {
      "sideBar.background": "#212224",
      "editor.background": "#18191A" //
    }
  },
  "editor.tokenColorCustomizations": {
    //    "[Default]": {// 绿柔主题
    //        "rules": [{}]
    //    },
    //    "[Monokai]": {// 酷黑主题
    //         "rules": [{}]
    //    },
    "[Atom One Dark]": {
      "rules": [{
        "scope": [
          "support.type.property-name"
        ],
        "settings": {
          "foreground": "#9CDCFE"
        }
      }, {
        "scope": [
          "support.constant.property-value.css"
        ],
        "settings": {
          "foreground": "#B5CEA8"
        }
      }, {
        "scope": [
          "variable.other.readwrite.js",
          "variable.other.readwrite.tsx",
          "variable.other.readwrite.ts"
        ],
        "settings": {
          "foreground": "#FFD710"
        }
      }, {
        "scope": [
          "text.html.vue"
        ],
        "settings": {
          "foreground": "#61AFEF"
        }
      }, {
        "scope": [
          "string"
        ],
        "settings": {
          "foreground": "#6CD8A6"
        }
      }]
    }
  }

"workbench.colorCustomizations": {
   //    "[Default]": {// 绿柔主题
    //        "sideBar.background":"#faf6e6", // 项目管理器背景颜色
    //        "editor.background":"#faf6e6" // 编辑区域背景颜色
    //    },
    //    "[Monokai]": {// 酷黑主题
    //        "toolBar.background": "#272822",
    //        "sideBar.background":"#272822"
    //    },
    "[Atom One Dark]": {
      "sideBar.background": "#212224",
      "editor.background": "#18191A" //
    }
  },
  "editor.tokenColorCustomizations": {
    //    "[Default]": {// 绿柔主题
    //        "rules": [{}]
    //    },
    //    "[Monokai]": {// 酷黑主题
    //         "rules": [{}]
    //    },
    "[Atom One Dark]": {
      "rules": [{
        "scope": [
          "support.type.property-name"
        ],
        "settings": {
          "foreground": "#9CDCFE"
        }
      }, {
        "scope": [
          "support.constant.property-value.css"
        ],
        "settings": {
          "foreground": "#B5CEA8"
        }
      }, {
        "scope": [
          "variable.other.readwrite.js",
          "variable.other.readwrite.tsx",
          "variable.other.readwrite.ts"
        ],
        "settings": {
          "foreground": "#FFD710"
        }
      }, {
        "scope": [
          "text.html.vue"
        ],
        "settings": {
          "foreground": "#61AFEF"
        }
      }, {
        "scope": [
          "string"
        ],
        "settings": {
          "foreground": "#6CD8A6"
        }
      }]
    }
  }

workbench.colorCustomizations 中 sideBar.background 控制项目管理器背景颜色
workbench.colorCustomizations 中 editor.background 控制编辑区域背景颜色
editor.tokenColorCustomizations 设置代码块的对应颜色
如何设置代码块颜色：1.光标点击代码块 2.工具>主题>inspect tokens and colors 3.控制台将打印代码块规则 4.复制到 Settings.json 的 rules 规则中即可自定义代码块颜色

打包安卓

打包流程

发行->原生 App(云打包)
安卓应用发布需要证书，因为只是个人的项目，使用公共测试证书即可, 发布安卓应用商店，请查看https://ask.dcloud.net.cn/article/35777
点击打包，在等待后会生成 apk 文件，发送 apk 文件至手机即可安装应用

应用设置

设置应用名：manifest.json->基础配置->应用名称
设置应用 icon：manifest.json->App 图标设置，选择图片路径然后点击自动生成所有图标并替换
设置支持 64 位架构：manifest.json->App 常用其他配置->支持 cpu 类型，勾选 arm64-v8a

切换 vue3

manifest.json 中选择版本为 vue3,运行项目则会自动安装 vue3 编译插件，最后重新启动项目即可使用 composition api语法

导出uview-ui

插件市场安装

main.js

import App from './App';

// #ifndef VUE3
import Vue from 'vue';
import uView from './uni_modules/uview-ui';
Vue.config.productionTip = false;
Vue.use(uView);
App.mpType = 'app';
const app = new Vue({
  ...App,
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}
// #endif

import App from './App';

// #ifndef VUE3
import Vue from 'vue';
import uView from './uni_modules/uview-ui';
Vue.config.productionTip = false;
Vue.use(uView);
App.mpType = 'app';
const app = new Vue({
  ...App,
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}
// #endif

App.vue

vue

<script>
export default {
  onLaunch: function () {
    console.log('App Launch');
  },
  onShow: function () {
    console.log('App Show');
  },
  onHide: function () {
    console.log('App Hide');
  },
};
</script>

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uni_modules/uview-ui/index.scss';
</style>

<script>
export default {
  onLaunch: function () {
    console.log('App Launch');
  },
  onShow: function () {
    console.log('App Show');
  },
  onHide: function () {
    console.log('App Hide');
  },
};
</script>

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import 'uni_modules/uview-ui/index.scss';
</style>

集成vuex

uniapp项目内置vuex，main.js中直接导入即可

import App from './App'
import store from './store/index.js'
// #ifndef VUE3
import Vue from 'vue'
// 引入uview组件库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App,
  store
})
app.$mount()
// #endif

// #ifdef VUE3
import {
  createSSRApp
} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

import App from './App'
import store from './store/index.js'
// #ifndef VUE3
import Vue from 'vue'
// 引入uview组件库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App,
  store
})
app.$mount()
// #endif

// #ifdef VUE3
import {
  createSSRApp
} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

创建项目 #

开发工具安装 #

新建uniapp项目 #

运行 #

运行至浏览器 #

运行至小程序 #

运行至手机 #

HBuilderX 运行到小程序失败 #

运行至手机模拟器 #

插件配置 #

prettier #

导入 iconfont 文件 #

使用 uni-section #

hbuilderx 主题设置 #

打包安卓 #

打包流程 #

应用设置 #

切换 vue3 #

导出uview-ui #

集成vuex #