从uniapp使用的开发软件，到创建，到运行，如何打包不同平台的代码，如何打包apk，云打包，如何运行在不同的端

---

一、uni-app简单介绍

什么是uni-app？

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

uni-app的优点

跨平台发行，运行体验更好

• 与小程序的组件、API一致；
• 兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；

通用前端技术栈,学习成本更低

• 支持vue语法，微信小程序API
• 内嵌mpvue

开发生态,组件更丰富

• 支持通过npm安装第三方包
• 支持微信小程序自定义组件及JS SDK
• 兼容mpvue组件及项目(内嵌mpvue开源框架)
• App端支持和原生混合编码
• 插件丰富,DCloud将发布插件到市场

二、功能框架浏览图

三、创建项目

1、安装HBuilderX

HBuilderX内置相关环境，无需配置nodejs、vue等，三秒钟就可以创建一个项目。

• 小提示：ctril+N可以快速调转到新建选择类型
  

2、创建uni-app

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

3、运行项目

1. 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。

2. 真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
   

   如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具。

3. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
   

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。

4、官方提示

• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

四、打包apk，云打包

uni-app打包成安卓app

1. uni-app 云打包流程:
   发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包名 -> 去除广告选项 -> 打包 （如果显示已经成功上传到云平台，只需要等待打包的结果即可）
   打包的结果会显示在控制台内，打包成功就会返回一个网址，从网址中可以下载打包的apk文件

如果失败 很多时候是manifeast.json文件没有配置成功

2. uni-app mainfeast.json文件配置方法
   基础配置中： uni-app标识符(可以云端自动获取)，应用名称(最后显示在手机上的应用名称), 版本号什么的自己填即可

app图标配置，在手机上显示的你的app的图标,导入后点击自动生成，即可将所有端的app图标都自动生成
启动sdk的配置，例如地图，进入高德地图的开发者官方自己申请一个即可

申请高德地图用到的packageName就是你的之前获取的uni-app标识符
然后需要的SHA安全码
BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58

具体参考: Android平台云端打包使用的安全码

如果用到微信支付什么的也是一样的要设置配置

然后再用1中的步骤打包即可

五、项目中使用扩展组件

1. 在uniapp官网中选择要引入的组件
   

2. 这里就拿Card 卡片 做演示
   

3. 项目中下载插件
   

4. 下载完成 引入组件
   

import uniCard from '@/components/uni-card/uni-card.vue'
export default {
    components: {uniCard}
}

<!-- 一般用法 -->
<uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">
    内容主体，可自定义内容及样式
</uni-card>


<!-- 内容通栏 -->
<uni-card is-full="true" title="DCloud" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="2018.12.12" >
    <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;"></image>
</uni-card>


<!-- 图文卡片模式 -->
<uni-card
    title="标题文字"
    mode="style"
    :is-shadow="true"
    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
    extra="Dcloud 2019-05-20 12:32:19"
    note="Tips"
>
        那是一个秋意盎然、金风送爽的日子，我和父母一起来到了位于上师大旁的康健园。一踏进公园，一股浓郁的桂香扑鼻而来，泌人心脾,让我心旷神怡，只见一朵朵开得正烈的金色桂花，迎风而立，仿佛在向我招手。我们追着这桂香，走进了清幽的公园。
</uni-card>


<!-- 标题卡片模式 -->
<uni-card 
    title="Dcloud" 
    mode="title" 
    :is-shadow="true" 
    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
    extra="技术没有上限" 
    note="Tips"
>
    那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.
</uni-card>


<!-- 自定义底部按钮 -->
<uni-card title="Dcloud" note="true">
    默认内容
    <template v-slot:footer>
        <view class="footer-box">
            <view>喜欢</view>
            <view>评论</view>
            <view>分享</view>
        </view>
    </template>
</uni-card>

5. 使用效果