您的当前位置:首 页 >> 信息中心

hello最好的自己pdf,最好的uniapp入门实战教程

发布日期:2021-11-30 20:22:20 作者: 点击:

本文已在我的公众号上发布,更多原创技术文章,请关注我的公众号“字节逆旅”

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

简单总结下,uniapp底层集成了native技术,就是h5+引擎,能调用手机原生api,所以uniapp能开发接近原生性能的app,这是js引擎部分;它是双引擎,渲染又是独立一个独立引擎。这个渲染引擎又分为nvue渲染和webview渲染,nvue其实就是集成的weex,webview这个有了解的应该知道它的内核是webkit,可以看这篇文章了解。

生态环境

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

正确姿势1、阅读官方文档

官方文档从入门介绍到学习方法再到用法说明、注意事项等等,一应俱全。如果文档看不下去,可以看看社区帖子,或者从插件市场找些现成的用起来。

2、活用插件市场

插件上包含了各种组件、SDK、项目模板等各种资源,甚至还有uniCloud、HbuilderX的相关插件。如果官方的基础组件、官方的uni-ui扩展组件库不能满足你的需求,都可以到插件市场找找看。官方是很重视这个插件市场的,比如uni-ui有一篇官方文档介绍说明uniapp.dcloud.io/component/R…

看这个插件市场排名,也能大概了解目前的插件市场现状,整体上还是比较活跃的:

除了上面提到的比较综合的组件库,其实还有很多优秀的插件作者,他们是专注在特定领域,下面推荐几个:

可能是uniapp生态最好的路由插件应该是最强大的富文本插件(已经被uviewui集成)个人觉得目前最好的table组件挺不错的日期时间选择器3、通过社区、qq群、插件留言向开发者提问

如果你严格按照文档进行开发,仍然遇到了问题,这时可能需要向他人求助了。如果是uniapp官方问题,可以在社区查找相关资料,这里的案例相当多,基本能找到大部分问题;

插件问题最好就是直接在插件市场对应插件下留言,如果你的问题描述清楚明确,都会有人回答,有的时候,在线就能等到回复。也可以加相应的qq群,里面的热心人还是不少的。

实战教程

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

一、环境搭建1、安装hbuilderX

hbuilderx也是dcloud公司出品的ide产品。用uniapp开发跨多端产品,实现一次开发,多端发布就必须用hbuilderx这个神器IDE。这里是官网下载地址www.dcloud.io/hbuilderx.h…

2、安装夜神模拟器

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

3、配置环境

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

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

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

4、svn源码管理

选择工具--插件安装,可以打开一个插件管理面板,如图。安装插件,它这里分为核心插件和其他插件两类,核心插件能跟随ide一起升级,其他插件就要到插件市场找自己需要的了。像svn这种插件,默认是没有的,可以到安装新插件这里安装svn插件。

安装过程比较简单,直接点击就行了。安装好了也可以卸载。

5、插件市场插件安装

插件市场的插件安装一般是这种方式:

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

二、uniapp手把手实战1、新建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创建项目了。

这时选择运行--运行到模拟器就可以了

2、目录结构

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

┌─cloudfunctions云函数目录(阿里云为aliyun,腾讯云为tcb,详见uniCloud)│─components符合vue组件规范的uni-app组件目录│└─comp-a.vue 可复用的a组件├─hybrid存放本地网页的目录,详见├─platforms 存放各平台专用页面的目录,详见├─pages 业务页面文件存放的目录│├─index││└─index.vue index页面│└─list│ └─list.vuelist页面├─static存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此├─wxcomponents存放小程序组件的目录,详见├─main.js Vue初始化入口文件├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见└─pages.json配置页面路由、导航条、选项卡等页面类信息,详见复制代码

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

3、必学内容

我这里没必要把官方文档从头讲一遍,这里可以告诉你重点内容,你学习时重点关注,重点消化就可以了。

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

第二个就是上手开发了,这时框架这块要知道怎么用了,如何配置pages.json文件非常重要!具体的其实我也记不住,但是通过配置调试你就能知道是怎么回事了,这个熟悉就行了。

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

打开pages.json文件,这是一个uniapp项目配置文件,是json格式。如果内容较多,可以右键--显示文档结构图,可以看到这个文件的基本结构是这样:

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

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

看下list项具体内容

5、生命周期

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

6、状态管理

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

vuex

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

uni.storage

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

globalData

这个用的比较少,这是在app.vue页面定义全局变量,具体用法如下:

export default {globalData: {text: 'text'}}//在其他页面调用/修改全局变量getApp().globalData.text = 'test'复制代码7、全局事件

uniapp的API文档非常详细,甚至封装了全局事件,我们可以直接用了

8、接口请求封装

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

9、路由跳转

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

10、全局样式

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

尺寸单位

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

前面提到的pages.json页面的globalStyle配置节点,可以通过配置来控制rpx的计算参数

css变量及固定值

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

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

其他的像样式导入、内联样式等与web端应用开发差不多。还有一个要注意的就是如果要设置全局样式,可以在App.vue中设置或者用@import导入外联样式就可以了。

11、组件及组件库

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

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

12、登录跳转到首页

接下来,我们开发一个登录跳转的功能。前面我们用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 H5url: '/data-receive/v1/login',// #endif// #ifndef H5url: 'http://##.##.##.##:##/data-receive/v1/login',// #endifmethod: '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'})}}})复制代码新建登录页面,完成布局、样式,登录逻辑用户名密码登录复制代码将登录接口请求分两种情况:h5环境、非h5环境// #ifdef H5url: '/data-receive/v1/login',// #endif// #ifndef H5url: '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'})复制代码

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

13、开发调试app开发调试

h5开发调试

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

在hbx上运行到浏览器(内置或者其他浏览器)f12并开启手机调试模式小程序开发调试

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

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

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

前面讲过小程序的开发还是在hbx上,小程序工具是看效果的,但是调试找bug还是得在小程序开发工具上,调式模块就在右下角,类似于谷歌浏览器的调试窗,如果觉得窗口太小,这击这个浮动窗口按钮就能弹出调试窗口。

已经弹出的调试窗口

14、打包发布app打包发布

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

这个是安卓包,如果不需要上市场上的应用平台,就可以选择公共测试证书的打包方式。

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

点击打包之后,进入云打包队列排队等待,成功之后会给出下载地址:

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

app热更新

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

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

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

检测版本是否更新,如果有更新就下载更新包、安装并重启应用,这里有个完整教程h5打包发布

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

小程序打包发布分包

小程序打包对包的大小有限制,之前是16M现在升级到了20M。具体的分包方法参考官方文档说明,我们分包是要在uniapp上进行分包,注意uniapp分包要求。我写了关于uniapp适配微信小程序的文章,对分包上传有说明,可以参考。

上传代码提交审核微信公众号集成发布

未完待续。。。。