Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
MuGuiLin
uni-app
提交
1f382826
U
uni-app
项目概览
MuGuiLin
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
1f382826
编写于
8月 08, 2019
作者:
W
wanganxp
提交者:
GitHub
8月 08, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update quickstart.md
上级
88b69351
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
49 addition
and
49 deletion
+49
-49
docs/quickstart.md
docs/quickstart.md
+49
-49
未找到文件。
docs/quickstart.md
浏览文件 @
1f382826
> `uni-app`支持通过 可视化界面、[`vue-cli`命令行](https://uniapp.dcloud.io/quickstart?id=%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c) 两种方式快速创建项目。
## 1. 通过 HBuilderX 可视化界面
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
> `uni-app`支持通过 可视化界面、[`vue-cli`命令行](https://uniapp.dcloud.io/quickstart?id=%e9%80%9a%e8%bf%87vue-cli%e5%91%bd%e4%bb%a4%e8%a1%8c) 两种方式快速创建项目。
## 1. 通过 HBuilderX 可视化界面
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
开始之前,开发者需先下载安装如下工具:
-
HBuilderX:
[
官方IDE下载地址
](
http://www.dcloud.io/hbuilderx.html
)
HBuilderX是通用的前端开发工具,但为
`uni-app`
做了特别强化。
下载App开发版,可开箱即用;如下载标准版,在运行或发行
`uni-app`
时,会提示安装
`uni-app`
插件,插件下载完成后方可使用。
如使用
`cli`
方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。
如使用
`cli`
方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。
### 创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目:
...
...
@@ -117,13 +117,13 @@ HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行
#### 发布为H5
1.
在
``manifest.json``
的可视化界面,进行如下配置(发行在网站根目录可不配置应用基本路径),此时发行网站路径是 www.xxx.com/h5,如:
[
https://uniapp.dcloud.io/h5
](
https://uniapp.dcloud.io/h5
)
。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/build-h5-1.png"
style=
"max-width:600px;height:auto;"
/>
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/build-h5-1.png"
style=
"max-width:600px;height:auto;"
/>
</div>
2.
在HBuilderX工具栏,点击发行,选择网站-H5手机版,如下图,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-10.png"
style=
"max-width:600px;height:auto;"
/>
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-10.png"
style=
"max-width:600px;height:auto;"
/>
</div>
**注意**
...
...
@@ -131,18 +131,18 @@ HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行
-
打包部署后,在服务器上开启 gzip 可以进一步压缩文件。具体的配置,可以参考网上的分享:https://juejin.im/post/5af003286fb9a07aac24611b
#### 发布为小程序
**发布为微信小程序:**
1.
申请微信小程序AppID,参考:
[
微信教程
](
https://developers.weixin.qq.com/miniprogram/dev/#申请帐号
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可在
``unpackage/dist/build/mp-weixin``
生成微信小程序项目代码。
**发布为微信小程序:**
1.
申请微信小程序AppID,参考:
[
微信教程
](
https://developers.weixin.qq.com/miniprogram/dev/#申请帐号
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可在
``unpackage/dist/build/mp-weixin``
生成微信小程序项目代码。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-6.png"
/>
</div>
3.
在微信开小程序发者工具中,导入生成的微信小程序项目,测试项目代码运行正常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可,详细查看:
[
微信官方教程
](
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/release.html
)
。
**发布为百度小程序:**
1.
入驻小程序并申请百度小程序AppID,参考:
[
百度小程序教程
](
https://smartprogram.baidu.com/docs/introduction/enter_application/
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-百度",输入小程序名称和appid点击发行即可在
``/unpackage/dist/build/mp-baidu``
生成百度小程序项目代码。
1.
入驻小程序并申请百度小程序AppID,参考:
[
百度小程序教程
](
https://smartprogram.baidu.com/docs/introduction/enter_application/
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-百度",输入小程序名称和appid点击发行即可在
``/unpackage/dist/build/mp-baidu``
生成百度小程序项目代码。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-7.png"
/>
</div>
...
...
@@ -150,8 +150,8 @@ HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行
**发布为支付宝小程序:**
1.
入驻支付宝小程序,参考:
[
支付宝小程序教程
](
https://docs.alipay.com/mini/introduce
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-支付宝",即可在
``/unpackage/dist/build/mp-alipay``
生成支付宝小程序项目代码。
1.
入驻支付宝小程序,参考:
[
支付宝小程序教程
](
https://docs.alipay.com/mini/introduce
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-支付宝",即可在
``/unpackage/dist/build/mp-alipay``
生成支付宝小程序项目代码。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-8.png"
/>
</div>
...
...
@@ -159,8 +159,8 @@ HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行
**发布为头条小程序:**
1.
入驻头条小程序,参考:
[
头条小程序教程
](
https://developer.toutiao.com/docs/intro/create.html
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-字节跳动",即可在
``/unpackage/dist/build/mp-alipay``
生成头条小程序项目代码。
1.
入驻头条小程序,参考:
[
头条小程序教程
](
https://developer.toutiao.com/docs/intro/create.html
)
。
2.
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-字节跳动",即可在
``/unpackage/dist/build/mp-alipay``
生成头条小程序项目代码。
<div
align=
center
>
<img
src=
"https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni20190222-8.png"
/>
</div>
...
...
@@ -168,39 +168,39 @@ HBuilderX 还提供了快捷运行菜单,可以按数字快速选择要运行
发布的快捷键是
`Ctrl+u`
。同样可拉下快速发布菜单并按数字键选择。
## 2. 通过vue-cli命令行
除了
可视化界面,也可以使用
`cli`
脚手架,可以通过
`vue-cli`
创建
`uni-app`
项目。
## 2. 通过vue-cli命令行
除了
HBuilderX可视化界面,也可以使用
`cli`
脚手架,可以通过
`vue-cli`
创建
`uni-app`
项目。
**注意:**
-
vue-cli 版本必须是3.x
-
`cli`
版本更新快于HBuilderX正式版。HBuilderX正式版所包含的uni-app编译器一般是在
`cli`
版发布一段时间并稳定后才会更新到HBuilderX正式版。
`cli`
版适合喜欢鼓捣的尝鲜者,其好处是可以及时获取新功能,坏处是稳定性不如HBuilderX正式版,但因为开源,所以也欢迎开发者一起完善。
-
`cli`
版本更新快于HBuilderX正式版。HBuilderX正式版所包含的uni-app编译器一般是在
`cli`
版发布一段时间并稳定后才会更新到HBuilderX正式版。
### 环境安装
全局安装vue-cli
```
npm install -g @vue/cli
```
```
npm install -g @vue/cli
```
### 创建uni-app
```
vue create -p dcloudio/uni-preset-vue my-project
```
此时,会提示选择项目模板,初次体验建议选择
`hello uni-app`
项目模板,如下所示:
<div>
<img
src=
"http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/h5-cli-01.png"
width=
"300"
>
</div>
```
vue create -p dcloudio/uni-preset-vue my-project
```
此时,会提示选择项目模板,初次体验建议选择
`hello uni-app`
项目模板,如下所示:
<div>
<img
src=
"http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/h5-cli-01.png"
width=
"300"
>
</div>
#### 自定义模板
选择自定义模板时,需要填写 uni-app 模板地址,这个地址其实就是托管在云端的仓库地址。以 GitHub 为例,地址格式为
`userName/repositoryName`
,如
`dcloudio/uni-template-picture`
就是下载图片模板。
更多支持的下载方式,请参考这个插件的说明:
[
download-git-repo
](
https://github.com/flipxfx/download-git-repo
)
### 运行并发布uni-app
### 运行并发布uni-app
```
npm run dev:%PLATFORM%
...
...
@@ -234,12 +234,12 @@ npm run build:%PLATFORM%
*
``cli``
创建的项目,编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器,执行
``npm update``
。
*
HBuilderX可视化界面创建的项目,编译器在HBuilderX的安装目录下的plugin目录,随着HBuilderX的升级会自动升级编译器。
*
已经使用
``cli``
创建的项目,如果想继续在HBuilderX里使用,可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX,则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中,则走的是HBuilderX安装目录下plugin目录下的编译器。
*
``cli``
可以自定义webpack,有灵活度但增加了出错的概率。
如果想安装less、scss、ts等编译器,需自己手动npm安装。在HBuilderX的插件管理界面安装无效,那个只作用于HBuilderX创建的项目。
*
``cli``
版
如果想安装less、scss、ts等编译器,需自己手动npm安装。在HBuilderX的插件管理界面安装无效,那个只作用于HBuilderX创建的项目。
#### 开发工具的区别
*
``cli``
创建的项目,内置了d.ts,同其他常规npm库一样,可在vscode
等支持d.ts的开发工具里正常开发并有语法
提示。
*
但
其他开发工具比起HBuilderX,开发效率仍有不足
。详见:
[
https://ask.dcloud.net.cn/article/35451
](
https://ask.dcloud.net.cn/article/35451
)
*
``cli``
创建的项目,
发布App时,仍然需要使用HBuilderX。其他开发工具无法发布App,但可以发布H5、各种小程序。
*
``cli``
创建的项目,内置了d.ts,同其他常规npm库一样,可在vscode
、webstorm等支持d.ts的开发工具里正常开发并有语法提示。注意使用HBuilderX创建的项目不带d.ts,拖到其他工具里不会有代码
提示。
*
但
vscode等其他开发工具,在vue或uni-app领域,开发效率比不过HBuilderX
。详见:
[
https://ask.dcloud.net.cn/article/35451
](
https://ask.dcloud.net.cn/article/35451
)
*
发布App时,仍然需要使用HBuilderX。其他开发工具无法发布App,但可以发布H5、各种小程序。
*
如果使用
``cli``
创建项目,那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。
*
对
`cli`
使用有疑问,欢迎扫码加入 uni-app 微信交流群讨论:
<br/><img
src=
"http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/wx-barcode.png"
width=
"250"
/>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录