uni-app开发前注意

面条请不要欺负汉堡

已于 2022-05-24 11:23:16 修改

阅读量3.6k

点赞数 2

分类专栏： uni-app 文章标签：规范

于 2019-09-17 15:16:20 首次发布

本文链接：https://blog.csdn.net/gao_xu_520/article/details/100920972

版权

uni-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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跳转。

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 格式图片。
支持网络路径图片。
使用本地路径背景图片需注意：
1. 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
2. 图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
3. 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）

 .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、pages.json

注意：

(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 输入行数变化时调用

十. 第三方插件使用

第三方插件基本做不到跨端兼容的，所以推荐上插件市场。如果要使用可以查看官网：

uni-app支持使用npm安装第三方包。

关于uni-app的ui库、ui框架、ui组件

十一.hbuildex的夸端使用

1.uni-app的H5版使用注意事项

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

       }

      }

    }

面条请不要欺负汉堡

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
uni-app开发前注意

uni-app 使用vue的语法+小程序的标签和API。特征1.跨平台更多（一套代码，多段发行）2.体验更好（组件、api与维修小程序一致，兼容weex原生渲染）3.通用技术栈（vue语法、微信小程序api、内嵌mpvue）4.开发生态，组件更丰富（支持通过npm安装第三方包、支持微信小程序自定义组件及sdk、兼容mpvue组件及项目、app端支持和原生混合编码、DCloud将...
复制链接

扫一扫