微信小程序--每周图书推荐demo

这是我个人的第一个原生微信小程序，作为一枚萌新，自己没有前端经历，所以代码很混乱，界面很简单，难度也很低，主要用来记录自己学小程序过程中遇到的问题。

一、 先上预览图

左右滑动切换每周推荐的图书，点击封面进入图书详情页面，点击tabBar上的关于可进入关于页

 

 

二、详细说明

• 创建项目

wxml和wxss都是对渲染层的描述，脚本文件则是对页面逻辑的描述。

weapp-book
   images                   // 存储图片
    pages                   //页面
        about               // 关于页
            about .js       //js文件
            about .wxml     //页面结构文件
            about .wxss     //样式表
        detail              //详情页
            detail.js
            detail.jason
            detail.wxml
            detail.wxss
         weekly              //推荐页
             weekly.js
             weekly.json
             weekly.wxml
             weekly.wxss
    app.js                   //系统的方法处理文件
    app.json                 //系统全局配置文件
    app.wxss                 //全局样式表

•  app.json

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

tarbar

设置两个页面，一个weekly页即每周推荐页和一个abouty，需要几个tarbar就在list里面增加（最少两个，最多5个），list属性是一个对象数组，pagePath对应tabBar对应的页面路径，iconPath对应tabBar图标。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

注意：在app.json中配置的属性会被子window属性覆盖

 

{
  "pages": [
    "pages/weekly/weekly",
    "pages/about/about",
    "pages/detail/detail"
  ],
  "sitemapLocation": "sitemap.json",
  "tabBar":{
    
    "list":[
      {"text":"图书推荐",
     
      "pagePath":"pages/weekly/weekly",
      "iconPath":"image/icon/i1.png",
      "selectedIconPath":"image/icon/i2.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "image/icon/i3.png",
        "selectedIconPath": "image/icon/i4.png"
      }
      

    ],
    "color": "#42BD56",
    "selectedColor":"white"

  },
  "window":{
    "navigationBarTitleText": "好书推荐",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#42BD56"
  }
}

• app.wxss

设置全局公共样式表,界面采用弹性盒子布局，采用rpx响应式长度单位，即1rpx=0.5px=1物理像素

 

 

• about.wxml

这里用<navigator>组件实现页面跳转，用url传递数据，跳转的页面在tabbar上需要将open-type设置为switchTar，点击“每周推荐”可以跳转到weekly页

 

<view class="container">
 <image src="/image/gg.jpg" class="about-banner"></image>
 <text class="info">每周好书推荐</text>
<view>
 
 <navigator url="/pages/weekly/weekly"  open-type="switchTab" style="display:inline" hover-class="cc" class=".cf">每周推荐</navigator>
 <text>每天给你一本好书</text>
</view>
 <text>这是我做的第一个小程序，功能很简单，只是用来练练手</text>
</view>

•  weekly.wxml

用<view>组件将整个页面块状结构，使用<swiper>组件实现左右滑动切换不同的推荐，<swiper>组件有值得注意两点：

1） swiper内只可放置<swiper-item/>组件，否则会导致未定义的行为。

2）swiper-item组件仅可放置在swiper内，宽高自动设置为100%。

用wx:for=""方法将数据循环遍历渲染到视图层 使用 wx:if="{{condition}}" 进行条件渲染，当condition为true时，携带 wx:if 这个可知属性的标签才会被渲染显示；

这里还用了自定义用户属性，自定义属性语法以data-开头，自定义用户数据最后被封装到事件对象之中，而且作为currentTarget中的dataset；

用bindtap="f1"给tab事件绑定一个数据处理函数f1,f1是在这个button所在的页面所在的页面对象中定义的，当这个button元素被点击时候，它上面会触发一个tab事件，框架就会将这个事件发生时候的信息封装到事件对象中，然后将事件对象传递到这里绑定的事件处理函数f1中处理 

注意： bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

 

 

•  weekly.js

 

数据区

 一开始做出来的weekly页里的信息只是在wxml里进行硬编码，但是每周推荐的电影是不断变化，这个缺点是小程序并不能动态的从服务器获取，然后渲染到小程序的视图当中进行显示，此时就需要学会数据绑定，在小程序框架中，每个页面所需要的各种数据，都是集中在这个页面所注册的页面对象中定义。通过调用page()函数来给这个页面注册这个页面所需要的页面对象 ，页面对象data属性里 thismovie作为分量属性即内部状态变量 ，这样在开发者工具调试器appdata可以对内部变量进行查看和修改。

 

系统页面事件

.onLoad页面加载时触发，一个页面只会调用一次，可以在onload的参数中获取当前打开页面路径的参数

onShareAppMessage 监听用户点击页面内转发按钮或者右上角“转发”按钮的行为，并自定义转发内容

通过点击weekiy页能显示出对应图书详情信息，需要对detail页进行参数化处理，将视图层的图书id传递到它所调用的逻辑层的事件处理函数,前面我们在wxml自定义了用户属性data-book-id来绑定对应的图书id以记录图书的id。这样currentTarget中的dataset有了bookId属性，这样也关联了原本weekly.js中定义的id,当事件处理函数需要当前组件的关键数据的时候，我们可以这些关键数据在这个组件上额类似data-这种方式声明的自定义属性进行设置，这些自定属性会在事件发生的时候被抽取出来封装到事件对象中传递给对应的事件处理函数进行使用，所以我们需要调用的话就是 event.currenttarget.dataset.bookId就能取到bookId所对应的id值。

Page({

data:{

thisWeeklybook:[

{ name: "生活研究",

comment: "隐秘、缠绕。一个自我回溯、向他人开放、与生活沟通、充满反讽张力的世界。",

imagePath: "/image/jf.jpg",

rating: 8.7,

id: 34792458

},

{

name: "统治世界",

comment: "感觉有很多地方和宋鸿兵的货币战争是一个意思，不过这个加上了种族TS和灭绝政策。感觉还是有那么一点意思的。",

imagePath: "/image/cc.jpg",

rating: 5.3,

id: 5974574

},

{

name: "异类",

comment: "所有的成功人士都是幸运的，外部因素的综合大于个人努力，但是个人努力也不可或缺。 ",

imagePath: "/image/gc.jpg",

rating: 8.0,

id: 25863621

}

],

count: 0,

},

onLoad: function (option) {

this.setData({

currentIndex: this.data.thisWeeklybook.length - 1

})

},

f0: function(event){

this.setData({

currentIndex: this.data.thisWeeklybook.length - 1

}

)

},

f1: function(event){

var books = event.currentTarget.dataset.bookId

console.log(books)

wx.navigateTo({

url: '/pages/detail/detail?id=' + books,

})

},

onShareAppMessage: function(){

return{

title: "每周推荐"

}

}

})

•  detail.js

需要将weekly页的id参数传递给detail页，我们可以用onLoad: function (options) {} ,options为页面跳转所带来的参数

通过wx.request来调用豆瓣的获取电影条目信息API,由于官方的API文档已经下线，豆瓣 API 服务可能计划对外关闭。我调用了一个第三方的豆瓣 API 的代理服务，不需要api key。注意：网络请求的referer header不可设置

一开始在success中使用this.setData总是报错，原来success方法指向闭包，所以this属于闭包，由此在success回调函数里不能直接使用this.setDat().如果要使用，可以在闭包之外先把this赋值给另一个变量。

 

 

 三、最后

 

•  icon图来源：https://icons8.com/
• 豆瓣api代理服务：https://douban.uieee.com/
• 源码地址：https://github.com/mxy62/weapp-book