uniapp学习日记

小尹同学
272 阅读8分钟

uni-app的开发规范：(看起来就是Vue和小程序混合起来了)

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

一、uniapp项目开发方式分为两种：

1.vue-cli（只开发h5端 or 只开发微信小程序端）

创建项目

1.全局安装

npm install -g @vue/cli@4

2.创建项目 my-project 项目名称

vue create -p dcloudio/uni-preset-vue my-project

3.选择模版 --默认模板

4.成功

2.HBuilderX可视化（多端开发首选 or 只开发手机APP）

二、uniapp项目结构介绍

一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录
├─nativeplugins         App原生语言插件
├─nativeResources       App端原生资源目录
│  └─android            Android原生资源目录
├─hybrid                App端存放本地html文件的目录
├─wxcomponents          存放小程序组件的目录
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

static目录 使用注意

  • 编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。
  • css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

Tips

  • HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

三、运行uni-app

1. 浏览器运行

进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。

image-20221012200308031

2. 运行App到手机或模拟器

使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。

image-20221012200359605

3. 在微信开发者工具里运行

进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

image-20221012200437511

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

image-20221012200500652

注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。

image-20221012200517918

四、 .vue文件按照vue写法还是小程序写法

在hbuilderX软件中的.vue文件可以当作纯vue文件使用，可以使用div、span、h1等标签，但是这些效果在h5页面中可以看到(即浏览器可以看到加粗等效果)，但如果运行到小程序中，h2的加粗效果就没有了！所以，我们要在.vue文件中使用<view>标签，各个平台都可以识别它，所以，我们写的时候按照小程序的写法来写，这样运行在微信开发者工具中才没有效果差别。

五、pages.json页面配置

  • pages数组中第一项表示应用启动页
  • 页面配置权重高于全局配置

uniapp.dcloud.net.cn/collocation…

六、uniapp封装的api-uniapi

普通请求

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

异步请求时也可以用async await

async onLoad(){
    //对结果进行解构[第一个参数是错误信息，第二个参数是数据返回值]
    const [err,res] = await uni.request({
        url:'请求地址'
    });
    if(err){
        //显示消息提示框
        uni.showToast({
            title:'出错了',
            icon:'none'
        })
    }else{
        uni.showToast({
            title:'请求成功',
        })
        console.log(res)
    }
}

七、uniapp生命周期

uniapp中，生命周期分为三大类：

1.应用生命周期 仅在App.vue中监听

截屏2022-09-01 上午11.40.40.png

2.页面生命周期(在页面中添加)

函数名说明平台差异说明最低版本
onInit监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad百度小程序3.1.0+
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序、快手小程序
onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll监听页面滚动，参数为Objectnvue暂不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为ObjectApp、H5
onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H51.6.0
onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序2.8.1+

3.组件生命周期（我认为是自定义组件的生命周期，与vue标准组件的生命周期相同）

截屏2022-09-01 上午11.55.05.png 五、响应式单位 rpx

相对长度单位，功能类似于web端的rem和vw，小程序首先退出，uniapp也是直接支持。一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。

其中uniapp做了以下设置，

1.默认的设计稿宽度为375px，因此存在 1px = 2rpx

2.默认rpx支持最大宽度为960px，超出则按照设计稿宽度375px来设置

六、uniapp不需要添加scoped

1.vue开发的h5，单页面应用程序，每一个vue文件如果使用class，多个文件的样式冲突

2.微信小程序是真正的多页面应用程序，物理隔离，页面中使用class，不会相互影响

3.uniapp做了一个设置，写vue代码，不需要主动加上 scoped，打包成h5端的时候自动添加上去，打包成微信小程序端不需要添加 scoped

avatar
文章
阅读
粉丝