微信小程序-制作简易豆瓣笔记

demo截图:

图书:

    

电影：

      

共工欲善其事，必先利其器:

小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477656486010

小程序API : https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html?t=20161102

项目文件：

image: 为图片文件夹(用的微信组建里的图片);

pages: 页面:

utils: 模块化js;

app.js:全局启动js(这个demo没有用到);

app.wxss:全局加载css样式;

app.json 初始化的配置文件:

 {
   "pages":[                                     //页面路径
      "pages/book/book",                            //第一个路径默认为首页
      "pages/bookInfo/bookInfo",
      "pages/movie/movie",
      "pages/movieInfo/movieInfo"
   ],
   "window":{                                    //默认也米娜的窗口表现
     "backgroundTextStyle"   : "black",             //下拉背景字体
     "navigationBarBackgroundColor": "#edf4ed",     //导航栏背景颜色
     "navigationBarTitleText": "WeChat",            //导航栏标题文字内容
     "navigationBarTextStyle": "#06bd04",           //导航栏标题颜色，仅支持 black/white
     "backgroundColor"       : "#fff",              //窗口的背景色
     "enablePullDownRefresh" :  false               //是否开启下拉刷新
   },
   "tabBar": {                                   //底部 tab
     "list": [{                                      //tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
       "pagePath": "pages/book/book",                //页面路径，必须在 pages 中先定义
       "iconPath": "image/icon_component.png",       //图片路径，icon 大小限制为40kb
       "selectedIconPath": "image/icon_component_HL.png",  //选中时的图片路径，icon 大小限制为40kb
       "text": "热门图书"                            //tab 上按钮文字
     },
     {
       "pagePath": "pages/movie/movie",
       "iconPath": "image/icon_API.png",
       "selectedIconPath": "image/icon_API_HL.png",
       "text": "热门电影"
     }],
     "color"        : "#000",                         //tab 上的文字默认颜色
     "borderStyle"  : "white",                        //tabbar上边框的颜色， 仅支持 black/white
     "backgroundColor" : "#edf4ed",                   //tab 的背景色
     "selectedColor": "#06bd04",                      //tab 上的文字选中时的颜色
     "position"     : "bottom"                        //可选值 bottom、top
   },
   "networkTimeout": {                             //设置网络超时时间
     "request": 10000,                                //wx.request的超时时间，单位毫秒
     "connectSocket": 10000,                          //wx.connectSocket的超时时间，单位毫秒
     "uploadFile": 10000,                             //wx.uploadFile的超时时间，单位毫秒
     "downloadFile": 10000                            //wx.downloadFile的超时时间，单位毫秒
   },
   "debug": true                                   //设置是否开启 debug 模式
 }

wxss == css

　　新单位：

　　　　rpx ： 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

　　　　　　　 其实小程序会最后会把rpx自己转换成rem;

　　　　样式加载：

　　　　　　1.样式导入 /** app.wxss **/ @import "common.wxss";
　　　　　　2.内联样式 <view style="color:{{color}};" />

　　　　注：1、app.wxss 为整站加载的全局样式、个pages页里的样式都是独立的； 2、css3 选择器支持的不够全，不支持nth-child(n);

wxhtml == html

　　    这个wxhtml 自己做一套标签而且混了组件,js事件于一起;

js

js模块化：exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。在需要使用这些模块的文件中，使用 require(path) 将公共代码引入;

我豆瓣的book的结构：

pages 目录结构:

设置的页面

book          : 豆瓣图书首页;

bookInfo    : 读书的详情页;

movie        : 豆瓣电影页;

movieInfo   : 电影的详情页;

以读书首页为例：

目录

制作的wxhml页面名必须和目录名一致，而且必须要有同命的JS;

book.wxml:

<!--book.wxml-->
<view class="container" >
  <view class="book-main">
    <scroll-view class="scroll-view_H" scroll-x="true" style="height:{{h}}px"  scroll-y="true" bindscrolltolower="scrollBottom" bindscroll="scroll">
      <view class="book-warp">
        <view wx:key="{{}}" wx:for="{{book}}" wx:for-index="idx"  wx:for-key="item" >
          <view class="book-list" data-index="{{index}}"  data-id="{{item.id}}" >
          <!--bindtap="bindViewTap"-->
            <view class="book-pic">
              <image style="width:136rpx;height:96px" src="{{item.images.small}}"></image>
            </view>
            <navigator class="book-name" url="../bookInfo/bookInfo?id={{item.id}}">{{item.title}}</navigator>
          </view>
        </view >
      </view>
      <view hidden="{{hidden2}}" class="no-data">没有数据喽~</view>
    </scroll-view>
  </view>
</view>

book.js:

//book.js
Page({
  data: {
    hidden2:true,  //判断是否没有数据加载;
    total : 0,     //总数;
    page :20,      //加载到第几条数据;
    h:0,           //滚动高度;
    book: []       //数据;
  },
  onShow: function( e ) {
    //设置滚动加载高度;
    var that = this;
    wx.getSystemInfo({
      success : function(res){
         that.setData( {
          h:res.windowHeight
        })
      }
    });

  },
  onLoad: function () {
     var that = this;
     //页面加载请求json数据;
     wx.request({
        url: 'https://api.douban.com/v2/book/search?tag=热门&start=0&fields=id,title,author,images,url',
        header: {
            'Content-Type': 'application/json'
        },
        success: function(res) {
            that.setData({
              book :res.data.books,
              total : res.data.total
            });
        }
     });
  },
  scrollBottom:function() {
    var page = this.data.page + 20;
    var that = this;
    wx.showToast({
      title: '加载中',
      icon: 'loading'
    });
    //判断是否加载还需要加载;
    if( this.data.total >= page ){
        this.setData({
          hidden: false
        });
        wx.request({
          url: 'https://api.douban.com/v2/book/search?tag=top250&start='+ page +'&fields=id,title,author,images,url',
          header: {
              'Content-Type': 'application/json'
          },
          success: function(res) {
              that.setData({
                book:that.data.book.concat(res.data.books),
                page:that.data.page+21,
                hidden: true
              });
              wx.hideToast();
              console.log(that.data.page);
          }
      });
    }else{
        that.setData({
          hidden2: false
        });

    }

  }
})

　book.wxss

.book-main{
    width:100%;
    padding:20rpx 0;
    height:100%;
    box-sizing: border-box;
}
.book-warp{
    width:100%;
    clear:both;
    overflow:hidden;
}
.book-list{
    display:inline-block;
    float:left;
    width:230rpx;
    text-align: center;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
}
.book-name{
    display:block;
    height:100rpx;
    line-height:100rpx;
    overflow: hidden;
    font-size:40rpx;
}
.no-data{
    text-align: center;
}

book.json:

{
    "navigationBarTitleText": "豆瓣读书" //设置导航栏的文字内容;
}

bookInfo读书详情页:

bookInfo.wxml:

<!-- 详情.wxml-->
<view class="container">
    <view data-id="{{info.id}}" bindtap="bindViewTap">
      <view class="info-pic">
        <image style="width:306px;height:432px" src="{{info.images.large}}"></image>
      </view>
      <view class="info-pada">
        <text class="info-name">{{info.title}}</text>
        <view class="info-list">
          <view>
            <text>作者:{{info.author[0]}}</text>
          </view>
          <view>
            <text>出版社:{{info.publisher}}</text>
          </view>
          <view>
            <text>出版时间:{{info.pubdate}}</text>
          </view>
          <view>
            <text>价格:{{info.price}}</text>
          </view>
        </view>
        <view class="info-Intr">
          <view class="info-title">简介</view>
          <text  class="info-txt">{{info.author_intro}}</text>
        </view>
      </view>
    </view>
</view>

bookInfo.wxss:

.info-pada{
    padding:10rpx 20rpx;
}
.info-pic{
    text-align: center;
}
.info-name{
    font-size: 54rpx;
    margin:10rpx;
}
.info-list{
    font-size: 30rpx;
    color:#ccc;
    line-hegiht:50rpx;
}
.info-Intr{
    border-top:2rpx solid #ccc;
    margin:20rpx 0;
}
.info-title{
    padding-top:30rpx;
    font-size:30rpx;
    color:#ccc;
    line-hegiht:50rpx;
}
.info-txt{
    font-size:30rpx;
    line-hegiht:86rpx;
}

bookInfo.js:

 //book.js
 Page({
   data: {
     id : null, //图书id;
     info: {}   //图书详情;
   },
   onLoad: function ( option ) {
     //页面加载时获取传过来的的id;
     this.setData({
       id: option.id
     });
     var id = this.data.id;
     var _this = this;
     var c = 'https://api.douban.com/v2/book/'+id;
     //向豆瓣请求
     wx.request({
       url: c,
       method: 'GET',
       header: {
             'Content-Type': 'application/json'
         },
       success: function(res) {
         _this.setData({
             info:res.data
         });
         //设置导航条的图书名称;
         wx.setNavigationBarTitle({
           title: res.data.title
         });
       }
     })
   }
 })

bookInfo.json:

{
    "navigationBarTitleText": "豆瓣读书" //其实没啥用
}

　电影其实和这个基本一样只不过css样式和豆瓣API返回的json名稍有不同;　

豆瓣：

　　　　读书API : https://developers.douban.com/wiki/?title=book_v2

　　　　电影API : https://developers.douban.com/wiki/?title=movie_v2

我遇到的小程序问题：

　　1.API未定型;

　　2.没有a标签的链接(不算是问题);

　　3.css3样式支持的不全;

　　4.不能引用正常的css样式文件;

　　5.没有DOM操作，所以不能用zepto/jquery(不算是问题);

后记：

　　特别尴尬的开发完这个小demo完了没多久就版本更新了，像之前loading的改成纯js调方法了，还有用到上个版本的编辑器简直了。

　  向对我这中单蠢的切切图仔的难点来自 http的请求、请求排错、操作数据、业务处理 这都是我不层涉猎的，这是要让我失业的节奏。