巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
帮助文档Help

Taro + 小程序云开发实战

nba篮球竞彩分析互联网站制作(www.slreporter.com) 发布日期 2019-03-26 11:48:04 浏览数: 561

简介:小程序开放了云开发能力,为开发者提供了一个可以很快速构建小程序后端服务的能力,作为一名对新技术不倒腾不快的前端,对此也是很感兴趣的。Taro 是凹凸实验室推出的,基于React 语法规范的多端开发解决方案,较之 ...

小程序开放了云开发能力,为开发者提供了一个可以很快速构建小程序后端服务的能力,作为一名对新技术不倒腾不快的前端,对此也是很感兴趣的。

Taro 是凹凸实验室推出的,基于React 语法规范的多端开发解决方案,较之于mpvue或者wepy,由于年轻,坑还比较多,但是很适合我这种倾向用React 开发的人。

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

1.云开发篇


1.1 环境搭建

云开发可以通过下列两种方式创建: 1.使用quickstart(云开发快速启动模版)创建项目:

Taro + 小程序云开发实战


这种方式会在目录下同时创建名为miniprogram ,带有云开发调用范例的小程序基础模板和名为cloudfuntions 的存放云函数的目录, 由此即可开始全新的项目。

2.基于现有的小程序使用云开发:

在小程序目录下创建一个文件夹作为你的云函数目录,然后在project.config.json 文件中新增字段"cloudfunctionRoot": "你的云函数目录",即可以在微信开发者工具中看到目录的图标变成了云,在此目录下创建云函数即可;

Taro + 小程序云开发实战


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的入口函数如下所示:
//云函数入口函数exports.main = async (event, context) => { // 参数获取在event 中获取,如使用上面的调用函数后,获取data使用 event.key1、event.key2即可 const { key1, key2 } = event; return { query: { key1, key2 } }}

每个云函数可视为一个单独的服务,如果需要安装第三方依赖,只需要在该目录点击右键,选择 在终端中打开, 并 npm install依赖即可。

需要注意的是,每个云函数都是独立的,所需要的依赖都需要在对应的目录下进行 npm install,但这样就会使得项目变得十分庞大且不优雅。因此,接下来我介绍一下tcb-router。

1.3 使用tcb-router管理路由

tcb-router 是腾讯云团队开发的,基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑。

使用tcb-router的方法很简单:
const TcbRouter = require("tcb-router");exports.main = (event, context) => { const app = new TcbRouter({ event }); app.router("路由名称", async (ctx) => { //原有的event需要通过ctx._req.event 获取 const { param1, param2 } = ctx._req.event; ctx.body = { key1: value1 }; });})

此时小程序的调用方式也需要改成:
wx.cloud.callFunction({ name: "云函数名称", data: { $url: "路由名称", // 其他数据 param1: "test1", param2: "test2" }, success: res => {}, fail: err => { console.error(`[云函数] [${action}] 调用失败`, err) }})

2.Taro篇


2.1 环境搭建
npm install -g @tarojs/clitaro init myApp

2.2 遇到的坑

1.API支持不足

由于Taro 对微信的一些新api 并没有支持到,比如使用云开发时需要用到 wx.cloud,Taro 并没有支持,但亲测是可以直接使用 wx 变量,但是会被eslint 提醒,看着十分不悦,可以在 .eslintrc 文件中增加以下代码:
"globals": { "wx": true},

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

3.不允许在 JSX 参数(props)中传入 JSX 元素(taro/no-jsx-in-props)。

3.爬虫篇


3.1 superagent

superagent 是一个非常实用的http请求???,用来抓取网页十分有用,使用也十分简单,以下是我在抓取 yourei.jp 时使用的代码:
// const superagent = require("superagent");// ...function crawler(url, cb) { return 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.181 Safari/537.36" }).end(function (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 开发者,需要开发多端小程序,或者原有React 项目想迁移到小程序,Taro 是个不错的选择,但还有很多坑没有填好,希望它的发展越来越好。

2.云开发

如果你是个人开发者,想尝试小程序开发又不想或者难以自己搭建服务器,云开发是个好选择,容易上手且十分敏捷。

本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱qq2522407257。更多相关资讯,请到巅云www.slreporter.com学习互联网营销技术请到巅云学院www.yx10011.com。
TAG标签: Taro   +   小程序云开发实战  
nba篮球竞彩分析互联是全国知名建站品牌服务商,nba篮球竞彩分析有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

21
04月
详解css布局实现左中右布局的5种方式

本文介绍了详解css布局实现左中右布局的5种方式,分享给大家,具体如下:效果如下:左中右布局<!doctype html><... >>详情

14
05月
快速提升网站排名的优化方法_巅云建站

很多做SEO的朋友都认为新站相对于老站原创内容数量少、外链弱以及收录少等,新站的要比老站困难很多。其实不然,正因为是新站,所以nba篮球竞彩分析是“纯净”... >>详情

29
04月
浅谈PHP变量作用域以及地址引用问题

作用域的概念:在PHP脚本的任何位置都可以声明变量,但是,声明变量的位置会大大影响访问变量的范围。这个可以访问的范围称为作用域。主要的常用的... >>详情

30
04月
PHPExcel读取Excel文件的实现代码

涉及知识点: php对excel文件进行循环读取 php对字符进行ascii编码转化,将字符转为十进制数 php对excel日期格式读取,并... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
nba篮球竞彩分析