网站开发工作难吗,外贸建站是什么意思,个人中心网页html,wordpress评论设置利用 Mui 做一个简单的项目
1. 前期准备工作 首先我们需要去安装一个开发工具 HBuilder X 和 模拟器#xff08;也可以连接手机进行开发#xff09;,这是 HBuilder X 的下载地址 http://www.dcloud.io#xff1b;模拟器我用网易的 MuMu #xff0c;下载地址 http://mumu.1…利用 Mui 做一个简单的项目
1. 前期准备工作 首先我们需要去安装一个开发工具 HBuilder X 和 模拟器也可以连接手机进行开发,这是 HBuilder X 的下载地址 http://www.dcloud.io模拟器我用网易的 MuMu 下载地址 http://mumu.163.com。
创建项目流程选择 5App 添加已包含 mui 的项目模板 然后可以在页面添加各样的组件例如添加一个侧滑菜单栏再加一个图片轮播框和图文列表因为数据都是动态的所以我只保留了图片轮播、图文列表的框架存在下面利用 ajax 请求进行数据获取。 数据源我使用的是 知乎日报API 在这项目当中我用了3个链接里面还有其它的 API 地址如有需要的可供去选择。
2.index 页面
body!-- 主界面菜单同时移动 --!-- 侧滑导航根容器 --div classmui-off-canvas-wrap mui-draggable!-- 主页面容器 --div classmui-inner-wrap!-- 菜单容器 --aside classmui-off-canvas-left idoffCanvasSidediv classmui-scroll-wrapperdiv classmui-scroll!-- 菜单具体展示内容 --/div/div/aside!-- 主页面标题 --header classmui-bar mui-bar-nava classmui-icon mui-action-menu mui-icon-bars mui-pull-left href#offCanvasSide/ah1 classmui-title知乎日报/h1/header!-- 主页面内容容器 --div classmui-content mui-scroll-wrapper idrefreshContainerdiv classmui-scrolldiv stylemargin: 0.2rem;/div!-- 主界面具体展示内容 --!-- 图片轮播 --div classmui-sliderdiv classmui-slider-group mui-slider-loop idaa/div/divdiv idredian今日热点/divdiv idloop_centen!-- 今日热点展示 --/div/div/divdiv classmui-off-canvas-backdrop/div/div/div/body3.下面是 JS 代码的实现 首先是页面加载后初始化下拉刷新和上拉加载利用选择器来获取待刷新的容器位置。 注: 如果用 mui.init() 方法来进行初始化则有可能发生 事件无效 或者 容器无法滚动 情况这个问题我掉坑了几天没解决的后来自己来初始化 pullRefresh() 后问题就解决了上拉加载与下拉刷新都是用一个 pullRefresh() 方法进行初始化。 script srcjs/mui.min.js/scriptscript typetext/javascript charsetutf-8mui(#refreshContainer).pullRefresh({up: {height: 30, //可选.默认50.触发上拉加载拖动距离auto: false, //可选,默认false.自动上拉加载一次contentrefresh: 正在加载..., //可选正在加载状态时上拉加载控件上显示的标题内容contentnomore: 没有更多数据了, //可选请求完毕若没有更多数据时显示的提醒内容callback: jiazai //必选刷新函数根据具体业务来编写比如通过ajax从服务器获取新数据},down: {auto: true, // 可选默认false.首次加载自动下拉刷新一次contentdown: 下拉可以刷新, //可选在下拉可刷新状态时下拉刷新控件上显示的标题内容contentover: 释放立即刷新, //可选在释放可刷新状态时下拉刷新控件上显示的标题内容contentrefresh: 正在刷新..., //可选正在刷新状态时下拉刷新控件上显示的标题内容callback: refresh //必选刷新函数根据具体业务来编写比如通过ajax从服务器获取新数据}})// 定义两个全局变量,一个用于计数(后面上拉加载会用到),一个存放日期var nums 0;var riqi ;// 首页加载function refresh() {// 两个变量用于存放元素let html ;let centen ;// 获取图片轮播框的位置var lunbo mui(#aa);// 请求数据mui.ajax(https://news-at.zhihu.com/api/4/news/latest, {dataType: json, //服务器返回json格式数据type: GET, //HTTP请求类型headers: {Content-Type: application/json}, // 设置访问表头,用于解决跨域问题timeout: 10000, //超时时间设置为10秒success: function(data) {// 设置轮播第一张图片var firstImage div classmui-slider-item mui-slider-item-duplicatea href data.top_stories[4].id img src data.top_stories[4].image //a/div;// 设置轮播最后一张图片var lastImage div classmui-slider-item mui-slider-item-duplicatea href data.top_stories[0].id img src data.top_stories[0].image //a/div;// 把第一张图片放到 html 中html firstImage;// 循环轮播集合把数据取出来分别放到 html 中mui.each(data.top_stories, function(index, object) {html div classmui-slider-itema href object.id img src object.image //a/div;});// 最后一张图片放到 html 中html lastImage;var loop lunbo[0];loop.innerHTML html;// 获得 slider 插件对象,用于设置轮播图框是否自动轮播,时间是多长var gallery mui(.mui-slider);gallery.slider({interval: 3000 // 自动轮播周期,若为 0 则不自动播放,默认为0});// 设置今日热点新闻mui.each(data.stories, function(indexs, object) {centen li classmui-table-view-cell mui-media;// 新闻详细信息跳转页面同时把 新闻id 传过去centen a href object.id ;centen img classmui-media-object mui-pull-right src object.images ;centen object.title;centen /a;centen /li;});// 把今日新闻数据集插入到列表中document.getElementById(loop_centen).innerHTML centen;// 给主容器内的 a 表签绑定单击事件单击后跳转新闻详细页面// 注在 mui 中的 click 事件有时候会失效改用 tap 事件该事件与 click 一样 mui(#refreshContainer).on(tap, a, function() {var id this.getAttribute(href);mui.openWindow({// 新窗口的idid: new_file,// 新窗口的地址url: new_file.html,// 新闻 id 参数 extras: {sid: id}})});// 定时器多少秒后执行下面方法setTimeout(function() {// endPulldownToRefresh() 方法是结束下拉刷新括号内参数是 true|false// 如果参数为 false 则代表还有更多数据则继续参数为 true 则显示没有新数据刷新;mui(#refreshContainer).pullRefresh().endPulldownToRefresh();}, 1000);// 把计数重置(具体作用下面的上拉加载会讲解);nums 0;}});}4.上拉加载过往新闻 nums 参数 的作用来了主要用于 首次计数因为知乎日报的过往信息是查询当天日期返回前一天的新闻首次加载过往新闻 tapscroll() 方法是不进行传日期参数的而是自己 获取当天时间然后进行拼接日期当第二次加载过往新闻则根据返回的 date 日期参数继续查询。 至于上面的刷新方法为什么要把 nums 计算参数重置当我们有进行过上拉加载过往新闻后此时 nums 0 的如果下拉刷新一次数据后不把 nums 计算参数重置再次上拉加载过往新闻时则会根据上次加载到哪一天的日期来显示出来所以需要把 nums 计算参数重置为 0加载过往新闻时候才会从当天开始加载。 // 上拉加载过往新闻 function jiazai() {// 定时器,作用与下拉刷新一样setTimeout(function() {if (nums 0) {// 首次加载过往新闻// 调用上拉加载的方法riqi tapscroll();// 加载一次后 计算参数 nums 自身 nums;// endPullupToRefresh 用于是否接收上拉加载动作,参数为 true|false,// 根据返回的 riqi 是否为空,空则代表没有过往新闻了,则上拉动作继续,否则显示没有更多数据了mui(#refreshContainer).pullRefresh().endPullupToRefresh(riqi null);} else {// 第二次加载过完新闻riqi tapscroll(riqi);nums;mui(#refreshContainer).pullRefresh().endPullupToRefresh(riqi null);}}, 1000);}tapscroll() 方法的 dates 参数是日期,根据参数判断 dates 是否为 null 或 underfined ,如果为空则获取当前的日期。 注: underfined 必须带上 引号 ,如果不带引号,则会报 underfined is not defined 错误我个人理解的原因是 underfined 本身是可变的对象类型,字符串与它比较不了,需要把变为字符串类型后再进行比较。 // 上拉加载新闻function tapscroll(dates) {// 过往新闻 urlvar url https://news-at.zhihu.com/api/4/news/before/;if (dates null || dates underfined) {// 获取当前日期var now new Date();var year now.getFullYear(); //年var month now.getMonth() 1; //月var day now.getDate();if (month 10) month 0 month;if (day 10) day 0 day;riqi year month day;url riqi;} else {url dates;}mui.ajax(url, {dataType: json, //服务器返回json格式数据type: get, //HTTP请求类型async: false,headers: {Content-Type: application/json},timeout: 10000, //超时时间设置为10秒success: function(data) {//alert(data.stories);// 设置今日热点新闻var centen ;centen div idredian data.date /div;mui.each(data.stories, function(indexs, object) {centen li classmui-table-view-cell mui-media;// 新闻详细信息跳转页面同时把 新闻id 传过去centen a href object.id ;centen img classmui-media-object mui-pull-right src object.images ;centen object.title;centen /a;centen /li;});// 把过往新闻数据集插入容器中document.getElementById(loop_centen).innerHTML centen;// 保存数据集的日期,用于继续查询再往后一天riqi data.date;}});// 返回日期return riqi;}注: 需把 ajax 请求设置为同步请求如果是异步请求,则会导致 riqi 参数为空。 原因: 因为是异步请求success 函数的执行步骤是不按照代码顺序来的数据集还没有有返回回来riqi 参数就已经 先返回 了就算最后数据渲染出来了但是 riqi 参数依然为空所以需把 ajax 请求设置为 同步。 index 页面的代码就是这样有些需要注意的点我也在代码中注释出来了可以根据着进行理解。
5.详细新闻页面
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /title/titlelink hrefcss/mui.min.css relstylesheet /script srcjs/mui.min.js/script/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title详细新闻页面/h1/headerdiv idcontent classmui-content mui-scroll-wrapper/div/bodyscript typetext/javascriptmui.plusReady(function() {// plus.webview.currentWebview 方法个人理解是:获取当前窗口对象var self plus.webview.currentWebview();// 通过窗口对象获取从 index 页面传过来的新闻 idvar url https://news-at.zhihu.com/api/4/news/ self.sid;// 渲染详细新闻onloadXinWen(url);})function onloadXinWen(url) {mui.ajax(url, {dataType: json, //服务器返回json格式数据type: get, //HTTP请求类型timeout: 10000, //超时时间设置为10秒headers: {Content-Type: application/json},success: function(data) {document.getElementById(content).innerHTML object typetext/html data data.share_url width100% height100%/object;}});}/script
/html 6.CSS 的样式
style.mui-slider img{height: 20rem;}.mui-table-view-cell {list-style: none;height: 6.2rem;margin: 0.5rem 0.5rem 0rem 0.5rem;background-color: white;font-size: 1.1rem;font-weight: 400;}.mui-table-view-cell img{width: 5.3rem;height:4.5rem;margin:0.1rem;}#redian{margin:0.9rem 0rem 0.9rem 0.9rem;color: #8F8F94;font-size: 1rem;}/style7.首页效果图 ↓↓↓ 8.详细新闻效果图 ↓↓↓ 好了效果就先放两个其余有待您去揭开。 一个简单的 Mui 项目就是完成了如有学习到麻烦各位大佬个赞分析代码不容易有什么建议或者意见可以提出来我会进行修正。
