阅读 823

uni-app跨端开发框架介绍

uni-app

一套代码,多端运行

使用vue的语法 + 微信小程序的标签和API的跨平台前端框架

框架简介:

  • 可编译到iOS、Android、H5、微信/支付宝/百度/小程序

  • 将常用的组件和API进行了跨平台的封装,可覆盖大部分的业务需求

  • 平台能力不受限:通过条件编译+平台特有的API调用,可以优雅地在为某平台写个性化代码,调用专有能力而不影响其他平台。

  • 插件丰富,推出插件市场,能够提供较多的组件和模板

开发工具:

  • HBuilderX : 内置uni-app编译器

  • 微信/百度/支付宝小程序开发工具 :编译调试小程序

  • 安卓/IPHONE手机+数据线

开发规范:

  • 页面文件遵循Vue 单文件组件 (SFC) 规范

  • 组件标签靠近小程序规范

  • 使用upx作为默认的尺寸单位,可根据屏幕宽度进行自适应

  • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni

  • 数据绑定及事件处理同 Vue.js 规范,补充了App及页面的生命周期

  • 为兼容多端运行,建议使用 Flex 布局进行开发

  • 优先使用基础组件,不满足的地方,用扩展组件补充,不要把整个项目全部都构建在某个ui框架下。

  • 需要了解的原生安卓、IOS开发流程

开发流程:

1,创建uni-app

创建项目截图

1.1 目录结构
┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录,详见
├─platforms             存放各平台专用页面的目录,详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的地方,注意:静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息
复制代码
2.运行uni-app (浏览器、真机、小程序)
(第一次运行小程序时需要在mainfest.json配置小程序的appid)

运行模式编译出的各平台代码存放于根目录下的 /dist/dev/目录

连接到ios设备经常失败,最好是安装一个【爱思助手】

第一次运行小程序时需要在 mainfest.json配置小程序的 appid

3.发布uni-app

  • 发布模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录

  • 发布到每个小程序时都必须填写对应的名称和 appid

  • 发布到 H5 需要在 在 manifest.json 的可视化界面,进行应用基础路径的配置 (比如配置了 /test/ ,此时发行网站路径是 www.XXX.com/test/ )

  • 发布打包原生APP,需要填写ios或安卓开发者证书等信息

点击查看具体详情 uniapp.dcloud.io/quickstart

小知识点:

条件编译:一个项目里可以分别调用不同平台的特色功能

<view class="content">
  <! -- #ifdef MP-WEIXIN -->
  <view>只会编译到微信小程序</view>
  <! -- #endif -->
  <! -- #ifdef APP-PLUS -->
  <view>只会编译到app</view>
  <! -- #endif -->
</view>
复制代码

若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
复制代码

scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。 使用 scroll-view 会和原生下拉刷新造成冲突,所以在使用 scroll-view 的地方不建议使用下拉刷新,也不建议监听 onPullDownRefresh 事件。

若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view 。

使用罗盘、地理位置、加速计等相关接口需要使用https协议,本地预览(localhost)可以使用 http 协议。

PC 端 Chrome 浏览器模拟器设备测试的时候,获取位置 API 需要连接谷歌服务器。

组件内(页面除外)不支持onLoad生命周期。

uni-app 可以根据 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具

微信、百度小程序和App去除原生导航栏

{  
    "path": "pages/log/log",  
    "style": {  
        "navigationBarTitleText": "hello",  
        "navigationStyle": "custom",  //小程序去除原生导航
        "app-plus": {  
            "titleNView": false   // app去除原生导航
        }  
    }  
}  
复制代码

建议性:

  • 推荐的开发流程是在PC的Chrome下开发测试,基本完成后运行到微信工具测试,最后再上真机运行看兼容性问题。

  • 使用 uni-app 的 onReady代替 vue 的 mounted。

  • 使用 uni-app 的 onLoad 代替 vue 的 created。

  • 使用代码块直接创建组件模板,比如快速生成新闻列表 ulistMedia @tap表示绑定点击事件。因为是在移动端,避免用@click,因为它在移动端会有大约300ms的延迟

填坑之路:

  • 支付宝/百度/字节跳动小程序工具,不支持直接指定项目启动并运行。因此开发工具启动后,请将 HBuilderX 控制台中提示的项目路径,在相应小程序开发者工具中打开

  • 当设置 "navigationStyle":"custom" 后可以使用固定一个高度为 var(--status-bar-height) 的 view 放在页面顶部,使得状态栏不遮盖内容里

  • 不能使用 v-html 指令,可以使用rich-text组件代替。或者第三方组件wxparse

  • 使用本地路径背景图片需注意:

    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
.test2 {
     background-image: url('~@/static/logo.png');
 }
复制代码
关注下面的标签,发现更多相似文章
评论