查新华 發表於 2019-7-11 17:17:00

基于小程序开发的藏书馆

<h3 id="1小程序的发展">1、小程序的发展</h3>
<p>jsbridge -&gt; js-sdk -&gt; 小程序</p>
<ul>
<li>腾讯内部使用的jsbridge，被外部发现，并使用，逐渐成为微信中网页的事实标准。后提供了外部使用的js-sdk，之后为了提供更丰富的能力，提供小程序。</li>
<li>小程序中js的组成：<br>
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。</li>
</ul>
<h3 id="2后端技术">2、后端技术</h3>
<p>后端可通过微信提供的云服务和自己搭建服务端来实现，两者的区别如下：<br>
<img style="width: 400px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171017703-1981091493.png" alt="真棒" align="center">      <img style="width: 300px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711173545468-113092440.png" alt="真棒" align="center"></p>
<p>可以看到，使用自己搭建的服务端，需要一定的运维能力，需要提供数据库、https接口等，成本比较大。对于个人开发者，或者没有相关服务器、运维能力的团队，可以使用云服务。</p>
<h3 id="3云开发的流程">3、云开发的流程</h3>
<p>在下面的demo事例中，将提供相应云开发具体操作方式。<br>
<img style="width: 500px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171124561-31273005.png" alt="真棒" align="center"></p>
<h3 id="4藏书馆demo体验">4、藏书馆demo体验</h3>
<p>demo功能说明：</p>
<p>提供了书本的扫码、查询录入功能，将家中的图书管理起来。其中由于豆瓣的书本查询api关闭，最终通过网页爬虫，实现在线书本信息收集的工作。通过将书本信息存入提取，录入到数据库中，形成自己的在线书库。</p>
<p>功能部分：</p>
<ul>
<li>1、微信扫码识别条形码 or 手动输入作者、书名、isbn查询</li>
<li>2、亚马逊网页爬虫</li>
<li>3、数据录入数据库中</li>
</ul>
<p>本示例提供了两种服务端，nodejs + mongodb自建；及云服务。将提供两者的实现方法。</p>
<p>上截图：</p>
<p><img style="width: 300px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171148252-927646947.jpg" alt="真棒" align="center">       <img style="width: 300px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171156425-1250315190.jpg" alt="真棒" align="center"></p>
<h4 id="41微信扫码识别条形码">4.1、微信扫码识别条形码</h4>
<pre><code>wx.scanCode({
success (res) {
    that.searchBookList(res.result);
},
fail(err) {
    console.log('fail', err);
}
})；
</code></pre>
<p>微信提供条形码识别的api，直接调用即可～～生成以后，通过亚马逊网页爬虫爬取信息。</p>
<h4 id="42亚马逊网页爬虫">4.2、亚马逊网页爬虫</h4>
<p>由于豆瓣的图书api禁用，只能通过网页爬虫的方式去获取相关的信息，对比了豆瓣、当当、京东、亚马逊、几个在线图书馆，最终选择了亚马逊。区别对比：</p>
<img style="width: 800px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171212350-951144329.png" alt="真棒" align="center">
<p>从对比表格可以看出，仅仅亚马逊可以作为图书信息收集的渠道，但也会出现不稳定的情况，有时候需要多次请求才可取到。豆瓣做了相应的规避爬虫的处理，书本信息无法读取到（爬了几次，ip被豆瓣放入了黑名单。。。）。当当、京东比较尴尬的点是，它的查询结果包含其他第三方书店的结果信息，导致一个isbn对应很多的结果记录，在后面做作者、书名的查询扩展时，比较难过滤，所以丢弃。在线图书馆情况就更多，信息杂乱，书目不全等，丢弃。综合以上，最终选用亚马逊网页来实现书本信息的收集。</p>
<p>包含两个爬虫:</p>
<ul>
<li>1、根据作者、书名、isbn查询书目列表；</li>
<li>2、step1 里的亚马逊详情链接，跳转到详情页，读取具体书本详细信息。</li>
</ul>
<p><strong>step1: 搜索结果爬虫</strong></p>
<pre><code>// 需要使用encodeURI进行编码，处理中文问题
const bookInfoDomain = 'https://www.amazon.cn';
rp(bookInfoDomain + '/s?k=' + encodeURI(event.params.searchValue + '&amp;i=stripbooks')).then(html =&gt; {
        return getBookBaseInfo(html);
}).catch(err =&gt; {
        console.log(err)
});
</code></pre>
<p>书本查询结果列表的搜索结果，（搜索书名“自立”的结果）如图所示：<br>
<img style="width: 500px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171229311-1408823200.png" alt="真棒" align="center">   <img style="width: 300px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171239972-1717290072.jpg" alt="真棒" align="center"></p>
<p>左边为亚马逊的图书列表，其中红线框中的信息为需要提取的图书信息；右边为提取相关信息后，在小程序端展现的搜索结果列表。<br>
通过分析结果页的dom结构，来提取相关信息，代码：</p>
<pre><code>let bookHtmlList = [];
if (htmlString) {
        let $ = cheerio.load(htmlString);
        $('.s-search-results .s-result-item').each((i, e) =&gt; {
                let href = $(e).find(" a").attr('href');
                let logo = $(e).find(".s-image").attr('src');
                let name = $(e).find("h2").text();
                let price = ($(e).find(".a-spacing-top-small .a-offscreen").text() || '').replace(/[^0-9|\.]/ig,"");

                bookHtmlList.push({......}); // 省略
        })
}
return bookHtmlList;
</code></pre>
<p>使用cheerio来解析html串，其使用jquery的核心实现，可在服务端，直接像jquery一样使用。在列表页提取了href，为书本详情页的跳转做准备。</p>
<p><strong>step2:详情页爬虫</strong></p>
<p>书本详情的结果如图所示：</p>
<p><img style="width: 400px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171256072-1181220671.png" alt="真棒" align="center">    <img style="width: 300px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171304557-1383617021.jpg" alt="真棒" align="center"></p>
<p>左图为亚马逊的图书列表，右图为小程序收集到相关信息的展示页：</p>
<p>总结：爬虫的重点为 找到核心、有效信息的网页，再使用cheerio进行解析，最后按照需要，使用类jquery api提取信息即可。</p>
<h4 id="43数据录入数据库中">4.3、数据录入数据库中</h4>
<p>这里提供了两种服务提供方式：</p>
<ul>
<li>a、本地nodejs + mongodb</li>
<li>b、小程序自带云服务</li>
</ul>
<h5 id="本地nodejs--mongodb">本地nodejs + mongodb</h5>
<img style="width: 800px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171323657-170883796.png" alt="真棒" align="center">
<p>如上图，为nodejs + mongodb的服务端代码结构，通过提供api的方式，提供数据服务。当然，上线之后，需要提供ssh证书，仅https协议的访问才被允许；在小程序的配置当中，需要将相关的服务域名进行配置（另外，小程序没有cookie、session的机制，如果服务端是做迁移的，需要在这方面做下融合）。</p>
<h5 id="小程序自带云服务">小程序自带云服务</h5>
<p>云服务的部署、运维，现在就看看具体如何操作：</p>
<ul>
<li>
<p>step1:生成云开发的账号，通过小程序的devtools，点击"云开发"去生成，如下图所示；<br>
<img style="width: 700px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171341961-814519130.png" alt="真棒" align="center"></p>
</li>
<li>
<p>step2:创建云开发目录，一般与小程序项目同级；</p>
</li>
<li>
<p>step3:新建云函数，在生成的云函数目录内(该目录为云函数的名称)，进行npm install，安装相关的组件；（小程序通过云函数，与云服务进行交互）<br>
<img style="width: 700px; height: auto" src="https://img2018.cnblogs.com/blog/1094893/201907/1094893-20190711171404312-630501867.png" alt="真棒" align="center"></p>
</li>
<li>
<p>step4:进行相关云开发的配置，配置方法如下：</p>
<p>a、project.config.json里添加：</p>
<pre><code>{"cloudfunctionRoot": "cloudfunctions/",}
</code></pre>
<p>b、app.js的配置</p>
<pre><code>// 进行云服务的初始化
onLaunch: function () {
        if (!wx.cloud) {
                console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
                wx.cloud.init({
                        traceUser: true,
                })
        }
        ......
}
</code></pre>
</li>
<li>
<p>step5: 云函数使用</p>
<p>a、调用云函数</p>
<pre><code>// 亚马逊查找相应的书本
wx.cloud.callFunction({
        name: 'bookinfo',
        data: {
                type: 'search',
                params: {
                        searchValue
                }
        },
        success: data =&gt; {
              ......
        },
        fail: err =&gt; {
           ......
        }
})
</code></pre>
<p>b、云函数接收</p>
<pre><code>        // 云函数入口函数
        exports.main = async (event, context) =&gt; {
                ......
                return rst;
        }
</code></pre>
<p>其中event的属性与data一样，可通过event，使用data中传递的值信息。</p>
</li>
<li>
<p>step6: 数据库的使用</p>
<pre><code>        const bookStoreDb = cloud.database();
        const bookCollection = bookStoreDb.collection('book');
        const _ = bookStoreDb.command
        let whereInfo = {};
if (event.params.searchValue) {
    whereInfo = _.or([
      {
      author: {$regex: '.*'+ event.params.searchValue}
      },
      {
      isbn: {$regex: '.*'+ event.params.searchValue}
      },
      {
      name: {$regex: '.*'+ event.params.searchValue}
      },
    ])
}

// 一次最多查询100个记录，total大于100，需要多次请求，拼合
rst = await bookCollection.where(whereInfo).get().then(res =&gt; {
        ......
});
return rst;
</code></pre>
</li>
</ul>
<h3 id="5其他">5、其他</h3>
<ul>
<li>基础布局方法flex<br>
阮一峰的博客：flex布局介绍http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</li>
<li>js事件循环机制<br>
之前有写过相关博客： https://www.cnblogs.com/hity-tt/p/6733062.html</li>
<li>样式库<br>
小程序的ui组件库比较多，相关的介绍如下：<br>
https://www.jianshu.com/p/4182f4a18cb6<br>
其中的weUI是微信团队开发的，相关使用说明如下：<br>
https://www.jianshu.com/p/010cea4202b8</li>
</ul><br><br>
来源：https://www.cnblogs.com/hity-tt/p/11171355.html
頁: [1]
查看完整版本: 基于小程序开发的藏书馆