uni-app基本使用

1.uni-app简介

        1.1uni-app概述：

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

        1.2uni-app由来：

是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

        

       1.3 uni-app特点：

                1.跨更多平台

                2、一套代码，多平台运行

                3、运行体验好，性能高

                4、开发生态、周边生态丰富（组件丰富）

                5、通用技术栈，学习/开发成本低，

2.uni-app环境搭配

        

        2.1

        下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

选择对应的版本下载即可：

        2.2

        下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：

        2.3

        打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

微信开发者工具安装路径可通过此方式快速查找：

3.uni-app项目的创建和运行

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

        3.1

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

              3.2 

        第二步：选择 uni-app

   

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

        3.3

最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

        3.4

选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令，即可在微信开发者工具中体验uni-app，如图：

PS:如果想要把小程序运行到真机的微信小程序当中，则需要在微信公众平台申请小程序账号，流程为：

申请小程序账号：

① 进入微信公众平台官网，然后点击右上角的“立即注册”链接（如果已经注册了可以直接登录，登录方式可以选择账号密码登录或者微信扫码登录）。

② 点击“立即注册”链接进入注册页面，此页面提供了四种类型的账号注册，分别为：订阅号、服务号、小程序、企业微信。我们选择小程序进行注册。

③ 进入小程序注册页面，填写相关信息，账号信息填写完毕后，点击下方的“注册”按钮，进入邮箱激活页面，此时需要登录上一步中的邮箱，查收腾讯官方发送的小程序账号激活邮件，点击激活链接。（注意：每个邮箱只能申请一个小程序。并且，已经绑定了其他的公众号、小程序、个人号的邮箱，不能重新注册新的小程序）

④ 点击激活链接后，继续下一步的注册流程，选择注册的主体类型，并完善主体信息和管理员信息。（主体类型选择个人即可）

最后，小程序账号申请成功，就可以再次进入进入微信公众平台官网页面进行登录，登录成功之后进入小程序管理界面中的 "开发"-->"开发管理"-->"开发设置"，可以看到此页面有一个AppID(小程序ID)，记住这个id的获取方式，后期需要用到。

4.1uni-app项目的打包发布

        4.1uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：

   打包为原生App（云端）

        4.2

 打包为原生App（离线）

        4.3

发布为h5，操作流程如下：

        4.4

发布为微信小程序

点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮

出现此截图说明打包上传成功：

此时登录微信公众平台官网。

等待审核通过之后，点击【提交发布】即可发布成功。

PS:如果在提交审核的过程中，弹出弹窗提示需要设置主营类目的话，根据指引前往设置即可。

参考网址：设置

注意：

1、主营类目有且只有一个，选择即生效，不可删除；

2、主营类目每年有 5 次修改机会，修改即生效，请谨慎修改；

3、完成主营类目设置后才可提交代码审核；

4、主营类目选择错误可能影响代码审核结果，请正确选择。