保存后在浏览器看到效果如下：
接下来设计一个列表，这里还是使用官方UI组件中的样式，如果你需要个性化列表样式，请自行设计，打开（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385） 引入UI组件的列表dom结构，因为有三个分类，所以列表也需要有三个容器包裹，这样等下好做导航切换效果：
![【技术教程]】【微码开发】微码开发入门 - 基础模板开发](https://www.huoban.com/news/zb_users/cache/ly_autoimg/n/NzkxNg.jpg "【技术教程]】【微码开发】微码开发入门 - 基础模板开发")
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小时内删除侵权内容。
