微信小程序-制作简易豆瓣笔记
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!--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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | //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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .book-main{ width : 100% ; padding : 20 rpx 0 ; height : 100% ; box-sizing: border-box; } .book-warp{ width : 100% ; clear : both ; overflow : hidden ; } .book-list{ display :inline- block ; float : left ; width : 230 rpx; text-align : center ; margin-right : 10 rpx; margin-bottom : 10 rpx; } .book-name{ display : block ; height : 100 rpx; line-height : 100 rpx; overflow : hidden ; font-size : 40 rpx; } .no-data{ text-align : center ; } |
book.json:
1 2 3 | { "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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .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:
1 2 3 | { "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的请求、请求排错、操作数据、业务处理 这都是我不层涉猎的,这是要让我失业的节奏。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp