阅读 128

uni-app 入门之项目初始化

1. HBuilderX

工欲善其事必先利其器,想要使用 uni-app 开发APP, 必备的就是这款国产编译器, 下载网址

选择正式版的对应操作的App开发版下载即可, 下载完成后不用安装直接点击可运行文件即可使用

2. 搭建项目

打开编译器后依次选择 文件 》 新建 》 项目 》 uni-app 》 默认模板

image.png

如图所示, 点击创建就完成了一个项目的初始化了, 也可以选择其他模板进行项目创建, 这个具体看客人需求

3. 运行项目

点击项目随意一个文件夹, 然后依次选择 运行 》 运行到你需要的终端

如果是开发APP, 你可以用数据线连接好你的手机, 并开启开发者模式进行调试, 也可以电脑上安装一个手机模拟器, 这里我使用的是雷电模拟器, 同样也需要打开模拟器的开发者模式

开发者模式

手机如何打开开发者模式请自行百度,这里简单说一下手机模拟器的开发者模式如何开启

依次点击菜单 设置 》 关于平板电脑 》 版本号(点击五下) 即可进入开发者模式

app-dev.gif

运行到终端

普通测试只需要直接依次点击 运行 》 运行到手机或模拟器 》 选择对应的模拟器

如果未出现对应模拟器选择请查看是否已经开启了开发者模式, 或者重新点击项目目录后再选择模拟器

自定义基座

如果需要测试推送或者其他需要 cid 使用功能时, 需要先制作自定义调试基座

依次点击 运行 》 运行到手机或模拟器 》 制定自定义调试基座

制作完成后先要选择 运行的基座 依次点击 运行 》 运行到手机或模拟器 》 运行基座选择 》 自定义调试基座

选择完成后运行到模拟器即可, 编译成功后会自动在模拟器中安装APP并运行,并将运行日志输出到控制台

调试

所有页面 console 日志都将显示在控制台日志中, 并关联文件打印处,也可以在项目中进行 debugger 断点调试

image.png

如果觉得控制台日志不方便查看, 也可以点击控制台右上角一个 debugger 按钮使用 uni-app 调试工具

image.png

4. 目录结构

image.png

初始项目还是精简的, 首先介绍一下各个文件夹和文件的作用

  • .hbuilderx 这个是编译器自动生成的系统文件,和其他编辑器一样保存了本地编辑记录以及一些设置,注意这个文件是无需上传到代码库的
  • pages 这个是存放所有页面文件的目录
  • static 这个是静态资源目录, 一般用来放置静态图片的
  • unpackage 这个是运行编译后生成的文件, 也无需上传到代码库
  • App.vue, main.js 这两个文件和 vue 中功能大致相同
  • manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录,CLI 创建的工程此文件在 src 目录。
  • pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

具体功能可以参考官方文档介绍 配置说明

一般来说真实开发光这些目录是不够的, 大家可以根据自身业务进行扩展, 这里我列举一下我自己开发中需要使用的一些目录

uview-ui

这个是我目前在使用的一个第三方组件库, 可以进入 uni-app 插件市场进行下载安装, 具体安装步骤如下:

  1. 安装下载

插件市场 搜索 uview 进行下载安装

image.png

也可以下载 zip 文件进行解压

  1. 拷贝目录

打开下载后的文件夹, 将 uview-ui 整个文件夹拷贝到项目顶级目录

  1. 配置

具体配置方法官方文档和插件市场都有详细介绍

image.png

components

可以将封装好的业务组件放置到公共组件目录进行复用

store

如果有需要使用 vuex 可以创建该目录并新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
    },
    getters
})

export default store
复制代码

然后在main.js 中注册使用

//引入vuex
import store from './store'
const app = new Vue({
    ...App,
    store
})
复制代码

common

该文件夹用来存放一些公共方法、 样式、第三方插件以及全局混入

api

将所有接口放置该目录统一管理

5. node 插件安装

很多时候需要安装一些第三方插件,这个时候就可以在项目根目录下 执行 npm init 初始化一个 package.json 包管理文件

然后根据你需要的插件进行 npm install 安装就OK了

使用的时候和 vue 项目中一致, 在对应文件中进行 import 或者 required 引入

6. 接口代理

在进行本地 H5 调试是如果后台接口进行跨域限制, 这时我们就需要前端进行代理配置

  1. manifest.json 配置

可以在 manifest.json 文件中加入一项 h5 配置

"h5" : {
        "devServer" : {
            "port" : 1000,
            "disableHostCheck" : true,
            "proxy" : {
                "/baseUrl" : {
                    "target" : "",
                    "changeOrigin" : true,
                    "secure" : true,
                    "ws" : true,
                    "pathRewrite" : {
                        "^/baseUrl" : ""
                    }
                }
            }
        }
    }
复制代码

target 中填入你需要代理的后台接口名称

  1. vue.config.js

在项目根目录下新建一个 vue.config.js, 配置如下

module.exports = {
  devServer: {
    port: '1000',
    proxy: {
      '/baseUrl': {
        target: '',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/baseUrl': ''
        }
      }
    }
  }
}
复制代码

如果两处都进行了配置, 那么以 manifest.json 为主, 相较于 manifest.json 中配置, 我更习惯与 vue 的配置方案, 更为贴近以前 vue 的开发模式

7. 项目打包

安卓打包较为简单, 只需要点击 发行 》 原生APP-云打包

如果无需上传到第三方应用市场直接选择使用公共测试证书打包就OK了, 点击打包后等待几分钟就可以生成一个 apk 文件了

推送权限

如果需要消息推送配置可以点击 manifest.json勾选后 Push选项并进行相应配置就好了, 如果需要离线消息推送那就需要进行各大厂商推送设置了

image.png

配置时的安卓包名就是 原生APP-云打包时自动生成的那个包名, 应用签名如果是公用证书默认的是

BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58

8. 安装运行

至此一个简单的APP项目就完成了, 可以将自己打包好的 apk 文件下载到手机上进行安装运行

文章分类
前端
文章标签