Web前端编程基础，uni-app入门学习，2024年是意义非凡的一年

最新推荐文章于 2024-08-22 11:53:20 发布

还记得儿时吗

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量329

点赞数 3

分类专栏： 2024年程序员学习文章标签：前端 uni-app 学习

本文链接：https://blog.csdn.net/m0_62289824/article/details/137456141

版权

2024年程序员学习专栏收录该内容

266 篇文章 0 订阅

订阅专栏

8.下拉刷新

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

杭州学科

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{

“path”:“pages/list/list”,

“style”:{

“enablePullDownRefresh”: true

}

通过API开启

api文档

uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {

data () {

return {

arr: [‘前端’,‘java’,‘ui’,‘大数据’]

}

methods: {

startPull () {

uni.startPullDownRefresh()

}

onPullDownRefresh () {

console.log(‘触发下拉刷新了’)

}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<button type=“primary” @click=“startPull”>开启下拉刷新

杭州学科

9.上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

<button type=“primary” @click=“startPull”>开启下拉刷新

杭州学科

10.网络请求

搭建后端

软件phpStudy
安装

\heima_shop_server 在这里 npm i node .\src\app.js
timers.active() is deprecated. Please use timeout.refresh() instead.
timers.unenroll() is deprecated. Please use clearTimeout instead.
以上两个报错不影响使用
mysql://root:root@127.0.0.1:3306/dtcmsdb4 冒号后是数据库密码

网络请求

在uni中可以调用uni.request方法进行请求网络请求
需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

<button @click=“sendGet”>发送请求

发送post请求

11.数据缓存

uni.setStorage

官方文档

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码演示

<button type=“primary” @click=“setStor”>存储数据

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

代码演示

<button type=“primary” @click=“setStor”>存储数据

uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

代码演示

<button type=“primary” @click=“getStorage”>获取数据

uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<button type=“primary” @click=“getStorage”>获取数据

uni.removeStorage

从本地缓存中异步移除指定 key。

代码演示

<button type=“primary” @click=“removeStorage”>删除数据

uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<button type=“primary” @click=“removeStorage”>删除数据

12.上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

<button @click=“chooseImg” type=“primary”>上传图片

预览图片

结构

预览图片的方法

previewImg (current) {

uni.previewImage({

urls: this.imgArr,

current

})

}

13.条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 加平台标识开头，以 #endif 结尾。

平台标识

| 值 | 平台 | 参考文档 |

| — | — | — |

| APP-PLUS | 5+App | HTML5+ 规范 |

| H5 | H5 | |

| MP-WEIXIN | 微信小程序 | 微信小程序 |

| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |

| MP-BAIDU | 百度小程序 | 百度小程序 |

| MP-TOUTIAO | 头条小程序 | 头条小程序 |

| MP-QQ | QQ小程序 | （目前仅cli版支持） |

| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 | |

1)组件的条件注释

代码演示

h5页面会显示

微信小程序会显示

app会显示

2)api的条件注释

代码演示

onLoad () {

//#ifdef MP-WEIXIN

console.log(‘微信小程序’)

//#endif

//#ifdef H5

console.log(‘h5页面’)

//#endif

}

3)样式的条件注释

代码演示

/* #ifdef H5 */

view{

height: 100px;

line-height: 100px;

background: red;

}

/* #endif */

/* #ifdef MP-WEIXIN */

view{

height: 100px;

line-height: 100px;

background: green;

}

/* #endif */

14.uni中的导航跳转

1)利用navigator进行跳转

navigator详细文档：文档地址

跳转到普通页面

跳转到关于页面

跳转到tabbar页面

跳转到message页面

open-type=“redirect” 使用这个属性不能返回了

2)利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type=“primary” @click=“goAbout”>跳转到关于页面

通过navigateTo方法进行跳转到普通页面

goAbout () {

uni.navigateTo({

url: ‘/pages/about/about’,

})

}

通过switchTab跳转到tabbar页面

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

跳转到tabbar页面

<button type=“primary” @click=“goMessage”>跳转到message页面

通过switchTab方法进行跳转

goMessage () {

uni.switchTab({

url: ‘/pages/message/message’

})

}

redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<button type=“primary” @click=“goMessage”>跳转到message页面

goMessage () {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些前端面试题以及学习路线给大家

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

的某个页面。**

<button type=“primary” @click=“goMessage”>跳转到message页面

goMessage () {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-ZZXHXssF-1712458497661)]
[外链图片转存中…(img-WmtGcTBK-1712458497661)]
[外链图片转存中…(img-FjNRVUfZ-1712458497662)]
[外链图片转存中…(img-ZH15CeWC-1712458497662)]
[外链图片转存中…(img-QxgRELFl-1712458497662)]
[外链图片转存中…(img-jOvePOfJ-1712458497663)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-XoDCiFhp-1712458497663)]