[TOC] ### 设计图尺寸(推荐750px) 单位方面,px无法动态适应不同宽度的屏幕,rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位,推荐使用rpx,全端支持。 1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在`uni-app`里面的宽度应该设为:`750 * 100 / 750`,结果为:100rpx。 3. 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在`uni-app`里面的宽度应该设为:`750 * 200 / 375`或(2*200),结果为:400rpx。 ### 设置 page 的背景颜色 ``` <style> page { background-color: #f9f9f9 height: 100%; } </style> <style lang="scss" scoped> </style> ``` 若应用 colorui 则可在 `colorui/main.css`body 中更改颜色 ### 绝对路径 vue的绝对路径`/pages/xxx/xxx` ``` <image class="logo" src="/static/logo.png"></image> // @开头的绝对路径以及相对路径会经过base64转换规则校验 <image class="logo" src="@/static/logo.png"></image> //js 引入 import add from '@/common/add.js' //css 文件 @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 绝对路径 */ background-image: url(/static/logo.png); background-image: url(@/static/logo.png); background-image: url('~@/static/logo.png'); //推荐 ~@ ``` ### 小程序背景图片正常显示 通导入的方式 ``` <template> <view class="index" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}"> <!--你的内容--> </view> </template> <script> import indexBackgroundImage from "@/static/img/account_index.jpg" export default { data() { return { indexBackgroundImage:indexBackgroundImage } }, } </script> ``` ### 设置 scss/less/stylus 样式 `工具->插件安装->scss` ### 生命周期 ``` 建议使用 uni-app 的 onReady代替 vue 的 mounted。 建议使用 uni-app 的 onLoad 代替 vue 的 created ``` ### 组件/标签的变化 uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator ``` div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在,但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picker iframe 改成 web-view ul、li没有了,都用view替代 audio 不再推荐使用,改成api方式,背景音频api文档 ``` > 其实老的HTML标签也可以在uni-app里使用,uni-app编译器会在编译时把老标签转为新标签,比如把div编译成view。但不推荐这种用法,调试H5端时容易混乱。 ### 手机端常用的新组件 ``` scroll-view 可区域滚动视图容器 swiper 可滑动区域视图容器 icon 图标 rich-text 富文本(不可执行js,但可渲染各种文字格式和图片) progress 进度条 slider 滑块指示器 switch 开关选择器 camera 相机 live-player 直播 map 地图 cover-view 可覆盖原生组件的视图容器 cover-view需要多强调几句,uni-app的非h5端的video、map、canvas、textarea是原生组件,层级高于其他组件。如需覆盖原生组件,比如在map上加个遮罩,则需要使用cover-view组件 ``` ### js 变化 **运行环境从浏览器变成v8引擎** 标准js语法和api都支持,比如if、for、settimeout、indexOf等 因为uni-app的api是参考小程序的,所以和浏览器的js api有很多不同,如 ``` alert,confirm 改成 uni.showmodel ajax 改成 uni.request cookie、session 没有了,local.storage 改成 uni.storage ``` uni-app的js api还有很多,但基本就是小程序的api,把wx.xxx改为uni.xxx即可。 ### `<template/>` 和 `<block/>` `<template/>`和`<block/>`并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性 ``` <block v-for="(item,index) in list" :key="index"> <view>{{item}} - {{index}}</view> </block> ``` ### css的变化 #### 设置页面的背景 ``` page { background-color: red; } ``` * 选择器不支持; ### NPM支持 ``` npm init -y npm install packageName --save import package from 'packageName' const package = require('packageName') ``` ### 底部导航栏设置 page.json ``` "tabBar": { "color": "#7A7E83", "selectedColor": "#000000", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/home.png", "selectedIconPath": "static/home_selected.png", "text": "首页" }, { "pagePath": "pages/category/category", "iconPath": "static/fl.png", "selectedIconPath": "static/fl_selected.png", "text": "分类" }, { "pagePath": "pages/user/user", "iconPath": "static/my.png", "selectedIconPath": "static/my_selected.png", "text": "我的" } ] } ``` ### js export 导出模块 方式一 ``` //判断登陆设备 //#ifdef APP-PLUS var device_type = 'mobile' //#endif //#ifdef MP var device_type = 'wxapp' //#endif var host = "https://hrai.online"; var socketUrl = "wss://hrai.online:39005/"; module.exports = { socketUrl:socketUrl, HOST: host, API_ROOT: host + '/api/', DeviceType: device_type, post(options) { this.request(options); }, delete(options) { options.method = 'DELETE'; this.request(options); }, }; ``` 方式二: ``` function demo(){ echo "hello world" } export { demo } ```