首页 微博热点正文

小程序开放了云开发才能,为开发者供给了一个能够很快速构建小程序后端效劳的才能,作为一名对新凤为后技能不倒腾不杰理通的波浪理论快的前端,对此也是很感兴趣的。

Taro 是凹凸实验室推出的,依据React 语法标准的多端开大唐白衣战神发解决方案,较之于mpvue或许wepy,因为年青,坑还比较多,可是很合适我这种倾向用React 开发的人。

我结合这两者,运用cheerio和superagent 抓取了用例.jp, 开发了一个《日语用例帮手》。

1.云开发篇

1.1 环境建立

云开发能够经过下列两种办法创立: 1.运用quickstart(云开发快速发动模版)创立项目:

这种办法会在目录下一起创立名为miniprogram ,带有云开发调用典范的小程序根底模板和名为cloudfuntions 的寄存云函数的目录, 由此即可开端全新的项目。

2.依据现有的小程序运用云开发:

在小程序目录下创立一个文件夹作为你的云函数目录,然后在project.config.json 文件中新黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候增字段"cloudfunctionRoot": "你的云函数目录",即能够在微信开发者东西中看到目录的图标变成了云,在此目录下创立云函数即可;

1.2 云函数编写

运用微信开发者东西在云函数目录下创立一个云函数时,会依据称号创立一个目录,目录中包括一个index.js 和package.json。

在小程序中运用如下办法调用云函数:

wx.cloud.敬爱琳callFunction({
name: '云函数称号',
data: {
key1: 'value1',
key2: 'value2'
}
}).then((res) => {
console.log(res);
}).catch((e) => {
console.log(e);
});

index.js的进口函数如下所示:

//云函数进口函数
ex鬼心莲ports.main = async (event, context) => {
// 参数获取在event 中获取,如运用上面的调用函数后,获取data运用 event.key1、event.key2即可
const { key1, key2 } = event;
return { query: { key1, key2 } }
}

每个云函数可视为一个独自的效劳,假如需求装置第三方依靠,只需求在该目录点击右键,挑选 在终端中翻开, 并 npm install依靠即可。迈克尔杰克逊thriller黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候

需求留意的是,每个云函数都是独立的,所需求的依靠都需求在对应的目录下进行 npm install,但这样就会使得项目变得非常巨大且不高雅。因而,接下来我介绍一下t茸毛币cb-router。重生之炮灰乡村媳

1.3 运用tcb-router办理路由

tcb-router 是腾讯云团队开发的,依据 koa 风格的小程序云开发云函数轻量级类路由库,首要用于优化效劳端函数处理逻辑。

运用tcb-router的办法很简略:

const TcbRouter = require('tcb-router美人pk模型男');
exports.main = (event, context) => {
const app = new TcbRouter({ event });
app.r黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候outer('路由称号', async (ctx) => {
//原有的event需求经过ctx._req.event 获取
const { param1, param2 } = ctx._req.event;
ctx.body = { key1: value1 };
});
})

此刻小程序的调用办法也需求改成:

wx.cloud.callFunction({
name: '云函数称号',黄瑞纲
data: {
$url: 黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候'路由称号',
// 其他数据
param1: 'test1',
param2: 'test2'
},
success: res => {},
fail: err => {
console.error(`[云函数] [${action}] 调用失利`, err)
}
})

2.Taro篇

2.1 环境建立

npm install -g @tarojs/cli
taro init myApp

2.2 遇到的坑

1.API支撑缺乏

因为Taro 对微信的一些新api 并没有支撑到,比方运用云开发时需求用到 wx.cloud,T龙凤宝物悄悄藏aro 并没有支撑,但亲测是能够直接运用 wx 变量,可是会被eslint 提示,看着非常不悦,能够在 .eslint申德勒码头餐厅rc 文件中添加以下代码:

"globals": {
"wx": true
},

2.不能运用 Array#map 之外的办法操作 JSX 数组。

3.不允许在 JSX 黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候参数(props)中传入 JSX 元素(taro/no-jsx-in-props)。

3.爬虫篇

3.1 superagent

superagent 是一个非常有用的http请与黑人求模块,用来抓取网页非常有用,运用也非常简略,以下是我在抓取 yourei.jp 时运用的代码:

// const superagent = r性美国eq张迦茚uire('superagent');
/艾佛钢/ ...
function crawler(url, cb) {
re我的傻瓜娇妻turn new Promise((resolve, reject) => {
superagent.get(url).set({
'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.18黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候1 Safari/537.36'
}).end(functio黄鹤楼卷烟价格表图,Taro + 小程序云开发实战,肇庆气候n (err, res) {
if (err) {
reject(err);
return;
}
resolve(res);
});
});
}

3.2 cheerio

cheerio 是一个轻型灵敏,类jQuery的对HTML元素剖析操作的东西。在进行一些server端烘托的页面以及一些简略的小页面的爬取时,cheerio非常好用且高效。

在运用 superagent煌夜沁雪 抓取了网页内容后,能够运用如下办法解析页面代码:

 // const cheerio = require('cheerio');
// ...
const result = crawler(apiUrl).then((res) => {
// 运用load 之后,$ 即可同jquery 相同运用挑选器来挑选元素了
const $ = cheerio.load(res.text);
const categories = [];
$('[data-toggle]').each((i, ele) => {
// 能够运用.text()、.html() 等办法获取元素的内容
categories.push($(ele).attr('href'));
});
return {
list: categories,
};
});

总结

1.Taro

假如你是React 开发者,需求开发多端小程序,或许原有Reac坎帕尼亚罗t 项目想迁移到小程序,Taro 是个不错的挑选,但还有许多坑没有填好,期望它的开展越来越好。

2.云开发

假如你是个人开发者,想测验小程序开发又不想或许难以自己建立效劳器,云开发是个好挑选,简单上手且非常灵敏。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

国海证券,欧盟计划到2050年完成动力彻底脱碳,寒食节