1.uniapp介绍

• uniapp是一个使用vuejs来开发所有前端应用的框架,

• 它的特点是开发者编写一套代码,就可以发布到ios,Android,web响应式以及小程序,快应用等等多个平台

• uniapp属于DCloud公司(HBuilderX编辑器),有较为丰富的周边生态(即插件),提供成熟的组件

• 支持less,scss,typescript

2.如何创建并运行一个uni-app项目?

• 先下载一个HBuilderX然后打开
• 创建uni-app:文件>新建>项目(CTRL+N)>uni-app项目
  
• 运行uni-app项目:选择运行环境(浏览器,手机,小程序,终端等)
  
• 运行结果:(谷歌浏览器)
  

3.如何在HBuliderX中运行uniapp项目到微信小程序模拟器?

step1:配置微信小程序路径

运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置

找到微信开发者工具的安装位置,粘贴上去

(可以在计算机中搜索"微信web开发者工具"这个文件夹的位置)
把C:\Program Files (x86)\Tencent\微信web开发者工具粘贴到上述配置路径中

step2:打开微信开发者工具,设置>安全设置>打开服务端口

step3:打开HbuilderX进入项目，运行>运行到小程序模拟器>微信开发者工具

4.如何给uni-app浏览器配置google运行环境

step1:找到自己电脑上的IPv4地址:控制中心>所有控制面板>网络和共享中心>连接>IPv4

step2:创建uniapp项目根目录下的vue.config.js文件并配置ip地址

代码如下:

module.exports = {
    configureWebpack: {},
    devServer: { // 环境配置
      host: '0.0.0.0',
      public: '192.168.1.2:8080', // 此处是自己电脑IP地址！
      port: '8080',
      https: false,
      disableHostCheck: true,
      open: false // 配置自动启动浏览器
    }
}

5. uni-app打包

• 打开HBuildX，单击发行=>原生App=>云打包
• 登录HBuilder账号，并完成实名认证，实名认证地址:https://dev.dcloud.net.cn/user/profile
• 配置打包选项，使用公共测试证书
• 使用安心打包，会提示安装插件，点击安装。
• 安装完成后，点击打包，等待打包完成。
• 打包完成后，控制台会返回安装包目录，进入目录就能看到安装包了，将安装包发送至手机，就可安装使用了

2022-09-13 uni-app学习笔记(八) 如何把uniapp项目云打包成apk安装包并安装到手机上?

6.uniapp项目文件介绍

常见文件

• pages.json:对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
• manifest.json:应用的配置文件，用于指定应用的名称、图标、权限等。
• App.vue::根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
• main.js:项目:入口文件，主要作用是初始化vue实例并使用需要的插件。
• uni.scss:整体控制:应用的风格。比如按钮颜色、边框风格等等，uni.scss文件里预置了一批scss变量预置。

常见目录

• unpackage:打包目录，在这里有各个平台的打包文件。
• pages:所有的页面存放目录。
• static:静态资源目录，例如图片等。
• components:组件存放目录。