hbuilder怎么在电脑网页右上角添加导航栏

hbuilder怎么在电脑网页右上角添加导航栏,第1张

HBuilder实现透明渐变导航栏+自定义按钮(右上角分享按钮)

先上效果图:

js代码:

mui.plusReady(function() {

var ws = plus.webview.currentWebview()

ws.setStyle({

"titleNView":{

backgroundColor: '#f7f7f7',//导航栏背景色

titleText: '透明渐变(native模式)',//导航栏标题

titleColor: '#000000',//文字颜色

type:'transparent',//透明渐变样式

buttons:[{

text:'',

float:'right',

type:'share',

onclick:"javascript:plus.webview.currentWebview().evalJS('shareHref()')"

}],

autoBackButton: true,//自动绘制返回箭头

splitLine:{//底部分割线

color:'#cccccc'

}

}

})

})

html代码:

<body>

<div class="mui-content">

<!--顶部banner图 开始-->

<div id="kr-article-banner" class="kr-article-banner">

<div id="kr-article-cover" class="kr-article-cover">

<img width="100%" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBE00AN0001NOS.jpg">

</div>

<h2 id="kr-article-title" class="kr-article-title">首对“海归”大熊猫双胞胎回到中国</h2>

</div>

<!--顶部banner图 结束-->

<div class="kr-article-content">

<!-- 文章作者、发布时间等信息 -->

<div class="kr-article-meta">

<div id="kr-article-author" class="kr-article-author">中国新闻网</div>

<div class="kr-article-text">发表于</div>

<div id="kr-article-time" class="kr-article-time">2018-12-05 04:22</div>

</div>

<!--文章详细内容-->

<div id="kr-article-article" class="kr-article-article" v-html="content">

<p>&nbsp&nbsp&nbsp&nbsp12月4日,旅奥大熊猫龙凤胎“福凤”“福伴”顺利回到中国大熊猫保护研究中心,入住卧龙神树坪基地隔离检疫区,成为首对“海归”大熊猫双胞胎。大熊猫“福凤”“福伴”于2016年8月7日在奥地利美泉宫动物园出生。大熊猫“福凤”为雌性,体重60kg,爱吃竹笋和红薯,比较贪玩。 大熊猫“福伴”为雄性,体重55kg,喜欢攀爬、玩雪,对一切新鲜的事物都充满好奇心,社交能力强。(来源:中国新闻网)</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBF00AN0001NOS.jpg"><br>&nbsp&nbsp&nbsp&nbsp<p>&nbsp&nbsp&nbsp&nbsp工作人员卸下装有大熊猫的笼舍。(来源:中国新闻网)</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBG00AN0001NOS.jpg"><br>&nbsp&nbsp&nbsp&nbsp<p>&nbsp&nbsp&nbsp&nbsp工作人员引诱大熊猫出笼。(来源:中国新闻网)</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBH00AN0001NOS.jpg"><br>&nbsp&nbsp&nbsp&nbsp<p>&nbsp&nbsp&nbsp&nbsp大熊猫“福凤”在保护研究中心都神树坪基地开始熟悉环境。(来源:中国新闻网)</p><img style="max-width:800px" src="http://pic-bucket.nosdn.127.net/photo/0001/2018-12-05/E282OFBI00AN0001NOS.jpg"><br>&nbsp&nbsp&nbsp&nbsp<p>&nbsp&nbsp&nbsp&nbsp大熊猫“福凤”“福伴”在在保护研究中心神树坪基地。(来源:中国新闻网)</p><p></p>

</div>

</div>

</div>

</body>

参数:

窗口标题栏自定义按钮样式

属性:

type: (String 类型 )按钮样式

运行环境中内置按钮样式直接使用,内置样式忽略fontSrc和text属性。 可取值: "forward" - 前进按钮; "back" - 后退按钮; "share" - 分享按钮; "favorite" - 收藏按钮; "home" - 主页按钮; "menu" - 菜单按钮; "close" - 关闭按钮; "none" - 无样式。 默认值为无样式("none"),需通过text属性设置按钮上显示的内容、通过fontSrc属性设置使用的字体库。

color: (String 类型 )按钮上文字颜色

可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色返回键; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为窗口标题栏控件的标题文字颜色。

colorPressed: (String 类型 )按下状态按钮文字颜色

可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色返回键; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为color属性值自动调整透明度为0.3。

float: (String 类型 )按钮在标题栏上的显示位置

可取值: "right" - 在标题栏中靠右排列显示; "left" - 在标题栏中靠左侧排列显示(在返回键后)。 默认值为"right"。

fontWeight: (String 类型 )按钮上文字的粗细

可取值: "normal" - 标准字体; "bold" - 加粗字体。 默认值为"normal"。

fontSize: (String 类型 )按钮上文字大小

可取值:字体高度像素值,数字加"px"格式字符串,如"22px"。 窗口标题栏为透明样式(type="transparent")时,默认值为"22px"; 窗口标题栏为默认样式(type="default")时,默认值为"27px"。

fontSrc: (String 类型 )按钮上文字使用的字体文件路径

字体文件路径支持以下类型: 相对路径 - 相对于当前页面的host位置,如"a.ttf",注意当前页面为网络地址则不支持; 绝对路径 - 系统绝对路径,如Android平台"/sdcard/a.ttf",此类路径通常通过其它5+ API获取的; 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径,如"_www/a.ttf"; 本地路径URL - 以“file://”开头,后面跟随系统绝对路径。

onclick: (WebviewCustomButtonCallback 类型 )按钮点击后触发的回调函数

回调函数中将返回此JSON对象。

text: (String 类型 )按钮上显示的文字

推荐使用一个字符,超过一个字符可能无法正常显示,使用字体图标时unicode字符表示必须'\u'开头,如"\ue123"(注意不能写成"\e123")。

作者:胶泥座人

HBuilder常用的快捷键:

Alt + [ 匹配括号

Alt + ↓跳转到下一个可编辑区

Ctrl + Alt + j 合并下一行

Ctrl + Alt + ←选择助手

Ctrl + 回车 换行

Ctrl + Shift + 回车 向上换行

Ctrl + d 删除一行

Ctrl + Shift +R 复制上一行

创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)

中途换行: 'Ctrl+Enter'

设置charset: m e 6 Enter

引用外部js: s 2 Enter 'Ctrl+Enter'

创建js区块: s Enter

创建函数: f u n 3 (或者 f u n n Enter)

为函数命名:W h o i s E

跳转到函数末尾: End 'Alt+[' ↓ 'Ctrl+Enter' (Alt+[是跳转到匹配括号的意思)

创建style节点: s t Enter ↓ 'Ctrl+Enter'

引用外部css: l Enter Enter

跳转到下一个可编辑区: 'Alt+↓'

创建img标签: i m Enter Enter 'Ctrl+Enter'

插入换行符: 'Shift+Enter' Enter

创建div并设id和class: d i Enter d 1 → Space c Enter Enter (这里提示的class列表是在test.css里定义的)

转到class的定义处:'Ctrl+Alt+D' (按Alt点击鼠标也可以)

关闭标签页:'Ctrl+w' (切换标签页则可以用Ctrl+e)

添加自定义属性data-test并赋值1: → Space d 7 t e s t Tab 1

合并下行:'Ctrl+Alt+j' 'Ctrl+Enter'

创建超链接并设id: a Enter Enter → Space i Enter a 1

使用选择助手选中#d1:'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷键冲突,可使用Alt+S U,或者鼠标双击引号)

重新修改链接指向新创建的a1: BackSpace 'Alt+/' Enter 'Ctrl+Enter'

创建ul: u Enter

折叠代码:'Ctrl+Alt+-'

向上插入空行:'Ctrl+Shift+Enter' Tab (一般Ctrl+某字母的快捷键,变成Ctrl+Shift+相同字母,大多代表相反意义)

没有代码块时,使用emmet语法创建标签:n a v Tab (如果不知道emmet技术,请搜索学习,前端必学)

使用shift转码输入空格:'Shift+Space' (如果与输入法快捷键冲突,也可输入&n 2)

创建按钮:'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →

添加点击事件: Space o n c k Enter w h o Enter → (onck是模糊匹配,不用输入完整单词也会模糊匹配,除代码块外所有语法提示都支持模糊匹配)

使用转到定义到js函数:'Ctrl+Alt+D' ↓

------以下为js部分

定义一个变量e: v a r Space e Enter

为e赋值:e Space = Space d o Enter . g 6 " Enter (可提示样式列表)

使用回车或Tab跳转光标到绿色竖线(若没有绿色竖线请使用End到行尾):Enter Enter

为e赋值2:e Space = Space d o Enter . g 8 " d 8 Enter Enter (可提示标签列表)

为e赋值3(这个代码块很常用):e Space = Space $ (或者dg) Enter 2 Enter Enter (可提示id列表,注意选择d1)

为e设置algin属性: e . s e 2 " a l Enter → , " c Enter Enter Enter

设置自定义属性:e . s e 2 " d Enter → , " 2 Enter Enter

提示字体列表: e . s t Enter . f o 2 = " Enter Enter Enter

提示图片列表: e . s t Enter . b 7 = " h b Enter Enter Enter

还能这么写css: e . s t Enter . c s 2 = " b 7 h b Enter → Enter

写switch对e判断:s w 2 e . s t Enter . d i s Enter Tab

case处提示display的值域:" - w e Enter

跳转到switch结尾(有绿色竖线):Enter Enter

写if代码块:i f f Enter (或者使用i f 2)

为if添加条件判断属性里的样式:e . g e t a t Enter " c Enter Enter ! = " Enter ↓

设置e的样式:e . c l 2 (此处也可以用c l n Enter) = " Enter Enter ↓ Enter

js里可以提示html: e . i n n Enter = " <f o Enter Space c o Enter Enter Enter Enter

e赋值改为超链接:e Space = Space $ Enter Enter Enter Enter

给a1加链接地址:e . h r Enter = " Enter Enter Enter

给a1加target:e . t 5 = " Enter Enter Enter

e赋值改为image对象:e Space = Space n e w Space i m 6 Enter Enter

为img增加图片: e . s r Enter = " Enter Enter Enter

e赋值改为indexedDB对象:e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 Enter

确认e可被浏览器识别:i f f Enter (也可以使用i f 2) t y 4 e Enter ↓

执行indexdb的方法:e . o p Enter " t e s t Enter ↓ Enter

------以下为删除又添加上外部css引用

定义head变量:v a r Space h e a d Space = Space d o Enter . g 8 " h e Enter Enter [ 0 → Enter

with里也可以提示: w i t h h (或者w i t 2) Enter h Enter ↓

获取head的最后一个子节点:v a r Space l Space = Space l e c Enter Enter (with里的head可直接识别子对象)

去掉该子节点:r e m 6 l → ↓ Enter (head的lastElementChild就是外部引用的css)

动态生成一个css文件引用:e Space = Space d c Enter l 5 Enter Enter

添加属性:e . r 3 = " s t y Enter Enter Enter

设置type: e . t y Enter = " c Enter Enter Enter

设置href:e . h r Enter = " . c Enter Enter Enter

将e加入head中:h Enter . a p Enter e Enter Enter Enter

------演示重构,即重命名变量

用代码块定义一个变量s:v a r s Enter Tab e Space i s Space 'Ctrl+Enter'

判断e的属性:i f e(或i f 3) Enter e . g 2 " d Enter Enter = = n u 2 ↓

为s赋值:s = s + e . o u Enter 'Alt+↓'

为s赋值:s = s + " u n k n o w → ↓ Enter

将s打印出来:a l Enter s

选择s并转到定义:'Shift+←' 'Ctrl+Alt+D'(按Alt点击鼠标也可以)

重构s的命名为ss:'Ctrl+F2' Enter s s Enter Enter (d出对话框可预览重构结果)

跳转到函数末尾:'Alt+↓' 'Alt+↓' Enter

添加一个启动事件: a d Enter " d o m l o Enter → , f u n a Enter (此处也可以是f u 6) ↓

提示自定义函数的jsdoc: f i n i Enter 1

------css部分

跳转到CSS:'Alt+↓'

给body加样式:b o Enter { Enter

emmet方式增加textalign:t c Tab Enter

模糊匹配增加user-select:u s e r s 4 5

写下一个样式:↓ Enter

为input增加样式:i n Enter [ t y Enter = Enter → { Enter

使用代码块设置宽度:w 9 9 0 ↓ Enter

为ul加样式:u l { d n Enter 'Ctrl+Enter'

ID也可以提示:# 2 { Enter

提示字体列表:f f Enter Enter Enter

回车自动补行尾分号:Enter

增加background-image:b i Enter h b Enter

大功告成,保存并运行起来看看:'Ctrl+s' 'Ctrl+r'

如果你屏幕够宽,也可以点击右上角视图切换,换到边改边看视图Ctrl+P,左边保存右边自动刷新。

1、首先打开hbuilder软件,输入个人账号和密码并登录。

2、其次打开hbuilder软件首页找到设置,在设置中找到音频设置点击进入。

3、最后再音频设置中找到播放器设置位置,根据喜好进行设置即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11653183.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存