使用 WebApi 交互打造原生的微信小程序 - 图灵小书架
目录
介绍
源码地址
扫一扫体验
代码分析
其它相关信息（互联网搜集）
介绍
定时抓取图灵社区官网的首页、最热、推荐和最新等栏目的相关图书信息进行展示，并且可以下载相关的 PDF 进行查阅...
主要功能
源码地址
源码地址1：https://github.com/liqingwen2015/ituring_small_bookshelf
源码地址2：https://gitee.com/liqingwen/ituring_small_bookshelf
使用说明：
打开微信开发者工具
路径引入 src 文件夹
输入 APPID 和文件名即可
不需要配置服务器地址，自动连接接口资源
不过使用 git，我有一个这样的担忧：用了5年GIT，原来分支合并是这样协作的。假设团队3个人。 领导开创一个分支。 我和另外一个同事在领导的分支下创建一个新分支。 然后 我们各自开发。 有新功能就 去拉取 并将领导的分支合并到自己的分支。 这样，我改的东西，和同事改的不会冲突。最后，GIT 导出我们的差异，通过 QQ 传给领导。
-- 引用 https://my.oschina.net/lcsoft/tweet/17666900
扫一扫体验
可以通过小程序（已上线）二维码扫一扫，也可以在小程序中搜一下【图灵小书架】进行体验：
它真的非常小（轻量、快、占用内存小），接近 10 个页面所占用的空间大小（代码+图片等）才100KB+。
代码分析 结构简析
config 文件夹（可选）：存放配置信息；
images 文件夹（可选）：存放图片；
pages 文件夹：存放每个页面信息；
utils 文件夹（可选）：工具类存放；
app.js：项目的入口文件，如包含程序生命周期定义（页面初始化、页面渲染完成、页面显示、页面隐藏和页面关闭等）；
app.json：全局配置文件，如页面路径， tabBar（导航、图标和选中样式等）；
app.wxss：全局样式配置文件，如每个页面可以重用的样式；
project.config.json：程序的配置文件，如项目名称、微信开发工具配置（是否校验合法域名、是否压缩和样式自动补全等）；
Pages 文件夹简析
这里通过 detail （图书详情页）文件夹进行解析，从图中可以看到的文件夹中包含：
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
detail.wxml：
<view> <block wx:if="{{showLoading}}"> <view class="donut-container"> <view class="donut"></view> </view> </block> <block wx:else> <view class="book-container bg-white"> <view class="book-info"> <image class="book-image" mode="scaleToFill" src="{{book.imageUrl}}"></image> <view class="book-desc"> <text class="book-main-text">{{book.name}}</text> <text class="book-text">{{book.author}}</text> <text class="book-text">￥ {{book.price}} 元</text> <view class="loading-container" wx:if="{{downloading}}"> <progress percent="{{downloadPercent}}" stroke-width="6" activeColor="#1aad19" backgroundColor="#cdcdcd" show-info /> </view> </view> </view> </view> <view class="comment-container"> <view class="comment-title"> <text>========== 简介 ==========</text> </view> <view class="comment-area"> <block> <view class="comment-placeholder"> <text>{{book.intro}}</text> </view> </block> </view> </view> <!-- bottom button --> <view class="fixed-bottom block-full-width flex-container bg-white" wx:if="{{isAllowDownload}}"> <button class="full-button" type="primary" catchtap="download" data-id="{{bookInfo.id}}" data-name="{{bookInfo.name}}"> 随书下载<text style="font-size:26rpx; color:gray">（已存在，则立即打开）</text> </button> </view> </block> </view>