uni-app开发前注意

矫情吗；* 2021-08-19 15:28 210阅读 0赞

uni-app 使用vue的语法+小程序的标签和API。基于vue语法，开发规范跟微信小程序是类似的，接近了微信小程序，微信小程序包含的所有内容，api,再uniapp 里也都封装，整合好了。我们使用uniapp 的方式开发再微信小程序是可以实用

<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) 规范][Vue _ _SFC_]  
2、组件标签靠近小程序规范，详见uni-app 组件规范  
3、接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范  
4、数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期  
5、为兼容多端运行，建议使用flex布局进行开发

# 二.目录结构 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

# 三.生命周期 #

1、应用生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

**注意**

*  应用生命周期仅可在`App.vue`中监听，在其它页面监听无效。
 *  onlaunch里进行页面跳转，如遇白屏报错，请参考[https://ask.dcloud.net.cn/article/35942][https_ask.dcloud.net.cn_article_35942]

2、[页面生命周期][Link 1]

# 四.路由 #

1、路由跳转

`uni-app` 有两种路由跳转方式：使用[navigator][]组件跳转、调用[API][]跳转。

uni.navigateTo(\{  
    url: 'test?id=1&name=uniapp'  
\});

注意：**uni.navigateTo 无法跳转到页面的情况下，一般是因为该链接地址在tabBar里面，所以不能用uni.navigateTo，而是uni.switchTab**

# 五.判断平台 #

[跨端兼容][Link 2]

1、条件编辑

![20210708163009587.png][]

平台有

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

①api
    	// #ifdef H5 || APP-PLUS
    		该代码仅出现在H5和 5+App的情况
              console.log(H5和 5+App 打印)
    	// #endif
    
    	// #ifndef H5
    		该代码不会出现在H5的情况
    	// #endif
    
    
    ②、组件
    
    	<view>显示</view>
    
    
    
        <view>微信小程序</view>
    
    ③、样式
    /* #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 【导航栏】][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布局][Flex]可以参考外部文档[A Complete Guide to Flexbox][]、[阮一峰的flex教程][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>

[ 详细介绍][Link 3]

## 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][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3][]

注意：

(1).uni-app自定义导航栏

pages.json里面app-plus，目前只有app端、H5有用。小程序没作用

2.小程序组件支持

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 4][]

此文档要求开发者对各端小程序的**自定义组件**有一定了解，没接触过小程序**自定义组件**的可以参考：

*  [微信小程序自定义组件][Link 4]
 *  [百度小程序自定义组件][Link 5]
 *  [支付宝小程序自定义组件][Link 6]
 *  [头条小程序自定义组件][Link 7]

3.api

①模态框  [uni.showToast][]

uni.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });

# 九.[事件处理][Link 8] #

用@事件监听 DOM 事件

注意：

*  @click,@tap 事件，在浏览器上，@tap 事件会覆盖@click；在手机端的时候，2个事件都存在，这2个取其中一个就可以
 *  @longtap,@longpress 长期按住事件 ，在浏览器上，longtap 事件会覆盖@longpress；在手机端的时候，2个事件都存在，但是会报警告，longtap已经不在使用。所以推荐使用longpress
 *  touchcancel 比如手指在按钮上触摸的时候，被打断（来电提示，弹出）的事件
 *  linechange 输入行数变化时调用

# 十. 第三方插件使用 #

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

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

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

# 十一.hbuildex的夸端使用 #

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

h5：运行-运行到浏览器-Chrome

小程序：运行-运行到小程序模拟器-微信开发者工具

# 十二.分享 #

[官网分享][Link 9]

在不同平台，分享的调用方式和逻辑有较大差异。

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"
                       }
                    }
               
                }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 5][]

注意：在小程序端的话，只能分享到微信聊天界面，不能分享到朋友圈

（2）.app

1. 设置 manifest.json: app 模块 配置：   
      
        a.share(分享) 打钩  
        b.需要配置 微信，新浪，qq    
        注意：如果不打包 的话，可以随便写，一旦要打包就要写对。打包的时候数据也要填对。

2. share/index.vue 代码开发

<template>
        	<view class="index">
                分享
                
                    <button type="primary" @click="share">分享</button>
                
        	</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. 创建接口：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 6][]

4. 直接使用

uni.request({
    	url: 'https://www.fastmock.site/mock/******/superhero/index/carouseList',//提交的接口地址
    	method: "GET",
    	success: (res) => {
    		console.log('数据',res)
    	}
    })

# 问题 #

1.设置每个页面的颜色，加上scoped   小程序这边就不行了,只有去掉scoped，才可以

![20200206175331153.png][]

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
    
           }
    
          }
    
        }

[Vue _ _SFC_]: https://vue-loader.vuejs.org/zh/spec.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/466d7dc93a88425990416dfae205e249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/2390ac03b90749a0bffaa245d734e620.png
[https_ask.dcloud.net.cn_article_35942]: https://ask.dcloud.net.cn/article/35942
[Link 1]: https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
[navigator]: https://uniapp.dcloud.io/component/navigator
[API]: https://uniapp.dcloud.io/api/router
[Link 2]: https://uniapp.dcloud.io/platform?id=%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9
[20210708163009587.png]: /images/20210813/c11d78ed6e974abf89720ef1659baede.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/ec774bccb36e409e8d91dea0aadbe434.png
[titleNView]: https://uniapp.dcloud.io/collocation/pages?id=app-titlenview
[Flex]: https://uniapp.dcloud.io/nvue-css?id=flexbox
[A Complete Guide to Flexbox]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Link 3]: https://blog.csdn.net/qq_42322103/article/details/92843806
[pages.json]: https://uniapp.dcloud.io/collocation/pages
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 3]: /images/20210813/6af8e0c861b94b2586dcc1f4f5a800b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 4]: /images/20210813/e286e3cf465a4b19a70de1e9962f5e6f.png
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[Link 5]: https://smartprogram.baidu.com/docs/develop/framework/custom-component/
[Link 6]: https://docs.alipay.com/mini/framework/custom-component-overview
[Link 7]: https://developer.toutiao.com/docs/framework/custom_component_intro.html
[uni.showToast]: https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
[Link 8]: https://uniapp.dcloud.io/vue-basics?id=%E4%BA%8B%E4%BB%B6%E6%98%A0%E5%B0%84%E8%A1%A8
[uni-app_npm]: https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81
[uni-app_ui_ui_ui]: https://ask.dcloud.net.cn/article/35489
[uni-app_H5]: https://ask.dcloud.net.cn/article/35232
[Link 9]: https://uniapp.dcloud.io/api/plugins/share
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 5]: /images/20210813/7018df790b5240358c3dfc13d4ff8df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 6]: /images/20210813/9e72f784d8bb464990353f82c885172e.png
[20200206175331153.png]: /images/20210813/176f900e50fa4909a620410cd0f6ec3f.png