微信小程序-制作简易豆瓣笔记
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 初始化的配置文件:
1 { 2 "pages":[ //页面路径 3 "pages/book/book", //第一个路径默认为首页 4 "pages/bookInfo/bookInfo", 5 "pages/movie/movie", 6 "pages/movieInfo/movieInfo" 7 ], 8 "window":{ //默认也米娜的窗口表现 9 "backgroundTextStyle" : "black", //下拉背景字体 10 "navigationBarBackgroundColor": "#edf4ed", //导航栏背景颜色 11 "navigationBarTitleText": "WeChat", //导航栏标题文字内容 12 "navigationBarTextStyle": "#06bd04", //导航栏标题颜色，仅支持 black/white 13 "backgroundColor" : "#fff", //窗口的背景色 14 "enablePullDownRefresh" : false //是否开启下拉刷新 15 }, 16 "tabBar": { //底部 tab 17 "list": [{ //tab 的列表,详见 list 属性说明,最少2个、最多5个 tab 18 "pagePath": "pages/book/book", //页面路径，必须在 pages 中先定义 19 "iconPath": "image/icon_component.png", //图片路径，icon 大小限制为40kb 20 "selectedIconPath": "image/icon_component_HL.png", //选中时的图片路径，icon 大小限制为40kb 21 "text": "热门图书" //tab 上按钮文字 22 }, 23 { 24 "pagePath": "pages/movie/movie", 25 "iconPath": "image/icon_API.png", 26 "selectedIconPath": "image/icon_API_HL.png", 27 "text": "热门电影" 28 }], 29 "color" : "#000", //tab 上的文字默认颜色 30 "borderStyle" : "white", //tabbar上边框的颜色， 仅支持 black/white 31 "backgroundColor" : "#edf4ed", //tab 的背景色 32 "selectedColor": "#06bd04", //tab 上的文字选中时的颜色 33 "position" : "bottom" //可选值 bottom、top 34 }, 35 "networkTimeout": { //设置网络超时时间 36 "request": 10000, //wx.request的超时时间，单位毫秒 37 "connectSocket": 10000, //wx.connectSocket的超时时间，单位毫秒 38 "uploadFile": 10000, //wx.uploadFile的超时时间，单位毫秒 39 "downloadFile": 10000 //wx.downloadFile的超时时间，单位毫秒 40 }, 41 "debug": true //设置是否开启 debug 模式 42 }
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:
1 //book.js 2 Page({ 3 data: { 4 id : null, //图书id; 5 info: {} //图书详情; 6 }, 7 onLoad: function ( option ) { 8 //页面加载时获取传过来的的id; 9 this.setData({ 10 id: option.id 11 }); 12 var id = this.data.id; 13 var _this = this; 14 var c = 'https://api.douban.com/v2/book/'+id; 15 //向豆瓣请求 16 wx.request({ 17 url: c, 18 method: 'GET', 19 header: { 20 'Content-Type': 'application/json' 21 }, 22 success: function(res) { 23 _this.setData({ 24 info:res.data 25 }); 26 //设置导航条的图书名称; 27 wx.setNavigationBarTitle({ 28 title: res.data.title 29 }); 30 } 31 }) 32 } 33 })
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的请求、请求排错、操作数据、业务处理 这都是我不层涉猎的，这是要让我失业的节奏。
