微信小程序-小说阅读小程序实例(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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
Javascript中的delete介绍
Sep 02 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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
各种战术和打法的原创者
2020/03/04 星际争霸
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中删除文件的程序代码
2011/03/13 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python安装教程
2018/02/28 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
学习python需要有编程基础吗
2020/06/02 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
高中毕业生自我鉴定例文
2013/12/29 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
个人培训总结
2015/03/05 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书