去年做了一个查询类的小程序，使用的是本地数据集，后期经过爬虫获取了一部分内容的更新，全部导入到本地数据集的时候，超过了微信小程序代码最大限制（2M）。作为生物医学专业的科研狗，对于程序的学习远远不够，倒腾了一下wafer2，没搞定，于是放弃。几个月后无意发现了腾讯云开发平台，无需搭建服务器，即可使用云端能力。于是重新钻研，终于完成了我的第一个云开发小程序。
主界面是这个样子的，结构简单，功能单一。。。
image
下面主要介绍一下云开发的部分：
1. 实现搜索功能的代码
//获得输入信息
JournalNameInput: function (e) {
console.log(e);
this.setData({
journal_name: e.detail.value
})
this.auto()
},
//自动运行匹配本地期刊信息数据
auto: function () {
let inputSd = this.data.journal_name //目前输入框内的信息
let sd = inputSd.toLowerCase(); //转换为小写
let num = sd.length
const journalList = this.data.journalList;
let finalJournalList = []
if (num >= 4) {
let temp = journalList.filter(
item => {
let text1 = item.journal.slice(0, num)
let text = text1.toLowerCase()
return (text && text == sd)
}
)
if (temp[0]) {
temp.map(
item => {
let testObj = {};
testObj.journal = item.journal
testObj.factor = item.factor
finalJournalList.push(testObj)
}
)
this.setData({
completeList: finalJournalList,
})
} else {
return
}
}
},
这样，输入的期刊名称会返回到journal_name中，然后自动调用auto函数，得到匹配的列表completeList。
2. 在渲染层中的列表渲染
<ul wx:for="{{completeList}}" wx:key="index" class="ul">
<li bindtap="bindJournal" data-journal="{{item.journal}}" data-factor="{{item.factor}}" class="li">{{item.journal}} : {{item.factor}}
</li>
</ul>
object对象无法直接输出结果，起初不明白，也倒腾了好一会，后来才找到这样的解决的方法。
以上代码借鉴 微信小程序 实现城市名称拼音搜索框。
3.云开发的实现
云开发平台包括有数据库、云函数、存储和基本的统计分析等功能，不需要太多的配置，就可以使用。开通云开发后初始默认可拥有最多两个环境。在实际开发中，官方建议每一个正式环境都搭配一个测试环境。
本小程序用到的仅仅是数据库部分，可以先了解关于数据库读取的介绍。配置的部分按照官方的教程即可。
假设有一个环境名为 test，用做测试环境，那么可以如下获取测试环境数据库：
const db = wx.cloud.database({
env: 'test' //实际上是test的**环境id**，而不是名字
})
然后是数据的查找：
db.collection('sci').where({
journal:journal
}).get().then(res => {
this.setData({
queryResult: res.data,
})
console.log('[数据库] [查询记录] 成功: ', res)
})
queryResult获得的也是一个对象（object）数据，通过上面介绍的方式展现出结果。
关于数据的录入
可以使用json或者csv格式导入。我使用的是csv。
导入数据.jpg
数据的格式是这样的，第一行为标题，下面为各项的内容。在导入的时候可能会遇到乱码的问题，可以通过另存为utf-8编码的csv。
导入数据2.jpg
4.参数传递问题
在第1步骤中，检索的期刊，绑定了bindtap="bindJournal"这样一个事件，点击期刊就可以跳转到期刊详情页面，这里需要将期刊名称参数传递给新页面的journal.js中。bindJournal函数代码如下
//页面跳转，传递期刊参数
bindJournal: function (e) {
var journal_trans = e.currentTarget.dataset.journal //获得点击的期刊名称
console.log(e.currentTarget)
var app = getApp();
{
app.requestdetailjournal = journal_trans;
}
wx.navigateTo({
url: "../journal/journal"
})
},
然后，在journal.js中接收传递的数据：
onLoad: function (options) {
var journalDetail = getApp().requestdetailjournal;
this.setData({
journalDetail:journalDetail,
})
console.log(journalDetail);
this.auto1()
},
在这里，同样使用 this.auto1()来触发云开发数据库的读取。就得到以下数据结果：
期刊详情页.jpg
总结遇到的问题：
- 由于本地数据较多，微信小程序代码最大限制（2M）——使用云开发控制台的数据库。
- 上传csv到数据库的时候乱码问题——通过转换为utf-8编码的csv上传。
- 测试环境的存储桶被我从腾讯云网页删了，导致不能上传csv文件 ——目前不知道怎么解决，只能另外开通一个环境了，在数据库里添加了两个集合，供测试和正式发布用。
- 通过调用集合上的 where 方法可以指定查询条件，再调用 get 方法即可只返回满足指定查询条件的记录，获得的可能是多可数据的集合，不能直接显示集合中的内容——通过在渲染层来处理，打印集合结果。
- 参数传递问题——通过pp()方法与getApp()方法来解决。
- 第一次写这种技术类的文章，代码理解的不好，可能说的不够清楚——多看多写咯
最后，扫码来看一下实际效果吧
小程序码.jpg
网友评论