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


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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Node 自动化部署的方法
Oct 17 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
如何理解Vue前后端数据交互与显示
May 10 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php数组查找函数总结
2014/11/18 PHP
php搜索文件程序分享
2015/10/30 PHP
php 中的closure用法详解
2017/06/12 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python使用wxPython实现计算器
2018/01/30 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
中班开学寄语
2014/04/04 职场文书
新闻稿件写作范文
2015/07/18 职场文书
Python基础知识之变量的详解
2021/04/14 Python
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers