脚本之家

微信小程序源码!阅读小程序demo源码

上一篇
仿京东首页banner轮播、新闻上下滚动动画实现代码
下一篇
微信小程序之小豆瓣图书源码

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

    

以上就是微信小程序源码!阅读小程序demo源码的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序源码!阅读小程序demo源码 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
仿京东首页banner轮播、新闻上下滚动动画实现代码
下一篇
微信小程序之小豆瓣图书源码

您可能感兴趣的小程序源码教程

小程序源码

从0开始一步一步用Laravel5.2集成原生微信支付

目前微信支付集成到框架里面有太多的坑了,项目中刚好遇到一个,把经验和重要的坑写出来,一步一步从0开始,大家有什么不会的可以留言。1.首先,我们要去官方下载人家做好的DEMO,链接是https://pay.weixin.qq.com/w

小程序源码

微信小程序知乎日报完整版源码

小程序刚刚出来不就就火爆了整个前端圈,咱也不干落后的研究了一下,网上找了个”知乎日报API接口“做了个小项目练手,基本上还算完整的实现了整个项目,欢迎starfork,由于小程序对HTML的不支持,详情页做了些简单的过滤

小程序源码

仿QQ微信小程序!我趟过的微信小程序开发坑

我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人

小程序源码

微信小程序!火车票查询源码

写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了。我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静下

小程序源码

从零开始写个一个豆瓣电影小程序

微信小程序内测至今也有20天左右,也有很多人作出了很多不错的DEMO并发布到github了。前几日看见了豆瓣电影这个demo,感觉很不错,也跟着做了一个,作为复习巩固文档API用。

小程序源码

微信小程序之ES6与事项助手源码

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。好久没有写关于微信小程序的随笔了

小程序源码

微信小程序之知乎日报源码

上一次的《微信小程序之小豆瓣图书》制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识。而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多。在我编写这个DEMO之前,