uni-app 使用vue的语法+小程序的标签和API。基于vue语法,开发规范跟微信小程序是类似的,接近了微信小程序,微信小程序包含的所有内容,api,再uniapp 里也都封装,整合好了。我们使用uniapp 的方式开发再微信小程序是可以实用
<!-- template:view 页面 -->
<template>
<view class="content b-t">
</view>
</template>
<script>
//export default{}:ViewModel 协调者 ,调度器
export default {
// data数据:Model 所有的数据
data() {
return {
source: 0,
addressList: []
}
},
}
</script>
特征
1.跨平台更多(一套代码,多段发行)
2.体验更好(组件、api与维修小程序一致,兼容weex原生渲染)
3.通用技术栈(vue语法、微信小程序api、内嵌mpvue)
4.开发生态,组件更丰富(支持通过npm安装第三方包、支持微信小程序自定义组件及sdk、兼容mpvue组件及项目、app端支持和原生混合编码、DCloud将发布插件市场)
一.开发规范
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
1、页面文件遵循 Vue 单文件组件 (SFC) 规范
2、组件标签靠近小程序规范,详见uni-app 组件规范
3、接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
4、数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
5、为兼容多端运行,建议使用flex布局进行开发
二.目录结构
三.生命周期
uni-app中有三种生命周期函数:应用生命周期、页面生命周期、组件生命周期。
1、应用生命周期
注意
- 应用生命周期仅可在
App.vue
中监听,在其它页面监听无效。 - onlaunch里进行页面跳转,如遇白屏报错,请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答
2、页面生命周期
注意:
- 使用uni-app里面的onReady 代替 vue 里面的 mounted
- 使用uni-app里面的onLoad 代替 vue 里面的 created
3、组件生命周期
uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
所以组件中并不能使用应用生命周期函数
四.路由
1、路由跳转
uni-app
有两种路由跳转方式:使用navigator组件跳转、调用API跳转。
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
</navigator>
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
注意:uni.navigateTo 无法跳转到页面的情况下,一般是因为该链接地址在tabBar里面,所以不能用uni.navigateTo,而是uni.switchTab
五.判断平台
1、条件编辑
平台有
①api
// #ifdef H5 || APP-PLUS
该代码仅出现在H5和 5+App的情况
console.log(H5和 5+App 打印)
// #endif
// #ifndef H5
该代码不会出现在H5的情况
// #endif
②、组件
<!-- #ifdef H5-->
<view>显示</view>
<!-- #endif-->
<!-- #ifdef MP-->
<view>微信小程序</view>
<!-- #endif-->
③、样式
/* #ifdef H5 */
.wx-color{
color:#f00;
}
/* #endif */
view{
/* #ifdef H5 */
color:#f00;
/* #endif */
}
2、运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools)
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
六、页面样式与布局
1、尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx。
750 * 元素在设计稿中的宽度 / 设计稿基准宽度(若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx)
- 设计师可以用 iPhone6 作为视觉稿的标准。
- App端,在 pages.json 里的 titleNView 【导航栏】或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。
- 早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了
总结:正常的页面,我们就使用rpx作为单位 ,再app端的时候,注意titleNView导航栏或页面里写的 plus api 中涉及的单位就好
2、样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
@import "../../common/uni.css";
内联样式
在 uni-app 中不能使用 * 选择器。
<view :style="{color:color}" /> <view class="normal_view" />
在页面里使用{{url}}表达式,在属性使用v-bind(简称:src="url")
3、Flex布局
为支持跨平台,框架建议使用Flex布局,关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。
1. flex 常用的术语
a. flex container :flex 容器 b. flex item:flex项目(元素)
c. flex direction:flex 方向
补充:
A. flex direction:方向:
column 竖排,从上到下排列
column-reverse 反向竖排,排布方向与flex-direction:column相反
row 横排,从左到右排布
row-reverse 反向横排,排布方向与flex-direction:row相反
B. flex-wrap:决定了 flex 成员项在一行还是多行分布,默认值为nowrap
nowrap 不换行,flex 成员项在一行排布,排布的开始位置由direction指定
wrap 换行,第一行在上方,flex 成员项在多行排布,排布的开始位置由direction指定
wrap-reverse 换行,第一行在下方,行为类似于wrap,排布方向与其相反
C.justify-content
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start
flex-start 左对齐,所有的 flex 成员项都排列在容器的前部
flex-end 右对齐,则意味着成员项排列在容器的后部
center 居中,即中间对齐,成员项排列在容器中间、两边留白
space-between 两端对齐,空白均匀地填充到 flex 成员项之间
space-around 表示 flex 成员项两侧的间隔相等,所以,成员项之间的间隔比成员项与边框的间隔大一倍
2. flex项目(元素) 的属性
a. order:控制元素顺序(如:order: 1; order的值越小 越排在前面)
b. flex-grow:控制元素放大比例(默认值为0. 为0不会放大 flex-grow:1.5)
c. flex-shrink:控制元素缩小比例(前提是空间不够;默认为1;设置为0,不缩放)
d. flex-basis:设置元素固定或自动空间的占比
e. align-self:重写align-items父属性
重写容器中元素在交叉轴上的对齐方式
auto:默认,表示继承父级元素的align-items属性
stretch:当元素的高度没有设置,则元素的高度会拉伸至容器高度一致
flex-starl:在交叉轴上向起点位置(向上/向左)对齐
flex-end:在交叉轴上向结束位置(向下/向右)对齐
center:居中对齐
baseline:保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
3. 案例
<view class="container">
<view class="red txt">A</view>
<view class="green txt">B</view>
<view class="blue txt">C</view>
</view>
<style>
.container{
/*定义flex容器*/
display: flex;
/*设置容器内部元素的排序方向*/
flex-direction: row-reverse;/*从右到左*/
}
.txt{
font-size: 40rpx;
width: 150rpx;
height: 150rpx;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
4、背景图片
- 支持 base64 格式图片。
- 支持网络路径图片。
- 使用本地路径背景图片需注意:
- 图片小于 40kb,
uni-app
会自动将其转化为 base64 格式; - 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
- 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)
- 图片小于 40kb,
.test2 {
background-image: url('~@/static/logo.png');
}
5、字体图标
①支持 base64 格式字体图标。
②支持网络路径字体图标。
③网络路径必须加协议头 https。
④从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
⑤uni-app 本地路径图标字体支持情况:
字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;
字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
字体文件的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
七.全部变量
小程序有globalData机制,这套机制在uni-app里也可以使用,全端通用。
以下是 App.vue 中定义globalData的相关配置:
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
js中操作globalData的方式如下: getApp().globalData.text = 'test'
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值
八.配置
注意:
(1).uni-app自定义导航栏
pages.json里面app-plus,目前只有app端、H5有用。小程序没作用
2.小程序组件支持
此文档要求开发者对各端小程序的自定义组件有一定了解,没接触过小程序自定义组件的可以参考:
3.api
①模态框 uni.showToast
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
九.事件处理
用@事件监听 DOM 事件
注意:
- @click,@tap 事件,在浏览器上,@tap 事件会覆盖@click;在手机端的时候,2个事件都存在,这2个取其中一个就可以
- @longtap,@longpress 长期按住事件 ,在浏览器上,longtap 事件会覆盖@longpress;在手机端的时候,2个事件都存在,但是会报警告,longtap已经不在使用。所以推荐使用longpress
- touchcancel 比如手指在按钮上触摸的时候,被打断(来电提示,弹出)的事件
- linechange 输入行数变化时调用
十. 第三方插件使用
第三方插件基本做不到跨端兼容的,所以推荐上插件市场。如果要使用可以查看官网:
十一.hbuildex的夸端使用
h5:运行-运行到浏览器-Chrome
小程序:运行-运行到小程序模拟器-微信开发者工具
十二.分享
在不同平台,分享的调用方式和逻辑有较大差异。
1.App:可以自主控制分享内容、分享形式及分享平台
2.使用 uni.share API方式调用社交sdk分享
3.使用[plus.share.sendWithSystem](http://www.html5plus.org/doc/zh_cn/share.html#plus.share.sendWithSystem)呼起手机os的系统分享菜单
4.小程序:不支持API调用,只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容
5. H5:如果是普通浏览器,浏览器自带分享按钮;如果是在微信内嵌浏览器中,可调用js-sdk进行分享,[参考](https://ask.dcloud.net.cn/article/35380)
(1) 小程序
export default {
data() {
return {
}
},
onShareAppMessage:function(){
return {
title:"朋友们",
path:"pages/index/index"
}
}
}
注意:在小程序端的话,只能分享到微信聊天界面,不能分享到朋友圈
(2).app
1. 设置 manifest.json: app 模块 配置:
a.share(分享) 打钩
b.需要配置 微信,新浪,qq
注意:如果不打包 的话,可以随便写,一旦要打包就要写对。打包的时候数据也要填对。
2. share/index.vue 代码开发
<template>
<view class="index">
分享
<!-- #ifdef APP-PLUS-->
<button type="primary" @click="share">分享</button>
<!-- #endif-->
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
share:function(){
//分享微信
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "我正在使用HBuilderX开发uni-app,赶紧跟我一起来体验!",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
}
}
</script>
3. 真机上调试
十三.使用线上mock 工具fastmock
1. 官方注册账号
2. 创建项目:superhero
3. 创建接口:
4. 直接使用
uni.request({
url: 'https://www.fastmock.site/mock/******/superhero/index/carouseList',//提交的接口地址
method: "GET",
success: (res) => {
console.log('数据',res)
}
})
问题
1.设置每个页面的颜色,加上scoped 小程序这边就不行了,只有去掉scoped,才可以
2.uni.uploadFile 上传图片到服务器,小程序可以,但是h5不行,
应该是 小程序的默认发送格式 跟 h5 的发送格式不一样, 后端没做兼容处理。。暂时没处理,待验证
3.uni-app取消原生头部导航栏
1.取消uni-app原生头部导航栏(全局取消)
所有页面都去掉:在pages.json里
"globalStyle": {
"navigationStyle":"custom"
}
2.单页面取消
新版小程序支持page->style配置navigationStyle为custom =>网址 https://uniapp.dcloud.io/collocation/pages?id=style
app和h5配置titleNView为false =>网址 https://uniapp.dcloud.io/collocation/pages?id=app-plus
如:
{
“page”:"pages/index/index",
"style":{
"navigationStyle":"custom",
"app-plus":{
"titleNView":false
}
}
}