黑马-uni-app

大马小马 發表於 2022-8-1 08:52:00

####uni-app的基本使用
参考视屏：03-项目目录和开发规范简单介绍_哔哩哔哩_bilibili
笔记：2022.08.01~2022.08.10
1.~~~Uni-App从入门到实战-黑马程序员杭州校区出品 视屏地址：https://www.bilibili.com/video/BV1BJ411W7pX?p=1&vd_source=d0acf1b50d58a251fbd395d941b1268c 2.~~~配置环境； hbuilderx和微型小程序开发 2.1 熟悉开发操作; 在hbuilder中出创建一个uni-app项目; 3.~~~基础介绍； 3.1 介绍项目目录和文件作用； `pages.json` 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
`manifest.json` 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
`App.vue`是我们的跟组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
`main.js`是我们的项目入口文件，主要作用是初始化`vue`实例并使用需要的插件。
`uni.scss`文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批scss变量预置。
```unpackage``` 就是打包目录，在这里有各个平台的打包文件
```pages``` 所有的页面存放目录
```static``` 静态资源目录，例如图片等
```components``` 组件存放目录 3.2 设置pages.json中的globalStyle属性(全局配置样式); eg： "globalStyle": { "navigationBarTextStyle": "black",//导航栏标题颜色及状态栏前景颜色，仅支持 black/white "navigationBarTitleText": "uni-app",//导航栏标题文字内容 "navigationBarBackgroundColor": "#55ff00",//导航栏背景颜色（同状态栏背景色） "backgroundColor": "#ffaaff",//窗口的背景色 "enablePullDownRefresh": true,//是否开启下拉刷新，详 "backgroundTextStyle": "light"//下拉 loading 的样式，仅支持 dark / light }, 3.3 创建一个新的页面; 3.3.1 在pages文件夹中创建一个新的文件夹(名为message),还得在该新文件夹中创建一个vue文件; 3.3.2 然后得在pages.json中的pages数组中写一个对象，配置其的path（路径）和style(样式); 3.3.3 放在最前面的对象，就会被当作是首页展示; 3.4 tabbar; 就是小程序下面的tab栏； 3.4.1 tabbar有一个list属性，在里面可以配置一个个对象为tab选项，在对象里面得配置text,pagePath,iconPath,selectedIconPath等属性; 3.4.2 eg: "tabBar": { "list": [ {"text": "首页", "pagePath": "pages/index/index", "iconPath": "static/tabs/home.png", "selectedIconPath": "static/tabs/home-active.png"}//可以多个 ] } 3.4.3 tabBar的一级属性还有： "color": "#a0033a",//默认颜色 "selectedColor": "#B3EE3A", //被选中颜色; "backgroundColor": "#e6ded9",//背景色; "borderStyle": "black",//边框色; "position": "top",//tab位置,只适合用在微信小程序上 3.5 condition; 是整个pages.json文件的二级属性，因为是json，所以最外层整体是一个对象； 启动模式配置; 仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。 (eg：广告) 3.5.1 配置： eg："condition": { "current": 0, "list": [ {" name": "详情页", "path": "pages/detail/detail", "query": "id = 80"} ] } 4.~~~uni-app组件的基本使用; 4.1 text组件; 4.1.1 有selectable,space属性； selectable 表示是否可以选中； space 表示的是如何编译空格;（ensp(两个空格算一个字符),emsp(一个空格一个字符),nbsp(一处空格一个字符)）; 4.1.2 eg：<text selectable space="emsp">唱歌 跳舞打篮球</text> 4.1.3 写于view中的东西自成一个块元素; 4.2 view组件； 类似html中的div使用; 4.2.1 hover-class//按下跳转样式事件; 4.2.2 hover-stop-propagation//停掉当前对象事件冒泡到别处; 4.2.3 :hover-start-time="2000" //延时事件执行； 4.2.4 :hover-stay-time='2000' //延时事件保留时长; 4.2.5 eg： <view class="box2" hover-class="box2_active"> <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
</view> </view> 4.3 button组件; 4.3.1 行内属性： size(按钮的大小)， type(按钮的样式类型)， plain(按钮是否镂空，背景色透明 )， disabled(是否为可用按钮)， loading(名称是否带 loading t图标)； eg： <button size='mini' type='primary'>前端</button> <button size='mini' type='default' disabled='true'>前端</button> <button size='mini' type='warn' loading='true'>前端</button> 4.4 媒体组件：image; 4.4.1 行内属性：src(图片资源地址 )，mode(图片裁剪、缩放的模式) <image>` 组件默认宽度 300px、高度 225px； 4.4.2 eg： <image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image> //aspectFit是保留长边，也就是图片完全显示； aspectFill为显示原有整体比例,会被截取； 4.5 uni-app中的样式； 4.5.1 rpx的使用（响应式单位）; 一种根据屏幕宽度自适应的动态单位； eg：.box1{ width: 375rpx; height: 375rpx; background: #0000ff; font-size: 30rpx; color: #fff; } 4.5.2 @import的使用; 先创建一个css文件，再在vue文件中的style中引入； eg：@import url(a.css); 4.5.3 uni-app的一些默认点； 网页中的page就相当于html的body； 支持基本常用的选择器class、id、element等； 全局，局部样式：定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器； 4.5.4 导入图标; 4.5.4.1字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。 必须将iconfont.css中的引用路径都改成以~@开头的绝对路径; 然后再在App.vue中引入@import url("./static/fonts/iconfont.css"); 然后再在作用域中使用eg：<view class="iconfont icon-tupian"></view> 4.5.6 结合scss，less的使用； 5.~~~ uni-app数据绑定; 在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可； 用法就是跟vue语法相同; 5.1 插值表达式； eg： export default { data () { return { msg: 'hello-uni' } } } 使用：<view>{{msg}}</view> 5.2 v-bind语法； eg：先在data中定义img为一张图片的路径； <image v-bind:src="img"></image> 或者：<image :src="img"></image> 5.3 v-for语法； 标识符：key; v-for="(item,index) in arr" 5.4 事件； 跟vue一样的写法; 5.4.1 有传参时候; 则当前的事件对象的在传参中写出； eg：<button @click="tapHandle(1,$event)">点我啊</button> tapHandle (num,e) { console.log(num,e) } 5.4.2 无传参时候; 默认就自带一个参数，就是事件对象； eg： <button @click="tapHandle">点我啊</button> tapHandle (e) { console.log(e) } 6.~~~ uni的生命周期; 生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。 6.1 应用的生命周期函数； //因为是应用的，即全局的,所以写于App.vue文件中;（四个） onLaunch: function() {//初始化完成时触发（全局只触发一次） console.log('App Launch') }, onShow: function() {//启动，或从后台进入前台显示 console.log('App Show') }, onHide: function() {//从前台进入后台 console.log('App Hide') }, onError:function(err){//报错时触发 console.log("出错了",err) } 6.2 页面的生命周期函数； //常用的共有5个,可写于每个vue文件当中; onLoad(options) { //监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） console.log("页面加载了;",options) }, onShow() { //监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 console.log("页面显示了") }, onReady(){ //监听页面初次渲染完成 console.log('页面初次渲染完成') }, onHide(){ //监听页面隐藏 console.log('页面隐藏了') }, onUnload(){};//暂时不用;用于监听页面卸载； 6.2.1 监听下拉刷新页面生命周期函数; onPullDownRefresh(){}; 6.2.2 关闭下拉刷新动画; uni.stopPullDownRefresh() 6.2.3 调用下拉刷新功能； uni.startPullDownRefresh()； 6.2.4 监听上拉拉刷新页面生命周期函数; onReachBottom(){console.log('触底了')}; //通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px 7.~~~#### 网络请求; 对于服务器的配置还不是很熟悉; 7.1 **发送get请求** uni.request({}); 主要配置到的两个属性; url: 'http://localhost:8082/api/getlunbo',//这个得先在本地开启服务器; success(res){console.log(res)}//成功回调函数; 8.~~~ 数据缓存 **发送post请求** 将数据临时存储到本地，而不是数据库中; 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 8.1 set,get,remove; 8.1.1 uni.setStorage({});//将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 eg： uni.setStorage({ key: 'id', data: 100, success () { console.log('存储成功') } }) 8.1.2 uni.setStorageSync({});//将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 eg：uni.setStorageSync('id',100) 8.1.3 uni.getStorage({});//从本地缓存中异步获取指定 key 对应的内容。 eg: uni.getStorage({ key: 'id', success:res=>{ console.log('获取成功',res,res.data) this.id = res.data } }) 8.1.4 uni.getStorageSync({});//从本地缓存中同步获取指定 key 对应的内容。 eg: getStorage () { const id = uni.getStorageSync('id') console.log(id) } 8.1.5 uni.removeStorage({});//从本地缓存中异步移除指定 key。 eg: uni.removeStorage({ key: 'id', success: function () { console.log('删除成功') } }) 8.1.6 uni.removeStorageSync({}); //从本地缓存中同步移除指定 key。 eg： removeStorage () { uni.removeStorageSync('id') } 9.~~~ 上传图片，且预览; 9.1 选择图片： uni.chooseImage({})； eg： uni.chooseImage({ count:5,//限制上传数目 success:(res)=>{//成功回调函数; console.log(res) this.imgArr = res.tempFilePaths//将图片链接数组带回本地数据; } }) 9.2 预览图片： uni.previewImage({}） eg： previewImg(current){ uni.previewImage({ urls: this.imgArr,//图片链接数组; current//指定预览图片链接； }) } 10.~~~ 条件注释实现跨端兼容; 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。 即各色各样的平台，各色各样的画面; 10.1 **写法：**以 #ifdef 加平台标识开头，以 #endif 结尾。 10.1.1 eg：网页元素：  <view> h5页面会显示 </view>   <view> 微信小程序会显示 </view>  10.1.2 eg：api、js代码中元素： onLoad () { //#ifdef MP-WEIXIN console.log('微信小程序') //#endif //#ifdef H5 console.log('h5页面') //#endif } 10.1.3 eg：样式的条件注释 ```css``` /* #ifdef H5 */ view{ height: 100px; line-height: 100px; background: red; } /* #endif */ /* #ifdef MP-WEIXIN */ view{ height: 100px; line-height: 100px; background: green; } /* #endif */ 11.~~~ uni中的导航跳转; 11.1 声明式导航； 写法： navigator标签，且里面要写好url属性和值，然后如果要跳转到tab页面的话，还得加个open-type="switchTab"； //open-type还有其他属性值de 用法; 11.2 编程式导航： 调用api方法; 写法： 直接跳转 uni.navigateTo({ url:"/pages/detail/detail" }) 销毁其他非tab页面； uni.switchTab({//跳转到tab页得这样写； url: '/pages/message/message' }) 11.3 传参； 11.3.1 调用onLoad(){}//加载完成生命周期函数; 在定义跳转方向中的vue文件中定义：goAbout () { uni.navigateTo({ url: '/pages/about/about?id=80', }); } 在被跳转到的vue文件中写onLoad生命周期函数： eg：onLoad (options) { console.log(options) }//输出传过来的参数对象; 12.~~~ uni-app中组件的创建; 12.1 创建和使用，还有生命周期函数这些，都和vue里的组件使用差不多; 13.~~~ 组件通讯; 13.1 父传子； 直接在组件标签中定义动态绑定属性，然后再在组件中的props配置项中接收,然后以接收的名字来使用; eg： <test :msg="msg"></test> ----------------------------------- <script> export default { props: ['msg'] } </script> ------------------------------- <view> 这是一个自定义组件 {{msg}} </view> 13.2 子传父； 用到自定义事件，$emit; 现在子组件设置方法触发this.$emit方法，来回调父组件中的自定义事件，且传值；然后在自定义事件所触发的方法里面操作子传父数据； eg： 子：这是一个自定义组件<button type="primary" @click="sendMsg">给父组件传值</button> 方法： sendMsg () { this.$emit('myEvent',this.status) } 父： <view> <test :msg="msg" @myEvent="getMsg"></test> </view> methods: { getMsg (res) { console.log(res) } }, 13.3 兄弟组件之间传值; 13.3.1在被修改数据的组件中先定义好一个自定义事件; eg： created(){//写于生命周期当中; uni.$on("updateNum",num =>{this.num+=num}) } 13.3.2 在触发组件当中来触发此事件： addNum(){ uni.$emit("updateNum",10);//且传参数; } 就类似vue的全局总线用法; 14.~~~ uni-ui 的使用; 14.1 先去插件库中下载到hbuildx里面,然后再结合操作文档来写； 15.~~~ 项目实战，即实操; 15.1 获取轮播图的数据； 15.2 对uni.request进行二次封装，就像封装axios一样;用到了promise,async,await; 具体看代码; eg： const BASE_URL = 'http://localhost:8082' export const myRequest = (options) => { return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, success: (res) => { if (res.data.status !== 0) { return uni.showToast({ title: '获取数据失败' }) } resolve(res) }, fail: (err) => { uni.showToast({ title: '请求接口失败' }) reject(err) } }) }) } 15.3 uni轮播图的制作; 15.3.1 用到了swiper标签，及其属性; 15.4 导航栏的基本制作; 15.4.1 用到了小图标 ~@/static/font//修改iconfont.css里面的路径; 15.5 完成商品推荐列表和导航栏； 15.6下拉刷新，上拉加载更多； 15.7 地图标签的使用; 15.8 scroll-view标签，可滚动的区域; 15.9 vue中过滤器配置项的使用，即格式化时间格式; filters:{ formatDate(date){ const nDate = new Date(date) const year = nDate.getFullYear() const month = nDate.getMonth().toString().padStart(2,0) const day = nDate.getDay().toString().padStart(2,0) return year +"-"+ month +"-"+ day } } 15.10 $emit.$on的使用; 15.11onLoad(options){}//options就是从另一个页面过来的形参; 15.12 rich-text富文本标签的使用;//能够解析里面HTML结构的代码; 15.13 uni-goods-nav组件的使用； 15.14 16.~~~ 进行打包处理： 16.1 小程序打包； 静态资源换成线上资源 16.2 进行上传给微信团队审核 16.3 h5打包； 16.4 安卓打包； 17.~~~ 
来源：https://www.cnblogs.com/ycheibi/p/16538922.html

頁: [1]

琼殿技术论坛's Archiver

黑马-uni-app