保存后在浏览器看到效果如下:
接下来设计一个列表,这里还是使用官方UI组件中的样式,如果你需要个性化列表样式,请自行设计,打开(https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385) 引入UI组件的列表dom结构,因为有三个分类,所以列表也需要有三个容器包裹,这样等下好做导航切换效果:
1234567891011121314151617181920212223242526272829
这里需要用样式控制显示和隐藏:
12.news-list .weui-cells{ display: none; }.news-list .weui-cells.active{ display: block; }
保存看效果:
好啦,一个新闻列表的dom结构大致完成了,当然这里的数据是写死的,具体开发中需要使用后端接口提供的数据,关于如何使用网络请求,请参考官方api:在微码中发送网络请求(https://open.welink.huaweicloud.com/wecode/docs/dev/jsapi/fetch/fetchinternet_cloud.html?v=1547690385)
接下来实现导航栏的切换效果,在src/html中新建一个js文件,就命名为main.js吧,然后在index.js中引入:
打开main.js,我们用jquery的选择器来操作:
12345$('.weui-navbar .weui-navbar__item').on('click', function () { var index = $(this).index(); $(this).addClass('weui-bar__item_on').siblings().removeClass('weui-bar__item_on'); $(`.news-list .weui-cells:eq(${index})`).addClass('active').siblings().removeClass('active');});
保存就可以看到导航栏可以切换了,且下面的列表也会跟随切换。
好了,接下来需要设计一个详情页。详情页就是一篇文章,实际开发中,整个文章dom结构都是从接口得到的,这里使用静态内容做一个示范。
将src下的desc目录更名为news,作为详情页,且需要在app.json中同步更改:
src/app.json:
123456{ "pages": [ "html/index", "news/index" ]}
src/news/index.html:
12345678910111213141516171819202122
当飞机在机场上空盘旋,等待降落到跑道上时,你可趁机望望窗外的风景。在你面前,有如明信片上的照片一样美丽的就是亚拉拉特山。它是世界上最著名的山之一,毋庸置疑也是宗教地位最高的山之一。虽然三大亚伯拉罕宗教(犹太教、基督教与伊斯兰教)的教徒在许多事情上存在分歧,但他们都相信《旧约·创世纪》中的描述,即当上帝让世界发洪水的时候,诺亚方舟最后停泊的地方就在亚拉拉特山。
虽然有许多人不相信诺亚方舟的故事,但在高加索的这一部分地区,确有一些地理证据表明这里曾发过大洪水。如果真的是这样,虽然洪水无疑为当地的民众带来了灾难(并在此之后,被他们的民间传说收录进来,口耳相传),但洪水影响的也可能仅仅是一小部分地区。一些地理学家与考古学家曾暗示洪水可能是海啸造成的,而在古代人看来,那就是上帝在发怒。亚拉拉特山现在已经不属于亚美尼亚了,它是国境线另一侧的土耳其的领土,对这一点亚美尼亚人格外敏感,但是这座山依旧是亚美尼亚人的民族认同的一个重要的部分。亚美尼亚民族自称是诺亚最小的儿子雅弗的后代;亚拉拉特山出现在国徽与银行发行的纸币上;在亚美尼亚的古代传说中,亚拉拉特山是众神之家,这点非常像古希腊的神都居住在奥林匹斯山一样。亚拉拉特山主宰着埃里温的天际线,亚美尼亚人称,这是一个永恒的提示,即人类在地球上生活是因了上帝的恩泽。
看下效果:
按照列表页的样式引用方法,我们在news/index.css中加入一些样式让页面看起来协调一些:
12345article{ padding: 10px; }article .info{ font-size: 0.28rem; font-weight: normal; margin: 0 0 0.12rem 0; color: #888888; }article p{ text-indent: 2em; margin: 0.6rem 0; }article img{ width: 100%;}.share-btn{ display: inline-block; background: #ff6f6f; width: 2rem; height: 2rem; text-align: center; color: #fff; font-size: 2rem; line-height: 2rem; padding: 5px; border-radius: 50%; position: fixed; right: 10px; bottom: 50px; }
同时,在src/html/index.html中给列表加上链接,指向详情页:
1234567
注意到这个红色的分享按钮了吗?接下来将调用JSAPI做一个分享功能,最终分享到群或者聊天界面显示的是一张卡片。使用的是 HWH5.share 这个方法,来看一下参数调用:
参数类型是否必填说明typeString是类型titleString是标题h5UriString是h5页面的UrifromString是分享来源,可以填微码的应用名称descString否描述,title下面会紧接一段描述文本pcUriString否PC端点击打开的链接。isPCDisplay为1时,该参数为必传参数isPCDisplayNumber否是否在PC显示分享信息。1:显示,0:不显示iconURLString否分享图标
这里面最重要的一个参数 h5Uri 就是微码应用在CloudLink中url链接地址,在根目录下的 plugin.json 中可以看到:
123456789101112{ "indexURL": "h5://20190709172642809/html/index.html", "appId": "20190709172642809", "minSdkVersionName": "1.2.8", "versionName": "1.0.0", "permissions": [ "outerNet", "contact", "file", "media" ]}
其中 indexURL 就是我们要用到的参数 h5Uri,好了,开始写分享这一部分的代码。
同样的,将jquery.min.js引入详情页中:
123456
然后在同目录下的index.js中实现功能:
1234567891011121314151617import '../app';import './index.css';$('#shareBtn').on('click', function () { var _shareParams = { title: '亚美尼亚 被神灵和奇迹环绕的国度', desc: '亚美尼亚 被神灵和奇迹环绕的国度', h5Uri: 'h5://20190709172642809/html/index.html', iconURL: 'https://open.welink.huaweicloud.com/wecode/image/icon/20190709/7ab9c09c-81c5-45d9-97cf-9b52cd01e676.png', from: 'simpleDemo' }; HWH5.share({ type: 'IM', data: _shareParams }).catch(function (error) { console.log('分享发生异常', error); });});
title 填上创建应用时填写的应用名称,针对于当前页面,我填上了新闻的标题,具体情况具体对待
desc 写上简单的描述,针对于当前页面,我填上了新闻的简介
h5Uri 填上plugin.json中的 indexURL 字段值
iconURL 分享卡片中的缩略图,在应用详情中可以找到,也可以使用当前分享页面的具体图片,更为贴切
from 填上应用英文名
父级参数 type 就填写 ‘IM’。
到这里一个简单的新闻带分享功能就完成了,是不是很简单?是的,确实很简单, 除了一些环境问题需要注意,然后就是借助JSAPI实现一些原生能力,其他的跟写普通页面一样的。
下一章将记录真机调试的过程。
WeLink 云市场 软件开发云
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。