微信小程序-小说阅读小程序实例(demo)


Posted in Javascript onJanuary 12, 2017

今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下。

一、先来上图:

微信小程序-小说阅读小程序实例(demo)

二、然后下面是详细的说明

首先先说下边的tabBar,项目采用json格式的数据配置,不得不说,现在这个是趋势,.net core的配置也是这种方式了(暴露我是.net 阵营了)。

在这里好多同学会发现好多颜色的配置都不管用,是的,现在有效的颜色是有限制的,具体的大家可以进入官方文档去查看。需要几个tabBar,就在list里面写几个,本篇问是三个,所以,你看了三个。上面的iconPath那就是tabBar的图标了,这个大小也是有限制的,40kb。然后,pagePath呢,就是此tabBar对应的页面链接。text就是限制内容,这里不多说了。

"tabBar": {

  "color": "#dddddd",

  "selectedColor": "#d92121",

  "borderStyle": "white",

  "backgroundColor": "#fff",

  "list": [{

   "pagePath": "pages/index",

   "iconPath": "images/main.png",

   "selectedIconPath": "images/main-s.png",

   "text": "主页"

  },{

   "pagePath": "pages/layout/hot",

   "iconPath": "images/hot.png",

   "selectedIconPath": "images/hot-s.png",

   "text": "最热"

  },{

   "pagePath": "pages/layout/new",

   "iconPath": "images/new.png",

   "selectedIconPath": "images/new-s.png",

   "text": "最新"

  }]

 },

打开项目代码目录,如下:

微信小程序-小说阅读小程序实例(demo)

这里发现样式和wxml以及js文件全是同名的,这是默认写法,这样默认三个文件就关联了。这又叫做:默认大于配置。

我们打开首页index页面

微信小程序-小说阅读小程序实例(demo)

可以看到上面的页面生命周期,我们可以在事件中写我们自己要处理的事件。

其中getApp();方法获取全局实例。

我们打开视图页面

微信小程序-小说阅读小程序实例(demo)

这里看到箭头指向的 wx:for=“”,这个是一个出来数组或列表对象的循环方法,而item是默认(又是默认)的单个列表元素。用不不想用item也可以起别名。

navigator就是导航标签了,这里,类似于html中的<a>标签,就不在说了。点击navigator的内容页面跳转对应页面,同样是用url传递数据。

微信小程序-小说阅读小程序实例(demo)

我们可以看到后台的代码:

微信小程序-小说阅读小程序实例(demo)

数据可以通过url传递,目标页面通过onLoad方法中的参数( 对象)获取。这里还可以看到书的详情是通过全局getApp获取全局实例,获取数据。这个数据就是在全局app.js里面,如下图:

微信小程序-小说阅读小程序实例(demo)

具体代码:

//app.js

App( {

  getBanner:function(){

    var bannerUrl=["../images/banner.jpg"];

    return bannerUrl;

  },

  getOneBook:function(id){

    var abook;

   var books = [

          {  id:"1",

            bookUrl:"../images/img1.jpg",

            bookName:"西方哲学史",

            bookInfor:"关于哲学"

          },

          {  

            id:"2",

            bookUrl:"../images/tmd.jpg",

            bookName:"塔木德",

            bookInfor:"关于信仰"            

          },

          {

            id:"3",

            bookUrl:"../images/holy.jpg",

            bookName:"圣经",

            bookInfor:"关于信仰" 

          },

          {

            id:"4",

            bookUrl:"../images/yuz.jpg",

            bookName:"果壳中的宇宙",

            bookInfor:"关于科学"

          },

          {

            id:"5",

            bookUrl:"../images/dream.jpg",

            bookName:"理想国",

            bookInfor:"关于哲学"

          },

          {

            id:"6",

            bookUrl:"../images/out.jpg",

            bookName:"失控",

            bookInfor:"关于经济"

          }

          ];

        for(i=0;i<books.length;i++){

          if(books[i].id == id){

            abook = books[i]; 

          }

        }

         return abook;

 },

  getBoookList:function(){

    var indexList = [

          {  id:"1",

            bookUrl:"../images/img1.jpg",

            bookName:"西方哲学史",

            bookInfor:"关于哲学"

          },

          {  

            id:"2",

            bookUrl:"../images/tmd.jpg",

            bookName:"塔木德",

            bookInfor:"关于信仰"            

          },

          {

            id:"3",

            bookUrl:"../images/holy.jpg",

            bookName:"圣经",

            bookInfor:"关于信仰" 

          },

          {

            id:"4",

            bookUrl:"../images/yuz.jpg",

            bookName:"果壳中的宇宙",

            bookInfor:"关于科学"

          },

          {

            id:"5",

            bookUrl:"../images/dream.jpg",

            bookName:"理想国",

            bookInfor:"关于哲学"

          },

          {

            id:"6",

            bookUrl:"../images/out.jpg",

            bookName:"失控",

            bookInfor:"关于经济"

          }

          ];

 

           return indexList;

        }
       
})

没多少东西,有兴趣可以下载源码查看,下面放源码地址。

三、最后

最后,放上程序的源码地址:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
js实现点击生成随机div
Jan 16 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 #Javascript
JS实现仿百度文库评分功能
Jan 12 #Javascript
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php explode函数实例代码
2012/02/27 PHP
深入php多态的实现详解
2013/06/09 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
js left,right,mid函数
2008/06/10 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Django实现组合搜索的方法示例
2018/01/23 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python 图片去噪的方法示例
2019/07/09 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
应聘医药销售自荐书范文
2014/02/08 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
给校长的一封建议书
2014/03/12 职场文书
志愿者个人总结
2015/03/03 职场文书