首页
关于
友情链接
留言
推荐
51学代码
资源导航
hexo 博客
Search
1
给网站添加51la统计实现ip访客数显示在网站底部
536 阅读
2
微信小程序开发
221 阅读
3
Ajax请求
164 阅读
4
给网站上方添加流动字幕
162 阅读
5
给网站设置联系客服QQ或者加入QQ群一键唤起
104 阅读
前端
JavaScript 基础
Vue
Vue3
Ajax
echars
canvas
uniapp
后端
Java
项目管理工具
git
微信小程序开发
登录
Search
标签搜索
Vue
Vue3
JavaScript
echars
uniapp
Ajax
svg
canvas
Jeff Dean
累计撰写
14
篇文章
累计收到
9
条评论
首页
栏目
前端
JavaScript 基础
Vue
Vue3
Ajax
echars
canvas
uniapp
后端
Java
项目管理工具
git
微信小程序开发
页面
关于
友情链接
留言
推荐
51学代码
资源导航
hexo 博客
: 欢迎来到51学代码,一个专注于编程技术分享、知识导航、IT技术学习的网站!本站旗下导航网
nav.51xcode.com
搜索到
14
篇与
的结果
2022-08-06
给网站设置联系客服QQ或者加入QQ群一键唤起
唤起加群链接的打开网站:https://qun.qq.com 点击加群组件复制代码即可。唤起QQ联系的网址:https://shang.qq.com 点击QQ接待配置即可。
2022年08月06日
104 阅读
0 评论
0 点赞
2022-05-29
给网站上方添加流动字幕
以typecho为例,在主题的public文件夹header.php中添加相关代码代码如下:// 1、来回滚动 <marquee behavior=" alternate "><font color=red>文字来回滚动 </marquee> // 2、设置滚动次数,这里已三次为例 <marquee loop=3 width=50% behavior=scroll>文字只走3趟 </marquee> // 3、设置滚动方向,left是文字自右向左移,right是文字自左向右移 <marquee direction=left>文字自右向左移</marquee> // 4、设置滚动频率 <marquee scrollamount=8> 文字很快滚。 </marquee> 以下是我的网站上方的字幕代码:<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()"> <strong> <img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/567c03c986180dcb04327a153927bd5c8a39ccf642a03cb40ebf40d2b1ded20c47be54641d27a0bfee9e5bd9d91cbf7e?pictype=scale&from=30113&version=3.3.3.3&uin=1823782755&fname=%E5%85%AC%E5%91%8A%20%281%29.png&size=750" width="23px" height="23px"> <font size="3"> : 欢迎来到51学代码,一个专注于编程技术分享、知识导航、IT技术学习的网站!本站旗下导航网 <a href="https://nav.51xcode.com" style="color:red">nav.51xcode.com</a> </font> </strong> </marquee> 2022-05-29 21:34:20 星期日
2022年05月29日
162 阅读
2 评论
0 点赞
2022-05-29
给网站添加51la统计实现ip访客数显示在网站底部
以typecho为例:安装typecho网站统计插件Typecho plugin for 51la Analysis V6 https://github.com/51la/51la-Analysis-Typecho-Plugin51la 网站统计 v6版 Typecho 插件介绍51LA网站统计 Typecho 版本插件,快速引入到您的网站或博客中,用于统计网站访客、来路、事件分析和搜索引擎蜘蛛分析等,插件直接引入,无需修改主题文件。安装必看Download ZIP, 解压,将 51la-Analysis-Typecho-Plugin 重命名为 LaAnalysis ,之后上传到你博客中的 /usr/plugins 目录,在后台启用并填入对应 MaskID 即可。登录51la官网注册申请网站项目,填写相关信息,并将生成的统计代码放到你的网站相关js文件中,点击安装检测代码是否安装正确,一般需要5分钟左右生效,(以Typecho为例)将51la生成的统计代码,放在typecho 相关位置,我放在了自定义js中。在/www/wwwroot/51xcode.com/usr/themes/Joe-master/public footer.php 添加51la生成的数据挂件代码,以下是我生成的代码,你需要自己生成。<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/JhExU3izZh3EN5Vq/quote.js?theme=0&f=12&display=0,1,1,1,1,1,1,1"></script>统计实时在线人数代码如下:在functions.php中上方添加了//在线人数 function online_users() { $filename='online.txt'; //数据文件 $cookiename='Nanlon_OnLineCount'; //Cookie名称 $onlinetime=30; //在线有效时间 $online=file($filename); $nowtime=$_SERVER['REQUEST_TIME']; $nowonline=array(); foreach($online as $line){ $row=explode('|',$line); $sesstime=trim($row[1]); if(($nowtime - $sesstime)<=$onlinetime){ $nowonline[$row[0]]=$sesstime; } } if(isset($_COOKIE[$cookiename])){ $uid=$_COOKIE[$cookiename]; }else{ $vid=0; do{ $vid++; $uid='U'.$vid; }while(array_key_exists($uid,$nowonline)); setcookie($cookiename,$uid); } $nowonline[$uid]=$nowtime; $total_online=count($nowonline); if($fp=@fopen($filename,'w')){ if(flock($fp,LOCK_EX)){ rewind($fp); foreach($nowonline as $fuid=>$ftime){ $fline=$fuid.'|'.$ftime."\n"; @fputs($fp,$fline); } flock($fp,LOCK_UN); fclose($fp); } } echo "$total_online"; } 并在/www/wwwroot/51xcode.com/usr/themes/Joe-master/public footer.php 大概第9行 添加如下代码: 当前在线 <?php echo online_users() ?> 人
2022年05月29日
536 阅读
2 评论
0 点赞
2022-05-27
微信小程序开发
1. 课程介绍 本次课程分为两个部分。1.1. 微信小程序基础 主要讲解微信小程序的基础使用以及相关概念知识1.2. bilibili微信小程序 一个基于小程序的bilibili应用,加深对微信小程序基础知识的了解。2. 小程序介绍微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。Web App就是一种通过H5页面技术实现的,和Native App的功能和界面几乎一样的手机App形态。很多商家和企业为了节省技术人员和资金的投入,都会选择使用Web App制作工具,免费快速制作自己的Web App。截止2018年3月,微信小程序用户规模突破4亿,小游戏类微信小程序占比达28%。2.1. 微信小程序的优势 很多人做微信公众号,而非App,因为App推广成本太高。这导致公众号现在更像是媒体化的平台。微信的本意是要提供服务,所以推出了服务号,但是服务号也没达到预期。微信小程序的优势: 一是微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户; 二是推广app 或公众号的成本太高。 三是开发适配成本低。 四是容易小规模试错,然后快速迭代。 五是跨平台。 事实上,应用号并非微信首创,之前百度推出过应用号,搜狐推出过快站,但腾讯将这件事情做成功的概率却是最大2.2. 微信小程序对于创业者的优势 1、APP流量成本的急剧攀升 2、移动互联网格局基本已定,用户主要需求场景已被巨头把持 3、面向所有产品对用户时间的竞争2.3. 体验查看小程序示例源码3. 开发环境的准备3.1. 注册账号访问注册页面,耐心完成注册即可。3.2. 获取APPID由于后期调用微信小程序的接口等功能,需要索取开发者的小程序中的APPID,所以在注册成功后,可登录,然后获取APPID。登录,成功后可看到如下界面然后复制你的APPID,悄悄的保存起来,不要给别人看到😄。3.3. 开发工具严格来说,微信小程序支持所有的开发工具,但是从效率和便利性来说,推荐如下vs code 下载地址微信自己的微信小程序开发工具 下载地址4. 我的第一个微信小程序下面开始演示如何创建我的第一个微信小程序4.1. 安装微信小程序开发者工具下载好微信小程序开发者工具后,直接双击安装,一直点击下一步即可。 安装好后,界面如下4.2. 选择小程序项目4.3. 新建项目4.4. 创建项目4.5. 成功5. 微信开发工具深入介绍工具介绍6. 小程序结构目录小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。官网6.1. 小程序文件结构和传统web对比结构传统web微信小程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置无JSON通过以上对比得出,传统web 是三层结构。而微信小程序 是四层结构,多了一层 配置.json6.2. 基本的项目目录7. 配置介绍一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json注意:配置文件中不能出现注释7.1. 全局配置app.jsonapp.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }字段的含义pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。完整的配置信息请参考 app.json配置7.2. page.json这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / whitenavigationBarTitleTextString 导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新。 详见 Page.onPullDownRefreshonReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottomdisableScrollBooleanfalse设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项8. 视图层WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。8.1. 数据绑定8.1.1. 普通写法<view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' } })8.1.2. 组件属性<view id="item-{{id}}"> </view>Page({ data: { id: 0 } })8.1.3. bool类型不要直接写 checked="false",其计算结果是一个字符串<checkbox checked="{{false}}"> </checkbox>8.2. 运算8.2.1. 三元运算<view hidden="{{flag ? true : false}}"> Hidden </view>8.2.2. 算数运算<view> {{a + b}} + {{c}} + d </view>Page({ data: { a: 1, b: 2, c: 3 } }) 8.2.3. 逻辑判断<view wx:if="{{length > 5}}"> </view> 8.2.4. 字符串运算<view>{{"hello" + name}}</view> Page({ data:{ name: 'MINA' } }) 8.2.5. 注意花括号和引号之间如果有空格,将最终被解析成为字符串8.3. 列表渲染8.3.1. wx:for项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 8.3.2. wx:for渲染一个包含多节点的结构块 block最终不会变成真正的dom元素<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block> 8.3.3. wx:key提高效率使用的8.4. 条件渲染8.4.1. wx:if在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> True </view> 8.4.2. hidden<view hidden="{{condition}}"> True </view> 类似 wx:if 频繁切换 用 hidden不常使用 用 wx:if9. WXSSWXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。与 CSS 相比,WXSS 扩展的特性有:尺寸单位样式导入9.1. 尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。9.2. 样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例代码:/** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } 9.3. 内联样式框架组件上支持使用 style、class 属性来控制组件的样式。style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。<view style="color:{{color}};" /> class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。<view class="normal_view" /> 9.4. 选择器目前支持的选择器有:选择器样例样例描述.class.intro选择所有拥有 class="intro" 的组件#id#firstname选择拥有 id="firstname" 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容9.5. 全局样式与局部样式定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。10. 基本组件小程序提供了常用的标签组件用于构建页面组件10.1. view类似 div属性名类型默认值说明hover-classStringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果10.1.1. 代码 <view hover-class="h-class"> 点击我试试 </view> <!-- wxss --> .h-class{ background-color: yellow; } 10.2. text显示普通的文本 text只能嵌套text属性名类型默认值说明selectableBooleanfalse文本是否可选decodeBooleanfalse是否解码10.2.1. 代码 <text selectable="{{false}}" decode="{{false}}"> 普 通 </text> 10.3. image图片标签,image组件默认宽度320px、高度240px注意:该标签 其实是 web中的 图片标签 和 背景图片的结合!!! 并且不支持以前的web中的背景图片的写法!!! 属性名类型默认值说明srcString 图片资源地址,支持云文件ID(2.2.3起)modeString'scaleToFill'图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效mode 有效值:mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。模式值说明缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素缩放aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。缩放aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变裁剪top不缩放图片,只显示图片的顶部区域裁剪bottom不缩放图片,只显示图片的底部区域裁剪center不缩放图片,只显示图片的中间区域裁剪left不缩放图片,只显示图片的左边区域裁剪right不缩放图片,只显示图片的右边区域裁剪top left不缩放图片,只显示图片的左上边区域裁剪top right不缩放图片,只显示图片的右上边区域裁剪bottom left不缩放图片,只显示图片的左下边区域裁剪bottom right不缩放图片,只显示图片的右下边区域10.4. swiper微信内置有轮播图组件默认宽度 100% 高度 150px属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色autoplayBooleanfalse是否自动切换intervalNumber5000自动切换时间间隔circularBooleanfalse是否采用衔接滑动10.4.1. swiper滑块视图容器。10.4.2. swiper-item滑块默认宽度和高度都是100%10.5. navigator导航组件 类似超链接标签属性名类型默认值说明targetStringself在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgramurlString 当前小程序内的跳转链接open-typeStringnavigate跳转方式open-type 有效值:值说明navigate保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面redirect关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面。switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面reLaunch关闭所有页面,打开到应用内的某个页面navigateBack关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层exit退出小程序,target="miniProgram"时生效10.6. video视频。该组件是原生组件,使用时请注意相关限制。属性名类型默认值说明srcString 要播放视频的资源地址,支持云文件ID(2.2.3起)durationNumber 指定视频时长controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)autoplayBooleanfalse是否自动播放loopBooleanfalse是否循环播放mutedBooleanfalse是否静音播放<video src="{{src}}" controls></video> 11. 自定义组件小程序允许我们使用自定义组件的方式来构建页面。自定义组件11.1. 创建自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成11.1.1. 声明组件首先需要在 json 文件中进行自定义组件声明{ "component": true} 11.1.2. 编辑组件同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。<!-- 这是自定义组件的内部WXML结构 --><view class="inner"> {{innerText}} <slot></slot></view> /* 这里的样式只应用于这个自定义组件 */.inner { color: red;} 11.1.3. 注册组件在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法Component({ properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 customMethod: function(){} }}) 11.2. 使用自定义组件首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径{ // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "component-tag-name": "path/to/the/custom/component" }} 下面是项目介绍1.bilibili项目介绍通过原生的微信小程序来实现一个 bilibili 应用,来体验原生小程序魅力。2. 技术铺垫html 和 css 和 JavaScript 基本功部分 es6微信小程序基础3. 关键技术名称链接备注微信小程序开发文档官方文档4. 成果5. 接口地址公共路径:https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili接口名称接口路径备注首页导航/navList 首页轮播图/swiperList 视频列表/videosList 视频详情/videoDetail?id需要带上视频的id推荐视频/othersList?id需要带上视频的id评论列表/commentsList?id需要带上视频的id免责声明:此笔记来自黑马程序员微信小程序开发笔记,放在这里主要是方便学习使用。获取项目源码课程视频关注微信公众号“51学代码”,回复:【微信小程序】可获得欢迎关注本站微信公众号“51学代码”
2022年05月27日
221 阅读
1 评论
0 点赞
2022-05-27
uniapp简介
基础部分:环境搭建页面外观配置数据绑定uni-app的生命周期组件的使用uni-app中样式学习在uni-app中使用字体图标和开启scss条件注释跨端兼容uni中的事件导航跳转组件创建和通讯,及组件的生命周期uni-app中使用uni-ui库uni-app介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验,可快速上手uni-app为什么要去学习uni-app?相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。环境搭建安装编辑器HbuilderX 下载地址HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。下载App开发版,可开箱即用安装微信开发者工具 下载地址利用HbuilderX初始化项目点击HbuilderX菜单栏文件>项目>新建选择uni-app,填写项目名称,项目创建的目录运行项目在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功微信开发者工具在设置中安全设置,服务端口开启介绍项目目录和文件作用pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。App.vue是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。unpackage 就是打包目录,在这里有各个平台的打包文件pages 所有的页面存放目录static 静态资源目录,例如图片等components 组件存放目录为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范,详见uni-app 组件规范接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期为兼容多端运行,建议使用flex布局进行开发全局配置和页面配置通过globalStyle进行全局配置用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/whitenavigationBarTitleTextString 导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / lightenablePullDownRefreshBooleanfalse是否开启下拉刷新,详见页面生命周期。onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期创建新的message页面右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板<template> <view> 这是信息页面 </view> </template> <script> </script> <style> </style>通过pages来配置页面属性类型默认值描述pathString 配置页面路径styleObject 配置页面窗口表现,配置项参考 pageStylepages数组数组中第一项表示应用启动页"pages": [ 、 { "path":"pages/message/message" }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ]通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path":"pages/message/message", "style": { "navigationBarBackgroundColor": "#007AFF", "navigationBarTextStyle": "white", "enablePullDownRefresh": true, "disableScroll": true, "h5": { "pullToRefresh": { "color": "#007AFF" } } } } ]配置tabbar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。Tips当设置 position 为 top 时,将不会显示 icontabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。属性说明:属性类型必填默认值描述平台差异说明colorHexColor是 tab 上的文字默认颜色 selectedColorHexColor是 tab 上的文字选中时的颜色 backgroundColorHexColor是 tab 的背景色 borderStyleString否blacktabbar 上边框的颜色,仅支持 black/whiteApp 2.3.4+ 支持其他颜色值listArray是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab positionString否bottom可选值 bottom、toptop 值仅微信小程序支持其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:属性类型必填说明pagePathString是页面路径,必须在 pages 中先定义textString是tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标iconPathString否图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标selectedIconPathString否选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效案例代码:"tabBar": { "list": [ { "text": "首页", "pagePath":"pages/index/index", "iconPath":"static/tabs/home.png", "selectedIconPath":"static/tabs/home-active.png" }, { "text": "信息", "pagePath":"pages/message/message", "iconPath":"static/tabs/message.png", "selectedIconPath":"static/tabs/message-active.png" }, { "text": "我们", "pagePath":"pages/contact/contact", "iconPath":"static/tabs/contact.png", "selectedIconPath":"static/tabs/contact-active.png" } ] }condition启动模式配置启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。属性说明:属性类型是否必填描述currentNumber是当前激活的模式,list节点的索引值listArray是启动模式列表list说明:属性类型是否必填描述nameString是启动模式名称pathString是启动页面路径queryString否启动参数,可在页面的 onLoad 函数里获得组件的基本使用uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用uni-app中的组件,就像 HTML 中的 div 、p、span 等标签的作用一样,用于搭建页面的基础结构text文本组件的用法001 - text 组件的属性属性类型默认值必填说明selectablebooleanfalse否文本是否可选spacestring.否显示连续空格,可选参数:ensp、emsp、nbspdecodebooleanfalse否是否解码text 组件相当于行内标签、在同一行显示除了文本节点以外的其他节点都无法长按选中002 - 代码案例<view> <!-- 长按文本是否可选 --> <text selectable='true'>来了老弟</text> </view> <view> <!-- 显示连续空格的方式 --> <view> <text space='ensp'>来了 老弟</text> </view> <view> <text space='emsp'>来了 老弟</text> </view> <view> <text space='nbsp'>来了 老弟</text> </view> </view> <view> <text>skyblue</text> </view> <view> <!-- 是否解码 --> <text decode='true'> < > & '    </text> </view>view视图容器组件的用法View 视图容器, 类似于 HTML 中的 div001 - 组件的属性002 - 代码案例<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>button按钮组件的用法001 - 组件的属性属性名类型默认值说明sizeStringdefault按钮的大小typeStringdefault按钮的样式类型plainBooleanfalse按钮是否镂空,背景色透明disabledBooleanfalse是否按钮loadingBooleanfalse名称是否带 loading t图标button 组件默认独占一行,设置 size 为 mini 时可以在一行显示多个002 - 案例代码<button size='mini' type='primary'>前端</button> <button size='mini' type='default' disabled='true'>前端</button> <button size='mini' type='warn' loading='true'>前端</button>image组件的使用image图片。属性名类型默认值说明平台差异说明srcString 图片资源地址 modeString'scaleToFill'图片裁剪、缩放的模式 Tips<image> 组件默认宽度 300px、高度 225px;src 仅支持相对路径、绝对路径,支持 base64 码;页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。uni-app中的样式rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束支持基本常用的选择器class、id、element等在 uni-app 中不能使用 * 选择器。page 相当于 body 节点定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。 @font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); }如何使用scss或者lessuni-app中的数据绑定在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可export default { data () { return { msg: 'hello-uni' } } } 插值表达式的使用利用插值表达式渲染基本数据<view>{{msg}}</view> 在插值表达式中使用三元运算<view>{{ flag ? '我是真的':'我是假的' }}</view> 基本运算<view>{{1+1}}</view> v-bind动态绑定属性在data中定义了一张图片,我们希望把这张图片渲染到页面上export default { data () { return { img: 'http://destiny001.gitee.io/image/monkey_02.jpg' } } } 利用v-bind进行渲染<image v-bind:src="img"></image> 还可以缩写成:<image :src="img"></image> v-for的使用data中定以一个数组,最终将数组渲染到页面上data () { return { arr: [ { name: '刘能', age: 29 }, { name: '赵四', age: 39 }, { name: '宋小宝', age: 49 }, { name: '小沈阳', age: 59 } ] } } 利用v-for进行循环<view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view> uni中的事件事件绑定在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@<button @click="tapHandle">点我啊</button> 事件函数定义在methods中methods: { tapHandle () { console.log('真的点我了') } } 事件传参默认如果没有传递参数,事件函数第一个形参为事件对象// template <button @click="tapHandle">点我啊</button> // script methods: { tapHandle (e) { console.log(e) } } 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据// template <button @click="tapHandle(1)">点我啊</button> // script methods: { tapHandle (num) { console.log(num) } } 如果获取事件对象也想传递参数// template <button @click="tapHandle(1,$event)">点我啊</button> // script methods: { tapHandle (num,e) { console.log(num,e) } } uni的生命周期应用的生命周期生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数uni-app 支持如下应用生命周期函数:函数名说明onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni-app 启动,或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发页面的生命周期uni-app 支持如下页面生命周期函数:函数名说明平台差异说明最低版本onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例 onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 onReady监听页面初次渲染完成。 onHide监听页面隐藏 onUnload监听页面卸载 下拉刷新开启下拉刷新在uni-app中有两种方式开启下拉刷新需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh通过调用uni.startPullDownRefresh方法来开启下拉刷新通过配置文件开启创建list页面进行演示<template> <view> 杭州学科 <view v-for="(item,index) in arr" :key="index"> {{item}} </view> </view> </template> <script> export default { data () { return { arr: ['前端','java','ui','大数据'] } } } </script> <style> </style> 通过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()停止当前页面下拉刷新。案例演示<template> <view> <button type="primary" @click="startPull">开启下拉刷新</button> 杭州学科 <view v-for="(item,index) in arr" :key="index"> {{item}} </view> </view> </template> <script> export default { data () { return { arr: ['前端','java','ui','大数据'] } }, methods: { startPull () { uni.startPullDownRefresh() } }, onPullDownRefresh () { this.arr = [] setTimeout(()=> { this.arr = ['前端','java','ui','大数据'] uni.stopPullDownRefresh() }, 1000); } } </script> 上拉加载通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px通过onReachBottom监听到触底的行为<template> <view> <button type="primary" @click="startPull">开启下拉刷新</button> 杭州学科 <view v-for="(item,index) in arr" :key="index"> {{item}} </view> </view> </template> <script> export default { data () { return { arr: ['前端','java','ui','大数据','前端','java','ui','大数据'] } }, onReachBottom () { console.log('触底了') } } </script> <style> view{ height: 100px; line-height: 100px; } </style> 网络请求在uni中可以调用uni.request方法进行请求网络请求需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。发送get请求<template> <view> <button @click="sendGet">发送请求</button> </view> </template> <script> export default { methods: { sendGet () { uni.request({ url: 'http://localhost:8082/api/getlunbo', success(res) { console.log(res) } }) } } } </script> 发送post请求数据缓存uni.setStorage官方文档将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。代码演示<template> <view> <button type="primary" @click="setStor">存储数据</button> </view> </template> <script> export default { methods: { setStor () { uni.setStorage({ key: 'id', data: 100, success () { console.log('存储成功') } }) } } } </script> <style> </style> uni.setStorageSync将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。代码演示<template> <view> <button type="primary" @click="setStor">存储数据</button> </view> </template> <script> export default { methods: { setStor () { uni.setStorageSync('id',100) } } } </script> <style> </style> uni.getStorage从本地缓存中异步获取指定 key 对应的内容。代码演示<template> <view> <button type="primary" @click="getStorage">获取数据</button> </view> </template> <script> export default { data () { return { id: '' } }, methods: { getStorage () { uni.getStorage({ key: 'id', success: res=>{ this.id = res.data } }) } } } </script> uni.getStorageSync从本地缓存中同步获取指定 key 对应的内容。代码演示<template> <view> <button type="primary" @click="getStorage">获取数据</button> </view> </template> <script> export default { methods: { getStorage () { const id = uni.getStorageSync('id') console.log(id) } } } </script> uni.removeStorage从本地缓存中异步移除指定 key。代码演示<template> <view> <button type="primary" @click="removeStorage">删除数据</button> </view> </template> <script> export default { methods: { removeStorage () { uni.removeStorage({ key: 'id', success: function () { console.log('删除成功') } }) } } } </script> uni.removeStorageSync从本地缓存中同步移除指定 key。代码演示<template> <view> <button type="primary" @click="removeStorage">删除数据</button> </view> </template> <script> export default { methods: { removeStorage () { uni.removeStorageSync('id') } } } </script> 上传图片、预览图片上传图片uni.chooseImage方法从本地相册选择图片或使用相机拍照。案例代码<template> <view> <button @click="chooseImg" type="primary">上传图片</button> <view> <image v-for="item in imgArr" :src="item" :key="index"></image> </view> </view> </template> <script> export default { data () { return { imgArr: [] } }, methods: { chooseImg () { uni.chooseImage({ count: 9, success: res=>{ this.imgArr = res.tempFilePaths } }) } } } </script> 预览图片结构<view> <image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image> </view> 预览图片的方法previewImg (current) { uni.previewImage({ urls: this.imgArr, current }) } 条件注释实现跨段兼容条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。写法:以 #ifdef 加平台标识 开头,以 #endif 结尾。平台标识值平台参考文档APP-PLUS5+AppHTML5+ 规范H5H5 MP-WEIXIN微信小程序微信小程序MP-ALIPAY支付宝小程序支付宝小程序MP-BAIDU百度小程序百度小程序MP-TOUTIAO头条小程序头条小程序MP-QQQQ小程序(目前仅cli版支持)MP微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 组件的条件注释代码演示<!-- #ifdef H5 --> <view> h5页面会显示 </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view> 微信小程序会显示 </view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view> app会显示 </view> <!-- #endif --> api的条件注释代码演示onLoad () { //#ifdef MP-WEIXIN console.log('微信小程序') //#endif //#ifdef H5 console.log('h5页面') //#endif } 样式的条件注释代码演示/* #ifdef H5 */ view{ height: 100px; line-height: 100px; background: red; } /* #endif */ /* #ifdef MP-WEIXIN */ view{ height: 100px; line-height: 100px; background: green; } /* #endif */ uni中的导航跳转利用navigator进行跳转navigator详细文档:文档地址跳转到普通页面<navigator url="/pages/about/about" hover-class="navigator-hover"> <button type="default">跳转到关于页面</button> </navigator> 跳转到tabbar页面<navigator url="/pages/message/message" open-type="switchTab"> <button type="default">跳转到message页面</button> </navigator> 利用编程式导航进行跳转导航跳转文档)利用navigateTo进行导航跳转保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。<button type="primary" @click="goAbout">跳转到关于页面</button> 通过navigateTo方法进行跳转到普通页面goAbout () { uni.navigateTo({ url: '/pages/about/about', }) } 通过switchTab跳转到tabbar页面跳转到tabbar页面<button type="primary" @click="goMessage">跳转到message页面</button> 通过switchTab方法进行跳转goMessage () { uni.switchTab({ url: '/pages/message/message' }) } redirectTo进行跳转 关闭当前页面,跳转到应用内的某个页面。<!-- template --> <button type="primary" @click="goMessage">跳转到message页面</button> <!-- js --> goMessage () { uni.switchTab({ url: '/pages/message/message' }) } 通过onUnload测试当前组件确实卸载onUnload () { console.log('组件卸载了') } 导航跳转传递参数在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收传递参数的页面goAbout () { uni.navigateTo({ url: '/pages/about/about?id=80', }); } 接收参数的页面<script> export default { onLoad (options) { console.log(options) } } </script> uni-app中组件的创建在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可创建login组件,在component中创建login目录,然后新建login.vue文件<template> <view> 这是一个自定义组件 </view> </template> <script> </script> <style> </style> 在其他组件中导入该组件并注册import login from "@/components/test/test.vue" 注册组件components: {test} 使用组件<test></test> 组件的生命周期函数beforeCreate在实例初始化之后被调用。详见 created在实例创建完成后被立即调用。详见 beforeMount在挂载开始之前被调用。详见 mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持 updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持 beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见 destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见 组件的通讯父组件给子组件传值通过props来接受外界传递到组件内部的值<template> <view> 这是一个自定义组件 {{msg}} </view> </template> <script> export default { props: ['msg'] } </script> <style> </style> 其他组件在使用login组件的时候传递值<template> <view> <test :msg="msg"></test> </view> </template> <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, components: {test} } </script> 子组件给父组件传值通过$emit触发事件进行传递参数<template> <view> 这是一个自定义组件 {{msg}} <button type="primary" @click="sendMsg">给父组件传值</button> </view> </template> <script> export default { data () { return { status: '打篮球' } }, props: { msg: { type: String, value: '' } }, methods: { sendMsg () { this.$emit('myEvent',this.status) } } } </script> 父组件定义自定义事件并接收参数<template> <view> <test :msg="msg" @myEvent="getMsg"></test> </view> </template> <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, methods: { getMsg (res) { console.log(res) } }, components: {test} } </script> 兄弟组件通讯uni-ui的使用uni-ui文档1、进入Grid宫格组件2、使用HBuilderX导入该组件3、导入该组件import uniGrid from "@/components/uni-grid/uni-grid.vue" import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue" 4、注册组件components: {uniGrid,uniGridItem} 5、使用组件<uni-grid :column="3"> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> </uni-grid> 免责声明:此笔记来自黑马程序员uniapp开发笔记,放在这里主要是方便学习使用。欢迎关注本站微信公众号“51学代码”
2022年05月27日
91 阅读
0 评论
0 点赞
1
2
3