uni-app学习笔记1(创建项目、运行、打包)

目录

 

一、下载HBuilderX

二、打开HBuilderX,创建项目

三、创建完成​

四、运行 

五、打包 


一、下载HBuilderX

下载地址:https://www.dcloud.io/hbuilderx.html
安装:

二、打开HBuilderX,创建项目

三、创建完成

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录,详见
├─platforms             存放各平台专用页面的目录,详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录,详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

四、运行 

1、浏览器

2、手机(需要开启USB调试,然后USB选项选择“用作MIDI输入设备”)

3、微信小程序

注意,这里如果直接运行,会报错

需要在微信开发者中开启 服务端口

每次在HBuilderX中修改代码,会自动刷新微信小程序中的代码。 

五、打包 

1、打包原生APP

  • 首先配置Appid

  • 然后打包

 

注意,这里需要证书,如何生成证书 

  • 首先安装jdk环境变量(只安装jre也行),然后进入jre安装目录,在这里打开cmd窗口,执行如下指令:
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
  • 然后根据提示输入信息(注意自己输入的密码,后面要用):

  • 就会看到生成的证书,把证书随便放在某个文件夹内

  • 接下来查看证书信息,在证书所在文件下下打开cmd,执行:
keytool -list -v -keystore test.keystore  
  • 可以看到证书的基本信息,这里的别名很重要,打包时要用。

  • 打包时间有点长,打包成功后,会返回一个下载地址:

  • 下载后,可以得到一个.apk文件,传入手机,运行,就得到了app。

2、打包H5

  • 配置manifest.json

  • 然后打包h5 

  • 打包成功后,会看到如下信息。

  • 然后打开路径,找到打包好的静态资源

  

  • 把如下代码放在web服务器中,如tomcat、nginx中运行。

3、打包小程序 

  • 首先需要申请到微信小程序,获取appId,小程序前置条件做好后,就可以直接打包。

 通过微信开发者工具,可以直接打开

猜你喜欢

转载自blog.csdn.net/qq_39648029/article/details/107905592