微信小程序  简单实例(阅读器)的实例开发


Posted in Javascript onSeptember 29, 2016

今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的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": "最新"
  }]
 },

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

微信小程序  简单实例(阅读器)的实例开发

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

我们打开首页index页面

微信小程序  简单实例(阅读器)的实例开发

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

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

我们打开视图页面

微信小程序  简单实例(阅读器)的实例开发

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

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

     微信小程序  简单实例(阅读器)的实例开发 

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

微信小程序  简单实例(阅读器)的实例开发

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

微信小程序  简单实例(阅读器)的实例开发

具体代码:

//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;
        }
 
        
})

然后about页面

微信小程序  简单实例(阅读器)的实例开发

三,结尾

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

最后,放上程序的源码地址:http://www.cwechat.org/thread-25-1-1.html

Javascript 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
jQuery 特性操作详解及实例代码
Sep 29 #Javascript
JS中常用的正则表达式
Sep 29 #Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 #Javascript
js创建对象几种方式的优缺点对比
Sep 28 #Javascript
AngularJS表单验证中级篇(3)
Sep 28 #Javascript
微信公众号 客服接口的开发实例详解
Sep 28 #Javascript
jQuery解析XML 详解及方法总结
Sep 28 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
基于vue 实现token验证的实例代码
2017/12/14 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Python验证码截取识别代码实例
2020/05/16 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
大学生军训广播稿
2014/01/24 职场文书
教师评语大全
2014/04/28 职场文书
电工技术比武方案
2014/05/11 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
成绩单家长意见
2015/06/03 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python