UniApp

一、什么是uni-app?
       

Uni-app是一个跨平台开发框架，可以帮助开发者快速构建多端应用，包括Web、iOS、Android、H5、小程序等。Uni-app的特点是使用Vue.js作为开发语言，可以在不同的移动端平台上共享组件库和业务逻辑代码，大大提高了开发效率和代码重用率。同时，Uni-app提供了丰富的原生API和插件来实现更多功能。

二、uni-app的特点与优势
uni-app的特点

跨平台开发

uni-app可以实现一次编码，同时生成多个应用程序，包括iOS、Android、H5、小程序等。开发者只需要使用Vue.js框架进行开发，而不需要考虑不同平台的差异，大大降低了应用程序的开发难度和复杂度。

统一的开发语言和工具

uni-app的开发语言是Vue.js，它是一种基于组件化开发的前端框架，易于学习和使用。uni-app提供了一套完整的开发工具，包括Uni-app Cli、HBuilder X等，使得开发者可以在同一个环境下进行开发、调试和打包。

独特的基于条件编译的代码生成技术

uni-app采用了一种名为“基于条件编译的代码生成技术”，能够根据应用程序平台的不同，编译出特定的应用程序代码。开发者只需要编写一份代码，就可以生成多个应用程序，大大提高了开发效率。

多种组件库支持

uni-app支持多种UI组件库，包括Vant、Mint UI、uView等，开发者可以根据自己的需求选择适合的组件库，快速构建应用程序。

uni-app的优势

减少开发成本和时间、一次开发，多端部署、良好的性能和用户体验、开放的生态系统。

三、开发工具
Hbuilderx
微信开发者工具 
安卓模拟器
四、新建一个项目
点击HbuilderX菜单栏文件>项目>新建
选择uni-app,填写项目名称，项目创建的目录
点击创建，创建项目
五、uni-app框架主要有五大优势
1.兼容性好 uni-app 最大的特点就是一套代码编译以后多端通用，开发人员不需要在每个平台都单独开发一套代码就可以同时生成安卓、iOS、H5、百度小程序等等。 节省了大量的成本。

2.学习成本低 uni-app 是基于 vue.js 开发，因此对于前端开发人员比较友好，学习 uni-app 的门槛也相应降低。 尤其是封装的插件与微信端小程序的组件相同。

3.开发速度快 uni-app 使用 HBuilderX 进行开发，所以支持 vue 的语法。 同时 HBuilderX 的开发和编译速度都很快，这也是很多人选择 uni-app 的理由之一。

4.扩展能力强 uni-app 支持 nvue，封装了 H5+。 同时，还支持原生的 iOS 和安卓开发。

5.uni-app是DCloud出品的，属于我们国家拥有自主知识产权的产品。发布为小程序

UniApp引用外部在线JavaScript文件

UniApp是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序等多个平台。在UniApp开发中，有时我们可能需要引用外部的在线JavaScript文件来扩展功能或实现某些特定的需求。

1. 创建UniApp项目

首先，确保你已经安装了HBuilderX编辑器，并使用它创建了一个新的UniApp项目。

2. 在页面中引用外部JS

要在UniApp中引用外部在线JavaScript文件，你可以使用<script>标签在页面的.vue文件中进行引用。

例如，在pages/index/index.vue中：

<template>
    <view>
        <!-- 页面内容 -->
    </view>
</template>
<script>
export default {
    data() {
        return {
            // 数据
        };
    },
    mounted() {
        // 页面加载完成后执行的代码
        this.loadExternalJS();
    },
    methods: {
        loadExternalJS() {
            const script = document.createElement('script');
            script.src = 'https://example.com/path/to/your/script.js'; // 替换为你的JS文件URL
            script.async = true; // 异步加载
            document.body.appendChild(script);
        }
    }
};
</script>
<style>
    /* 页面样式 */
</style>

3. 注意事项

• 跨域问题：确保你的外部JavaScript文件允许跨域访问，否则可能会出现加载失败的情况。
• 安全性：在引用外部JS文件时，要注意文件的内容是否安全，避免潜在的XSS攻击。
• 性能考虑：虽然异步加载可以提高页面加载速度，但也要确保JS文件中的内容不会影响到页面的正常显示和功能。

4. 使用CDN加速

为了提高外部JS文件的加载速度，你可以考虑使用CDN（内容分发网络）来加速文件的传输。将JS文件上传到CDN服务商，并使用其提供的URL进行引用。

引用微信小程序组件

1、创建存放组件的目录，目录名字根据官网定义是 wxcomponents，自己随便取不生效。且需要与pages同级，组件里文件的命名为index，如下：

┌─wxcomponents                  // 微信小程序自定义组件存放目录
│   └──loanTrial                // 微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
│  └─index
│        └─index.vue
│  └─detail
│        └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

2、在 pages.json 对应页面的 style -> usingComponents 引入组件。比如我想在detail.vue中引入该组件

//package.json
{
  "path": "pages/detail/detail",
  "style": {
      "navigationBarTitleText": "详情",
      "usingComponents":{
        "loan-trial": "/wxcomponents/loanTrial/index"
      }
   }
},

3、页面中直接使用

// detail.vue
<template>
  <view>
    <loan-trial :carPrice="loadTrialPrice"></loan-trial>
  </view>
</template>