【技术教程]】【微码开发】微码开发入门 - 基础模板开发
在打开微码基础模板且安装完依赖后，资源管理器的 “WECODE TOOLS”会出现菜单，点击“本地调试”，将会开始编译运行项目，最后将在默认浏览器打开首页 ( src/html/index.html )。
到这里，项目已经跑起来了，可以开始加入我们想要的功能了。 123456789101112131415161718192021222324<html> <head> <meta charset="utf-8" /> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="description" content="" /> <!-- JSAPI相关样式 --> <link rel="stylesheet" href="../../../../common/css/hwh5.css"> </head> <body> <div class="page"> <div class="page__bd"> <h1 class="hello-world">Hello World!</h1> </div> <a class="page-link" href="../desc/index.html" >使用说明</a> </div> <script type="text/javascript" src="../js/es6.polyfill.js"></script> <!-- 控制台脚本，调试阶段可打开 --> <%= htmlWebpackPlugin.options.vconsole === true ? '<script type="text/javascript" src="../../../../common/js/vconsole.js"></script>' : '' %> <script src="../jquery.min.js"></script> <!-- JSAPI相关脚本 --> <script src="../../../../common/js/hwh5.js"></script> <script src="../js/hwh5.compatible.js"></script> </body></html> body内部引入了一些脚本：
将同目录下的index.js引入到index.html中，css文件是在index.js中被载入的。 123456 <script src="../jquery.min.js"></script> <script src="./index.js"></script> <!-- JSAPI相关脚本 --> <script src="../../../../common/js/hwh5.js"></script> <script src="../js/hwh5.compatible.js"></script> </body>12import '../app';import './index.css'; 看到这里也许有些人会有迷惑，为什么css文件要在js中以import的方式载入呢。这是因为webpack的css loader在编译时需要在入口文件中寻找样式文件来进行编译，最终以内嵌的方式写到html中的。什么意思？也就是说，你改完index.css保存，你所修改的内容会被同步写入到页面中的 下面我们来实现一个简易版的新闻功能，它有一个列表页、详情页，在详情页会有一个分享功能，用于分享到好友或者群 首先来设计主页，也就是列表页，就以src/html/index.html作为主页吧。 1234567891011121314151617<div class="page"> <div class="page__bd"> <div class="weui-tab"> <div class="weui-navbar"> <div class="weui-navbar__item weui-bar__item_on"> <span class="weui-navbar__item_title">热点</span> </div> <div class="weui-navbar__item"> <span class="weui-navbar__item_title">推荐</span> </div> <div class="weui-navbar__item"> <span class="weui-navbar__item_title">原创</span> </div> </div> </div> </div></div> 保存后在浏览器看到效果如下：
接下来设计一个列表，这里还是使用官方UI组件中的样式，如果你需要个性化列表样式，请自行设计，打开（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385） 引入UI组件的列表dom结构，因为有三个分类，所以列表也需要有三个容器包裹，这样等下好做导航切换效果： 1234567891011121314151617181920212223242526272829<div class="news-list"> <div class="weui-cells active"> <div class="weui-listview-box"> <div class="weui-listview-box__bg"> <div class="weui-listview-view"><img src="../img/news1.jpg"/></div> <div class="weui-listview-title">亚美尼亚 被神灵和奇迹环绕的国度 </div> <div class="weui-listview-footer"><span>07-19 09:05</span></div> </div> </div> </div> <div class="weui-cells"> <div class="weui-listview-box"> <div class="weui-listview-box__bg"> <div class="weui-listview-view"><img src="../img/news2.png"/></div> <div class="weui-listview-title">到手的金牌飞了!英跳水名将最后一跳领先30分 却横拍入水抱女友痛哭 </div> <div class="weui-listview-footer"><span>07-18 21:31</span></div> </div> </div> </div> <div class="weui-cells"> <div class="weui-listview-box"> <div class="weui-listview-box__bg"> <div class="weui-listview-view"><img src="../img/news3.jpg"/></div> <div class="weui-listview-title">史陶芬伯格刺杀希特勒，这个行动成功概率有多少？ </div> <div class="weui-listview-footer"><span>07-19 08:36</span></div> </div> </div> </div></div> 这里需要用样式控制显示和隐藏： 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结构都是从接口得到的，这里使用静态内容做一个示范。 123456{ "pages": [ "html/index", "news/index" ]} src/news/index.html： 12345678910111213141516171819202122<div class="page"> <div class="page__bd"> <article style="overflow: hidden; max-height: none;"> <div class="article-content"> <div class="head"> <h1 class="title">亚美尼亚 被神灵和奇迹环绕的国度</h1> <div class="info"> <span class="time js-time">2019-07-19 09:05</span> </div> </div> <div class="content"> <p>当飞机在机场上空盘旋，等待降落到跑道上时，你可趁机望望窗外的风景。在你面前，有如明信片上的照片一样美丽的就是亚拉拉特山。它是世界上最著名的山之一，毋庸置疑也是宗教地位最高的山之一。虽然三大亚伯拉罕宗教（犹太教、基督教与伊斯兰教）的教徒在许多事情上存在分歧，但他们都相信《旧约·创世纪》中的描述，即当上帝让世界发洪水的时候，诺亚方舟最后停泊的地方就在亚拉拉特山。</p> <div class="photo"><img alt="" src="../img/news1.jpg" /></div> <p>虽然有许多人不相信诺亚方舟的故事，但在高加索的这一部分地区，确有一些地理证据表明这里曾发过大洪水。如果真的是这样，虽然洪水无疑为当地的民众带来了灾难（并在此之后，被他们的民间传说收录进来，口耳相传）,但洪水影响的也可能仅仅是一小部分地区。一些地理学家与考古学家曾暗示洪水可能是海啸造成的，而在古代人看来，那就是上帝在发怒。亚拉拉特山现在已经不属于亚美尼亚了，它是国境线另一侧的土耳其的领土，对这一点亚美尼亚人格外敏感，但是这座山依旧是亚美尼亚人的民族认同的一个重要的部分。亚美尼亚民族自称是诺亚最小的儿子雅弗的后代；亚拉拉特山出现在国徽与银行发行的纸币上；在亚美尼亚的古代传说中，亚拉拉特山是众神之家，这点非常像古希腊的神都居住在奥林匹斯山一样。亚拉拉特山主宰着埃里温的天际线，亚美尼亚人称，这是一个永恒的提示，即人类在地球上生活是因了上帝的恩泽。</p> </div> </div> </article> <div id="shareBtn" class="share-btn"> + </div> </div></div> 看下效果:
按照列表页的样式引用方法，我们在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<a href="../news/index.html"> <div class="weui-listview-box__bg"> <div class="weui-listview-view"><img src="../img/news1.jpg"/></div> <div class="weui-listview-title">亚美尼亚 被神灵和奇迹环绕的国度 </div> <div class="weui-listview-footer"><span>07-19 09:05</span></div> </div></a> 注意到这个红色的分享按钮了吗？接下来将调用JSAPI做一个分享功能，最终分享到群或者聊天界面显示的是一张卡片。使用的是 参数类型是否必填说明typeString是类型titleString是标题h5UriString是h5页面的UrifromString是分享来源，可以填微码的应用名称descString否描述，title下面会紧接一段描述文本pcUriString否PC端点击打开的链接。isPCDisplay为1时，该参数为必传参数isPCDisplayNumber否是否在PC显示分享信息。1：显示，0：不显示iconURLString否分享图标 这里面最重要的一个参数 123456789101112{ "indexURL": "h5://20190709172642809/html/index.html", "appId": "20190709172642809", "minSdkVersionName": "1.2.8", "versionName": "1.0.0", "permissions": [ "outerNet", "contact", "file", "media" ]} 其中 123456<script type="text/javascript" src="../js/es6.polyfill.js"></script><script src="../js/jquery.min.js"></script><!-- JSAPI相关脚本 --><script src="../../../../common/js/hwh5.js"></script><script src="../js/hwh5.compatible.js"></script><script src="./index.js"></script> 然后在同目录下的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 填上创建应用时填写的应用名称，针对于当前页面，我填上了新闻的标题，具体情况具体对待 到这里一个简单的新闻带分享功能就完成了，是不是很简单？是的，确实很简单， 除了一些环境问题需要注意，然后就是借助JSAPI实现一些原生能力，其他的跟写普通页面一样的。 |
- 点赞
- 收藏
- 关注作者
评论（0）