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


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字符串完全替换函数分享
Dec 03 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
react 路由Link配置详解
Nov 11 Javascript
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
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php查询操作实现投票功能
2016/05/09 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
Vue实现日历小插件
2019/06/26 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python删除文件示例分享
2014/01/28 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Python爬取梨视频的示例
2021/01/29 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
会话Bean的种类
2013/11/07 面试题
往来会计岗位职责
2013/12/19 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
消防验收申请报告
2015/05/15 职场文书
就业证明函
2015/06/17 职场文书
生日寿星公答谢词
2015/09/29 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers