多是最好的uniapp入门教程

时间  2021-04-20
标签 css html vue webpack web vuex vue-cli npm json 小程序 栏目 CSS 繁體版
原文   原文链接

uniapp[1]是Dcloud公司的产品，是一个跨端开发框架，基于vue.js技术栈。开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各类小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。这是它的功能架构图，能够看下，了解下它的架构。css

简单总结下，uniapp底层集成了native技术，就是h5+引擎，能调用手机原生api，因此uniapp能开发app，这是js引擎部分；它是双引擎，渲染又是独立一个独立引擎。这个渲染引擎又分为nvue渲染和webview渲染，nvue其实就是集成的weex，webview这个有了解的应该知道它的内核是webkit，能够看这篇文章[2]了解。html

生态环境

uniapp官方的qq群目前已经有35个了，都是2000人的大群。还有各类基于uniapp的开源组件库，好比uViewUI、colorui、ThorUI、uCharts，最完整最出名的目前是uViewUI，官方文档也是比较完备了，https://uviewui.com/。他们的官方qq群如今有4个，能够加群找开发者解答疑问。uniapp官方说有600万开发者，总体上看，生态还算不错。vue

正确姿式

一、阅读官方文档

官方文档[3]从入门介绍到学习方法再到用法说明、注意事项等等，包罗万象。若是文档看不下去，能够看看社区帖子，或者从插件市场找些现成的用起来。webpack

二、活用插件市场

插件上包含了各类组件、SDK、项目模板等各类资源，甚至还有uniCloud、HbuilderX的相关插件。若是官方的基础组件、官方的uni-ui扩展组件库不能知足你的需求，均可以到插件市场找找看。官方是很重视这个插件市场的，好比uni-ui有一篇官方文档介绍说明https://uniapp.dcloud.io/component/README?id=uniui，点击下面的组件就会跳转到插件市场，uniui所有散落在这个插件市场里。web

看这个插件市场排名，也能大概了解目前的插件市场现状，总体上仍是比较活跃的：vuex

除了上面提到的比较综合的组件库，其实还有不少优秀的插件做者，他们是专一在特定领域，下面推荐几个：vue-cli

  • 多是uniapp生态最好的路由插件 [4]
  • 应该是最强大富文本插件 [5](已经被uviewui集成)
  • 我的以为目前最好table组件 [6]
  • 挺不错的日期时间选择器 [7]

三、经过社区、qq群、插件留言向开发者提问

若是你严格按照文档进行开发，仍然遇到了问题，这时可能须要向他人求助了。若是是uniapp官方问题，能够在社区[8]]查找相关资料，这里的案例至关多，基本能找到大部分问题；npm

插件问题最好就是直接在插件市场对应插件下留言，若是你的问题描述清楚明确，都会有人回答，有的时候，在线就能等到回复。也能够加相应的qq群，里面的热心人仍是很多的。json

实战教程

前面介绍了uniapp官方资源的正确食用方式，下面介绍一下uniapp如何进行开发、调试、发布，这里涉及到app、h5及小程序(微信小程序)。小程序

1、环境搭建

一、安装hbuilderX

hbuilderx也是dcloud公司出品的ide产品。用uniapp开发跨多端产品，实现一次开发，多端发布就必须用hbuilderx这个神器IDE。这里是官网下载地址https://www.dcloud.io/hbuilderx.html，找到app开发版本下载，开箱即用，不用安装。uniapp对安卓和苹果的系统版本有要求：Android最低要4.四、IOS最低要9。

二、安装夜神模拟器

既然是开发app，就少不了连机调试，你能够链接手机，也能够安装一个模拟器，这里推荐夜神模拟器，下载地址：https://www.yeshen.com/。

三、配置环境

hbuilderx链接到模拟器，选择工具--设置，打开配置界面,选择运行配置，如图。

adb路径选择模拟器安装包的adb.exe地址，模拟器端口，夜神模拟器默认是62001，填上就能够了。若是你不肯定它的端口，能够在adb.exe的同级目录下找到文件，双击运行，能够看到这个结果，如图:

这个就是夜神模拟器的监听端口。

四、svn源码管理

选择工具--插件安装，能够打开一个插件管理面板，如图。安装插件，它这里分为核心插件和其余插件两类，核心插件能跟随ide一块儿升级，其余插件就要到插件市场找本身须要的了。像svn这种插件，默认是没有的，能够到安装新插件这里安装svn插件。

安装过程比较简单，直接点击就好了。安装好了也能够卸载。

五、插件市场插件安装

插件市场的插件安装通常是这种方式：

点击这个按钮就能够安装到本地。这也分几种，我了解的就是组件类、编译类。像组件类，点击安装后会直接安装到当前打开的uniapp项目中，并且是指定的文件夹components中；像编译类，这种其实相似于webpack的loader，这个是放在hbx的安装包里。

2、uniapp手把手实战

一、新建uniapp空模板项目

cli模式

用hbx建立项目在官方教程上讲得比较细致了，我这里只介绍下用vue-cli建立项目过程。建立步骤在官网上也有，相比用hbx的可视化搭建，用cli搭起来慢了很多。

//安装vue/cli全局依赖
npm install -g @vue/cli

//建立项目模板
vue create -p dcloudio/uni-preset-vue my-project

若是在执行脚本时有这样的错误提示：vue: 没法加载文件 C:....vue.ps1。说明你的脚本运行被禁止了，解决办法就是打开当前项目地址的资源管理器，点击文件，弹出对话框，如图点击所示位置

会有弹出框，在里面执行这个段代码：

set-ExecutionPolicy RemoteSigned 

执行以后，按提示输入Y或者A就能够了，再按上面进行项目建立，就正常了：

最后，它会提示你选择项目模板：

通常建议选择hello uni-app的模板。若是一切顺利，建立完成的项目，看起来是这样的，以下图

咱们能够观察下它的package.json文件，能够看到有不少的打包、运行命令，uniapp确实帮咱们作了不少事！

cd my-project进入到项目中，运行一下npm run dev:h5，试下效果。

能够看到确实成功了，打开启动页，按f12将页面切换到手机模式，就能看到效果了。

这种cli模式下没法链接到模拟器调试，要实时调试app版本，只能用hbx这个ide。cli模式除了能调试h5版本，还能够调试小程序，以微信小程序为例，这须要先准备好开发工具。

hbuilderx模式

考虑到app是咱们最主要的产品输出，最好仍是切换到hbuilderx编译器上，其实用习惯以后，感受仍是挺好用的。cli模式适合开发h5或者小程序。具体的步骤看官网就能够了，比较简单，可视化操做，一步步走就没问题。其实前面用cli模式建立的项目，也能够用hbx开发，在hbx编译器上打开文件夹，选择cli项目的src文件夹，就是一个标准的hbuilderx建立项目了。

这时选择运行--运行到模拟器就能够了

二、目录结构

咱们来观察下这个项目结构，这是官方的一个介绍，我copy过来了

┌─cloudfunctions        云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components            符合vue组件规范的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            配置页面路由、导航条、选项卡等页面类信息，详见
    

重点是pages、static、main.js、App.vue、manifest.json、pages.json这几个目录或者文件。

三、必学内容

我这里不必把官方文档从头讲一遍，这里能够告诉你重点内容，你学习时重点关注，重点消化就能够了。

第一个就是框架介绍这里，你要把框架简介的内容通读并熟悉。

第二个就是上手开发了，这时框架这块要知道怎么用了，如何配置pages.json文件很是重要！具体的其实我也记不住，可是经过配置调试你就能知道是怎么回事了，这个熟悉就好了。

四、uniapp路由页面配置(pages.json)

打开pages.json文件，这是一个uniapp项目配置文件，是json格式。若是内容较多，能够右键--显示文档结构图，能够看到这个文件的基本结构是这样：

pages是项目中用到的全部的页面配置，第一项是登陆app的启动页，通常放登陆页或者首页，其余的能够参官方文档[9]看看说明并手动设置下参数，看下效果就明白了。subPackages是分包加载配置，这个是为小程序准备的，小程序在发布上传代码时对总包大小(目前是16M)有要求，还要对总包进行分包，每一个小分包不能超过2M，这个就要求在这里进行配置分包加载。globalStyle这个是设置全局样式的，通常都会有一个统一风格的样式，能够在这里设置，包括导航栏、标题、窗口背景色这些。tabBar这个也很是重要，这是app的标配，至关因而一级导航栏，拿咱们这个hello uniapp的项目举例来讲，框住部分就是tabBar的内容。

tabBar各组内容最多只能有5项，最少要有2项，都在list项进行配置

看下list项具体内容

五、生命周期

这里按照粒度从粗到细分为应用生命周期、页面生命周期及组件生命周期，具体的能够看下文档[10]。其中组件生命周期是跟vue组件的生命周期相同。具体用法要结合业务场景配合来使用用。

六、状态管理

状态管理这块有几种方式，

  • vuex

    vuex用法与vue项目上是同样的。惟一要注意的就是import store from './store/store.js'这句只能写在main.js里，在别处引用都会报错？！

  • uni.storage

这块看下对应api的具体用法，这个状态数据是持久化的，除非你调用它的清除接口，这个数据会一直缓存在本地。

  • globalData

这个用的比较少，这是在app.vue页面定义全局变量，具体用法[11]以下：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

//在其余页面调用/修改全局变量
getApp().globalData.text = 'test'

七、全局事件

uniapp的API文档很是详细，甚至封装了全局事件，咱们能够直接用了

八、接口请求封装

这一块内容在API模块的网络[12]栏，通常的接口请求就用uni.request(object)就能够了。普通的接口调用用这个就已经够了，若是须要用到请求拦截，须要到插件市场找合适的插件。这里推荐luch-request[13],文档很清楚，功能比较全。

九、路由跳转

路由跳转对应的API[14]可能看下官方文档，基本上都是经常使用的。这里有个前提就是，当前页面必须在pages.json中配置好，才能调用这些跳转的api。还有个要注意的就是tabbar页面只能用uni.switchTab来跳转。咱们知道vue有vueRouter来支持路由跳转、路由守卫，可是uniapp不支持这个插件，若是要在uniapp上实现，这里推荐uni-simple-router[15]

十、全局样式

样式这一块要注意的地方比较多，我总结了一下特别要注意是这些地方：

  • 尺寸单位

uniapp目前通用的尺寸单位是px、rpx，px即咱们一般理解的像素单位；rpx是一个响应式单位，它会根据屏幕宽度按给定值占比来计算出像素值。

前面提到的pages.json页面的globalStyle[16]配置节点，能够经过配置来控制rpx的计算参数

  • css变量及固定值

这几个参数主要是在跨端样式控制时要注意，常常会遇到app布局弄得差很少了，而后到h5端，样式就不对了，或者到小程序上也是异常。看上面这个表，主要就是要注意这三个变量在不一样环境下，它的值是不一样的，要特别注意。下面这个表，是对上面的一个补充，若是在h5端，不存在原生顶部导航栏与tabBar，就是自定义的div，咱们在设置样式时就要参照这些变量的固定值。

  • 字体图标
    • 通用的支持格式包括base64格式、网络路径即在线字体(须https开头)
    • 小程序不支持在css中引用本地文件，包括图片或者字体
    • uniapp会自动把小于40kb的字体文件转换为base64，uniapp不会编译static文件夹下的内容

其余的像样式导入、内联样式等与web端应用开发差很少。还有一个要注意的就是若是要设置全局样式，能够在App.vue中设置或者用@import导入外联样式就能够了。

十一、组件及组件库

组件这块是很是重要的，对uniapp来讲包括框架设计、底层原理这些都是灵魂是骨架；前面讲到的各类规则及配置都是行为习惯、准则；还有前面提到的状态管理、路由、事件、样式、接口请求等，这些就像是血管、淋巴同样不可缺乏；组件就是内脏、肌肉了，具体做用就看它的定位了。

官方文档这块将组件[17]专门列为一个栏目，能够大概看下有哪些组件。平时开发基本功能用官方提供的组件基本上就知足了。开源的组件库也是基于官方组件进行的二次封装，通常原则是优先参考官方组件，若是官方组件不支持的，或者用起来不方便的，再到开源市场寻找开源插件。

十二、登陆跳转到首页

接下来，咱们开发一个登陆跳转的功能。前面咱们用vuecli建立了一个项目，那个是hellouni的，内容有点多，如今咱们从新搭建一个空的项目模板，这样清楚一点。步骤跟前面同样，就是选择模板时选默认模板就好了。

开发登陆功能

在空模板项目上尝试开发一个登陆功能，通常须要这几步：

  • 新建一个登陆页面，配置pages页面路由参数 
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  {
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },{
   "path": "pages/index/index",
   "style": {
    "navigationBarTitleText": "uni-app"
   }
  }
    ]
  • 准备一个可用的登陆接口，进行封装 
uni.request({
     // #ifdef H5
     url: '/data-receive/v1/login',
     // #endif
     // #ifndef H5
     url: 'http://##.##.##.##:##/data-receive/v1/login',
     // #endif
     method: 'POST',
     data: {
      username: this.name,
      password: this.password
     },
     dataType: 'json',
     success(res) {
      if (res.statusCode == 200 && res.data.code == 200) {
       //跳转到首页
       uni.navigateTo({
        url: '../index/index'
       })
      }
     }
    })
  • 新建登陆页面，完成布局、样式，登陆逻辑 
<template>
 <view class="content">
  <view class="logo">
   <image src="../../static/logo.png" mode=""></image>
  </view>
  <view class="list">
   <view class="title">
    用户名
   </view>
   <view class="input">
    <input type="text" placeholder="请输入用户名" v-model="name" />
   </view>
  </view>
  <view class="list">
   <view class="title">
    密码
   </view>
   <view class="input">
    <input type="text" placeholder="请输入密码" v-model="password" />
   </view>
  </view>
  <button type="default" @tap="dologin">登陆</button>
 </view>
</template>
  • 将登陆接口请求分两种状况：h5环境、非h5环境 
// #ifdef H5
url: '/data-receive/v1/login',
// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login',
// #endif
  • h5环境用代理解决跨域 
"h5" : {
        "router" : {
            "base" : "./"
        },
        "devServer" : {
            "proxy" : {
                "/data-receive" : {
                    "target" : "http://##.##.##.##:##/data-receive",
                    "pathRewrite" : {
                        "^/data-receive" : ""
                    }
                }
            }
        }
    }
  • 页面跳转 
uni.navigateTo({
    url: '../index/index'
   })

更多跳转请参考路由与页面跳转[18]

1三、开发调试

app开发调试

app调试在hbuilderx右下角点击bug标识就会弹出调试框，以下图所示，不过这个比较简，监测不到网络请求，不过打断点调试仍是很是方便的。

h5开发调试

h5其实就是网页，这个调试就比较简单了，跟开发web项目同样的。

  • 在hbx上运行到浏览器(内置或者其余浏览器)
  • f12并开启手机调试模式

小程序开发调试

首先要明白uniapp小程序版本的开发方式：开发仍是在hbx上开发，只不过要运行到小程序开发工具上，而后在hbx上开发会实时更新到小程序上。也就是说小程序开发工具只是个模拟器，看效果的，上面的代码都是从uniapp版本编译过来的，对开发不太友好，不建议在小程序开发工具上修改。如下是微信小程序开发步骤：

  • 到微信公众平台注册一个小程序，并填写相关信息
  • 在开发设置完成小程序开发者绑定，生成小程序以后会有一个小程序appid，这个要保存
  • 下载安装小程序开发工具

若是项目是第一次运行到小程序，须要在小程序开发工具上绑定前面注册保存的appid，小程序代码地址(此例是在newproject\src\unpackage\dist\dev\mp-weixin)，绑定好了就能看到小程序的开发状态了，就像这样：

前面讲太小程序的开发仍是在hbx上，小程序工具是看效果的，可是调试找bug仍是得在小程序开发工具上，调试模块就在右下角，相似于谷歌浏览器的调试窗，若是以为窗口过小，点击这个浮动窗口按钮就能弹出调试窗口。

已经弹出的调试窗口

1四、打包发布

app打包发布

app打包流程比较简单，分为安卓和苹果两大平台。通常app上线都应该走云打包流程，选择发行-->原生App云打包，弹出这个对话框。

这个是安卓包，若是不须要上市场上的应用平台，就能够选择公共测试证书的打包方式。

这是苹果版本的打包，苹果打包后要上线，只有上线appstore一条路，证书相关的三个文件都不能少。

点击打包以后，进入云打包队列排队等待，成功以后会给出下载地址：

安卓版本是能够直接安装使用的，你能够放在生产环境服务器上供用户下载。若是是苹果版本，打包后的ipa文件不能直接使用，还要提交到appstore审核经过，最后才能发布，这个周期大概在一周左右。

app热更新

在app上线以后，后面的版本升级就能够用热更新方式更新了，不用每次都发布一个新的完整包。选择发行-->原生App-制做应用wgt包，弹出更新包对话框：

生成wgt后，将wgt文件放在服务器，用户在app上检测到有更新时就会下载更新包在本地热更新。

  • 发行wgt时，manifest.json配置页面的应用版本名称与应用版本号都必须高于上一次设置的值；

  • 检测版本是否更新，若是有更新就下载更新包、安装并重启应用，这里有个完整教程[19]

h5打包发布

h5版本的打包应该是最简单的，发布也能够按网页部署方式来，若是想用微信打开网页，最好将h5部署在外网域名所在的服务器上。

小程序打包发布

  • 分包

小程序打包对包的大小有限制，以前是16M如今升级到了20M。具体的分包方法参考官方文档说明[20]，咱们分包是要在uniapp上进行分包，注意uniapp分包要求[21]。我写了关于uniapp适配微信小程序[22]的文章，对分包上传有说明，能够参考。

  • 上传代码 代码上传直接在开发工具上操做，步骤简单，这里不细说了，若是分包正常就不会有问题
  • 提交审核 这步按官方要求来就行，不是必填的就不用填

未完待续。。。。


备注：

一、https://uniapp.dcloud.io/README

二、https://mp.weixin.qq.com/s/vxbVz_gHJd_rxK0bgUWBfg

三、https://uniapp.dcloud.io/README

四、https://ext.dcloud.net.cn/plugin?id=578

五、https://ext.dcloud.net.cn/plugin?id=805

六、https://ext.dcloud.net.cn/plugin?id=491

七、https://ext.dcloud.net.cn/plugin?id=112

八、https://ask.dcloud.net.cn/explore/

九、https://uniapp.dcloud.io/collocation/pages?id=pages

10https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

十一、https://uniapp.dcloud.io/collocation/App?id=globaldata

十二、https://uniapp.dcloud.io/api/request/request?id=request

1三、https://www.quanzhan.co/luch-request/

1四、https://uniapp.dcloud.io/api/router?id=navigateto

1五、http://hhyang.cn/src/router/start/quickstart.html

1六、https://uniapp.dcloud.io/collocation/pages?id=globalstyle

1七、https://uniapp.dcloud.io/component/view

1八、https://uniapp.dcloud.io/api/router?id=navigateto

1九、https://ask.dcloud.net.cn/article/35667

20https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

21https://uniapp.dcloud.io/collocation/manifest?id=%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E

2二、https://juejin.cn/post/6895310727544832013


本文分享自微信公众号 - 字节逆旅（wvivw_007）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程