使用HBuilderx 可视化创建uni-app

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

开始之前,开发者需先下载安装如下工具:

HBuilderX:官方IDE下载地址
HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

  1. 在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N)
  2. 选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

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

运行uni-app

  • 浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可体验 uni-app 的 web 版。
  • 运行App到手机或模拟器:使用电压足够的usb端口连接手机,设置中开启USB调试,手机上允许电脑设备调试手机,进入hello-uniapp项目,点击工具栏的运行 -> 运行App到手机或模拟器,即可在该设备里面体验uni-app。
  • 在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。

uni-app简介:一套代码、多端运行

uni-app分编译器和运行时(runtime)。uni-app能实现一套代码、多端运行,是通过这2部分配合完成的。

总:编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。

编译器

  • 编译器运行在电脑开发环境。一般是内置在HBuilderX工具中,也可以使用独立的cli版。
  • 开发者按uni-app规范编写代码,由编译器将开发者的代码编译生成每个平台支持的特有代码
    • 在web平台,将.vue文件编译为js代码。与普通的vue cli项目类似
    • 在微信小程序平台,编译器将.vue文件拆分生成wxml、wxss、js等代码
    • 在app平台,将.vue文件编译为js代码。进一步,如果涉及uts代码:
      • 在Android平台,将.uts文件编译为kotlin代码
      • 在iOS平台,将.uts文件编译为swift代码
  • 编译器分vue2版和vue3版
    • vue2版:基于wepback实现
    • vue3版:基于Vite实现。性能更快
  • 编译器支持条件编译,即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

运行时(runtime)

runtime不是运行在电脑开发环境,而是运行在真正的终端上。

uni-app在每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。这是一个比较庞大的工程。

  • 在小程序端,uni-app的runtime,主要是一个小程序版的vue runtime,页面路由、组件、api等方面基本都是转义。

  • 在web端,uni-app的runtime相比普通的vue项目,多了一套ui库、页面路由框架、和uni对象(即常见API封装)

  • 在App端,uni-app的runtime更复杂,可以先简单理解为DCloud也有一套小程序引擎,打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然,事实上DCloud确实有小程序引擎产品,供原生应用实现小程序化

  • uni-app runtime包括3部分:基础框架、组件、API。

逻辑层和渲染层分离

在web平台,逻辑层(js)和渲染层(html、css),都运行在统一的webview里。

但在小程序和app端,逻辑层和渲染层被分离了。

分离的核心原因是性能。过去很多开发者吐槽基于webview的app性能不佳,很大原因是js运算和界面渲染抢资源导致的卡顿。

不管小程序还是app,逻辑层都独立为了单独的js引擎,渲染层仍然是webview(app上也支持纯原生渲染)。

所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom

WebView:网页视图,可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发。
1、显示和渲染Web页面。
2、直接使用html文件(网络上或本地assets中)作布局。
3、可和JavaScript交互调用。

逻辑层和视图层分离,非H5端通信有折损

uni-app 在非H5端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑,也就是运行js代码,视图层负责页面渲染。

虽然开发者在一个vue页面里写js和css,但其实,编译时就已经将它们拆分了。

逻辑层详解

逻辑层是运行在一个独立的jscore里的,它不依赖于本机的webview,所以一方面它没有浏览器兼容问题,可以在Android4.4上跑es6代码,另一方面,它无法运行window、document、navigator、localstorage等浏览器专用的js API。

jscore就是一个标准js引擎,标准js是可以正常运行的,比如if、for、各种字符串、日期处理等。js和浏览器的区别要注意区分开来。

所谓浏览器的js引擎,
就是jscore或v8的基础上新增了一批浏览器专用API,比如dom;
node.js引擎,则是v8基础上补充一些电脑专用API,比如本地io;
而uni-app的App端和小程序端的js引擎,其实是在jscore上补充了一批手机端常用的JS API,比如扫码。

视图层详解

h5和小程序平台,以及app-vue,视图层是webview。而app-nvue的视图层是基于weex改造的原生渲染视图。

逻辑层和视图层分离的利与弊

利:逻辑层和视图层分离,好处是js运算不卡渲染,最简单直接的感受就是:窗体动画稳。

webview新窗体一边做进入动画,一边自身渲染,很容易卡动画。而uni-app则无需写预载代码,新窗体渲染快且动画稳定。

弊:两层互相通信有损耗的。

总结

uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、h5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台

即使不跨端,uni-app同时也是更好的小程序开发框架

拥有vue和微信小程序端开发资源,快速上手uni-app

对于开发者来说,学习uni-app可以减少学习成本,因为学习uni-app后,即可开发出ios、Android、h5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,大大减少开发成本。

项目目录

  1. pages.json: 用来配置uni-app进行全局配置,决定页面文件的路径、窗口样式
    原生导航栏、底部的原生tabbar等
  2. manifest.json:是应用等配置文件,用于制定应用等名称、图标、权限等。
  3. App.vue: 根组件,所有页面都是在App.vue下进行切换等,是页面入口文件,可以调用应用等生命周期函数
  4. main.js: 项目的入口文件,主要作用是初始化vue实例并使用需要的插件
  5. uni.scss: 为了方便整体控应用的风格,比如按钮颜色、边框风格,uni.scss文件里预置里一批scss变量预置
  6. unpackage: 打包目录,在这里有各个平台的打包文件
  7. pages: 所有页面存放的目录
  8. components: 组件存放目录

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app约定了如下开发规范

  1. 页面文件遵循vue单文件(sfc)规范
  2. 组件标签靠近小程序规范
  3. 接口能力(js api)靠近微信小程序规范,但需将前缀替换为uni
  4. 数据绑定及事件处理同vue.js规范,同时补充里app及页面但生命周期
    5.== 为了兼容多端运行,建议使用flex布局进行开发==

pages.json:全局配置和页面配置

1. globalStyle全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等

属性类型默认值描述
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏背景颜色,仅支持black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色,下拉刷新可查看到
backgroundTextStyleStringdark下拉loading的样式,仅支持dark/light
enablePullDownRefreshBolleanfalse是否开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px
"globalStyle": {
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#8A2BE2",
	"backgroundColor": "#87CEEB",
	"backgroundTextStyle":"dark",
	"enablePullDownRefresh":true,
	"onReachBottomDistance": 50
},

2. 通过pages来配置页面

属性类型默认值描述
pathString配置页面路径
styleObject配置特么窗口表示,pageStyle
  • pages节点的第一项为应用入口页(即首页)
  • 应用中新增/减少页面,都需要对 pages 数组进行修改
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源

导航栏

自定义导航栏

修改pages.json中navigationStyle改为custom

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    {
		    "path": "pages/index/index",
		    "style": {
			        "navigationBarTitleText": "",
			        "enablePullDownRefresh": false, // 禁止下拉刷新
			        "navigationStyle": "custom"
		}
    }
],

各平台自定义样式

app-plus: Object 配置编译到 App 平台时的特定样式

h5 Object 设置编译到 H5 平台的特定样式,配置项参考下方 H5

导航栏-滚动透明渐变搜索框
{
    "path": "index",
    "style": {
			"navigationBarTitleText":"呀哈哈商城",
			"app-plus": {
				"titleNView": {
					"type": "transparent",
					"coverage": "50px",
					"backgroundColor": "#b50e03",
					"searchInput": {
						"backgroundColor": "#FFFFFF",
						"borderRadius": "15px",
						"placeholder": "点击搜索",
						"disabled": true,
						"placeholderColor": "#CCCCCC"
					},
					"buttons": [{
							"fontSrc": "/static/iconfont.ttf",
							"text": "\ue8b5",
							"fontSize": "26",
							"color": "#ffffff",
							"float": "left",
							"background": "rgba(0,0,0,0)"
						},
						{
							"fontSrc": "/static/iconfont.ttf",
							"text": "\ue668",
							"fontSize": "26",
							"color": "#ffffff",
							"float": "right",
							"background": "rgba(0,0,0,0)"
						}
					]
				}
			}
    }
}
导航栏-搜索框,自定义按钮
{
    "path": "search",
    "style": {
			"app-plus": {
				"titleNView": {
					"autoBackButton": false,
					"padding": "5px",
					"backgroundColor": "#b50e03",
					"buttons": [{
						"text": "取消",
						"color": "#ffffff",
						"fontSize": "16px"
					}],
					"searchInput": {
						"align": "left",
						"backgroundColor": "#FFFFFF",
						"borderRadius": "15px",
						"placeholder": "请输入搜索内容",
						"placeholderColor": "#CCCCCC"
					}
				}
			}
		}
}

创建新的页面

uni-app中的页面,通常会保存在工程根目录下的pages目录下。

每次新建页面,均需在pages.json中配置pages列表;未在pages.json -> pages 中配置的页面,uni-app会在编译阶段进行忽略。

通过HBuilderX开发 uni-app 项目时,在 uni-app 项目上右键“新建页面”,HBuilderX会自动在pages.json中完成页面注册,开发更方便

3. 配置tabbar

如果应用是第一个多tab应用,可以同tabBa配置指定tab栏的标签,以及tab切换时显示的对应页

  • 当设置position为top时,将不会显示icon
  • tabBar 中的list是一个数组,只能配置最少2个,最多5个tab。tab按数组的顺序排序
  • tabBar 切换第一次加载时可能渲染不计数,可以在每个tabBar页面的onLoad中先弹出一个等待雪花
  • tabBar 的页面展示过一次后就保留在内存中,再次切换tabBar页面,只会触发每个页面的onShow,不会再触发onLoad
  • 顶部的 tabBar 目前仅微信小程序上支持,需要用到顶部选项卡的话,建议不使用tabBar的定于设置,而是自己做顶部选项卡
属性类型必填默认值描述平台差异说明
colorHexColortab上的文字默认颜色
selectedColorHexColortab上的文字选中时的颜色
backgroundColorHexColortab的背景色
borderStyleStringblacktabbar上边框的颜色,仅支持black/whiteApp 2.3.4+ 支持其他颜色值
listArraytab的列表,最少2个,最多5个tab
positionStringbottom可选值:bottom,toptop仅支持微信小程序

其中list接收一个数组,数组中的每一项都是一个对象,其属性值如下:

属性类型必填说明
pagePathString页面路径,必须在pages中线定义
textStringtab上按钮文字,在5+APP和H5平台为非必填
iconPathString图片路径,icon大小限制为40kb,建议尺寸为81px*81px,
当postion为top时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPathString选中时的图片路径,icon大小限制为40kb,建议尺寸为81px*81px,
当postion为top时,此参数无效
// pages.json
"tabBar": {
	"list": [
		{
        			"pagePath": "pages/index/index",
        			"text": "首页",
        			"iconPath": "static/tabs/home.png",
        			"selectedIconPath": "static/tabs/home-active.png"
		},
		{
        			"pagePath": "pages/message/message",
        			"text": "信息",
        			"iconPath": "static/tabs/message.png",
        			"selectedIconPath": "static/tabs/message-active.png"
		},
		{
        			"pagePath": "pages/contact/contact",
        			"text": "我们",
        			"iconPath": "static/tabs/contact.png",
        			"selectedIconPath": "static/tabs/contact-active.png"
		}
	]
},

4. condition启动模式配置

启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如小程序转发后,用户所打开的页面

属性类型是否必填描述
currentNumber当前激活的模式,list节点的索引值
listArray启动模式列表

list说明

属性类型是否必填描述
nameString启动模式名称
pathString启动页面路径
queryString启动参数,可在页面的onLoad函数里获得

注意: 在 App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式: 对应页面名

"condition": {
		"current": 0,
		"list": [
			{
            				"name": "详情页",
            				"path": "pages/detail/detail",
            				"query": "id=1"
			}
		]
	},

环境变量配置

新建package.json,
package.json文件中不允许出现注释,否则扩展配置无效
HBuilderX会根据package.json的扩展配置,在运行、发行菜单下,生成自定义菜单(钉钉小程序),开发者点击对应菜单编译运行即可

{
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释!
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置,可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量,建议为大写
                }
            }
        }    
    }
}

如:

{
	"uni-app": {
		"scripts": {
			"mp-h5-dev": { 
				"title":"H5:开发环境", 
				"env": { 
					"UNI_PLATFORM": "h5",
					 "name": "development"
				},
				"define": { 
					"H5": true 
				}
			},
			"mp-h5-prod": {
				"title":"H5:生产环境", 
				"env": { 
					"UNI_PLATFORM": "h5",
					 "name": "production"
				},
				"define": { 
					"H5": true 
				}
			},
			"mp-weixin-dev": {
				"title":"微信小程序:开发环境", 
				"env": { 
					"UNI_PLATFORM": "mp-weixin",
					 "name": "development"
				},
				"define": { 
					"MP-WEIXIN": true 
				}
			},
			"mp-weixin-prod": {
				"title":"微信小程序:生产环境", 
				"env": { 
					"UNI_PLATFORM": "mp-weixin",
					 "name": "production"
				},
				"define": { 
					"MP-WEIXIN": true 
				}
			}
		}
	}
}

pages.json 模块化

随着项目的壮大与页面的增多,控制路由的pages.json已经异常庞大且代码可读性差(想找一个页面需要找到上下文切换,浪费时间并且可能误删不同平台的页面),亟需优化。

所有需要对页面路由进行模块化管理

可以安装pages.json 增强插件:https://ext.dcloud.net.cn/plugin?id=5163
每次使用插–生成页面配置文件,都需要重启项目才能生效

设置全局iconfont图标

  1. 可以在iconfont 阿里图标库中查找对应的图标,然后下载到本地,将压缩包里的文件复制粘贴到 yhh_shop/static/font文件夹中

  2. 可以将iconfont.css中的@font-face替换成Unicode(使用远程的), 如以下:

  3. 微信小程序不支持引入远程。需进行兼容。

/* #ifdef MP-WEIXIN */
@font-face {
  font-family: "iconfont";
  src: url('/static/iconfont.ttf') format('truetype');
}
/* endif */

/* #ifndef MP-WEIXIN */
@import url(https://at.alicdn.com/t/c/font_3919053_x4dalq8wpg.css); //跟上面的基础字体库一样,这个是远程de
/* endif */
  1. 在项目根目录的 App.vue 中,引入上述的 iconfont.css,注意自己存放的路径,且通过 @import 引入的外部样式,需要写在 style 标签有效内容中的最前面
<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "@/static/iconfont.css";
</style>
  1. 可以在uni.css中设置全局字体变量
/*变量设置 字体*/
$font-family: 'iconfont';
$color: (#d0021b, #7ed321, #bd10e0, #f5a623, #c9e7f5, #ff7800);

使用

<view class="nav-content">
	<view class="nav-item" v-for="(nav) in navList" :key="nav.id" @click="navigate(nav.url)">
		<view class="nav-icon">
			<text class="iconfont icon-all"></text>
		</view>
		<text class="nav-title">{{ nav.title }}</text>
	</view>
</view>

小程序运行含未引入组件报错

微信开发者工具从 1.05.2201210 版本开始,对小程序项目新增了无依赖文件过滤能力。

如果某个 js 文件被静态分析显示是无依赖文件,在实际运行时又被其他 js 文件 require 引用了,则会在工具模拟器中报错这个错误。

解决方式:
关闭过滤无依赖文件:project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false

/Users/clz/学习/前端提升/uni-demo/yhh/unpackage/dist/dev/mp-weixin/project.config.json

ignoreUploadUnusedFiles: false,清除缓存,然后在编译就好了

封装组件

常见的 弹框提示,获取本地存储数据,

请求request api(拦截器)

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部