整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

全平台大前端同步开发小程序H5及APP实例

前端

场景

前两天在福建,朋友打麻将要求我提供可以麻将上使用的摇骰子小程序(PS:之前开发了喝酒摇骰子的小程序),于是决定将之前的小程序功能迭代一下。

之前的微信小程序《摇骰子辅助工具》,使用过的人数16万+,每月收益约1000元的广告费……关于这个小程序的功能就不细说了,真的有兴趣的小伙伴请自行点击看下,GitHub 也是开源的 https://github.com/ZweiZhao/DicePlay。

DicePlay


Uni

Uni-App 是数字天堂公司维护开发的多端整合大前端框架,不做广告,自行查阅,只是我用到这个技术栈而已。


之前技术

《摇骰子辅助工具》最早使用原生小程序开发,后面转了 mpvue + coffeescript + pug + sass 开发,所以从 mpvue 转到 uni 很简单,因为 uni 官网有相关教程,按照方法走就行了。我这里遇到点恶心的事情,就是 cs、pug 与 sass 的抉择问题。最终结论就是手动(肯定用工具啦)把 cs、pug 与 sass 转换回了 js、html 与 css,原因很简单,那三个用着爽但是在新工具或框架下,未必完美支持,换回基础语言就可以保证换平台的便捷性

mpvue

之前 mpvue 的一个页面或组件的结构是这样的,因为那时候 mpvue 对 cs 的支持很差,只能这样丑陋的外部引入了(现在 mpvue 好像凉了)。


Uni Ver

uni ver

uni 版本的结构会相对简单一点,官网也限制了你想不简单的路子……


条件编译

这个是真填坑神器……

总之这个简单的修改项目,我要做到全平台(APP,H5,微信小程序),目前唯一遇到的坑,就是文件引用路径问题。

  1. 小程序引用 mp3 文件,使用本地路径不播放
  2. h5 打包发布使用 GitHub Pages 时候,换相对路径
  3. APP 使用绝对根路径

上面三点把我坑惨了,换代码半小时,搞路径,快两小时。有想玩这个 uni 的,这一块务必注意啊!


上面问题的解决方案如下:

mp3 文件直接挂在小程序云开发的腾讯云上面

点击上面的云开发,进去授权,并上传到储存管理即可。

云开发位置

存储管理

获取存储后的地址然后小程序调用即可。

注意,注意!这个链接是 cloud:// 协议,所以其他平台不能用!!!

因此要用到条件编译来区分这个地址是小程序专用的,具体条件编译下面统一贴图。


H5 打包引用路径处理

比如我放在 GitHub Pages,依赖项目是 DicePlay,那么 Pages 给的地址就是(我绑定了域名):http://www.zweizhao.com/DicePlay/,结合这边打包后,生成的最后路径就是:http://www.zweizhao.com/DicePlay/unpackage/dist/build/h5/。

可是,uni 默认是打包静态文件引用路径是:/static,那么这样引用就炸了,肯定获取不到。

所以要去 manifest.json 里面源码修改添加这样:

manifest

把文件包指定到这个地方。

呵呵,你以为这就完了?

js 文件里面引用的文件也要修改是相对路径,比如:"./"。

所以……又要条件编译,同样等下面统一。

这个问题,如果你项目丢在链接根目录就不用操心。


APP 根路径

这个我是试出来的,起码 iOS 是设置根路径获取,安卓就不是很清楚了,如果不是,那就再加一个条件变编译吧。

于是当前就有了三个条件编译(APP,H5,微信小程序),如下:

条件编译

为什么我写的这么不优雅?

还不是因为 uni 只提供了条件编译 || 判断,没有提供 && 判断……


成果

其他的暂时也不知道说啥,直接看成果吧,从左到右依次:H5,小程序,APP。

成果

恩,看到这里,我觉得坑一点还是值得的……撒花。

希望大家能够从文章里学到一点东西,谢谢。

辑导语:通过广告案例展示,企业可以更高效地打造口碑,吸引新客户的到来。那么,如何做好广告案例分析呢?本篇文章中作者结合实际经验对此展开了一系列讲述,感兴趣的小伙伴们快来一起看看吧。

一说到学习方法,其中必有「看案例」。

但很多人看案例,只是积累了案例数量,获得了见识,并没有增加见解。

看完觉得都会了,等到自己做项目时毫无头绪,不知从哪儿开始。

那么,看再多案例也无济于事,因为只是「知其然,不知其所以然」。

《如何做好广告案例分析?简单三步告诉你》那篇在知乎有200+赞同,是发布文章中反馈较高的,我想仍有很多人对此有需求。

恰好前段时间在数英看了很多广告案例,有些新想法,说给你听。跟你聊聊,如何通过广告洞察背后的品牌策略,即这条广告是怎么从0到1诞生的,让案例的思路为你所用。

一个广告传播活动,并非空穴来风,一定是符合公司战略方向的,怎么找到这种方向呢?

通过这篇文章,带你略窥一二。

一、举个例子,你怎么分析这条广告?

https://v.qq.com/x/page/o3225xpbk46.html

这是小红书2021年春节前的一条广告片,如果你看过之前那篇文章,照着顺序大概也能做个总结:

短片赶在年前上线,借助家庭做饭高峰节点,塑造了八个做饭场景,表达对父母、对子女、对伴侣、对宠物的爱,通过极具感染力的文案和镜头,打动人心,号召大家在新年为爱的人做顿饭,从而增加小红书的用户活跃度和内容丰富度。

从网友反馈和社媒数据来看,实现了很好的传播效果。算是一条很好的广告片了。

你的下一步动作,可能是把它放到收藏夹中,当下次有关于爱和做饭的项目主题时再翻出来,便可以从中借鉴相应的文案、场景和表达手法,为我所用,这就算学了一个案例。一般的常规操作,就是如此。

但是,这样就足够了吗?

这还不够,因为你只知道小红书怎么做的,仍然停留在技术分析层面,知道用了什么文案、场景、画面内容,抓住了用户哪些情绪等。但你不知道它为什么要做这条广告。

这就无法解答深一层的疑惑:为什么小红书做美食了?不是美妆穿搭一类的凡学工具书吗?

如此说来,片子虽好,但不符合产品定位,这样的广告就是无效的——就会得出另一种结论吧?那是否还值得借鉴?

下面来为你逐一解答,告诉你怎么从三个层面分析一条广告。

二、广告分析的三个层次

1. 第一层:战术层

着重用户沟通角度,就是执行层。

如上所述,从哪个洞察点切入,用了什么表现形式,视频、平面还是事件活动,用了哪些人物、画面、场景,选了什么媒介,传播链路是否完整流畅等。即用户可感知的层面。

2. 第二层:策略层

策略一般指:

  • 可以实现目标的方案集合
  • 根据形势发展而制定的行动方针和斗争方法
  • 有斗争艺术,能注意方式方法

在广告策略中,可以理解为为实现广告战略目标所采取的对策和应用的方法、手段。

我们尝试分析小红书的广告策略:通过广告,引导多年龄层用户的多类型内容分享,丰富平台内容资源,改变「小红书=晒美妆」的印象,塑造小红书多面精彩生活记录的平台形象。

疫情加速了线上社区发展,小红书是很好的内容平台,可以通过线上做饭记录和做饭教程,拉动新用户,同时丰富内容类型。

在上述广告策略下,能看到小红书最近还做了许多其他广告:潮流穿搭、游戏跨界、价值主张、熟人社区……多种多样,也已经脱离美妆的范畴。

而且更重要的一点时,大部分短片结尾,都号召用视频的方式发现生活、记录生活。

到这里就有两个问题:

  1. 小红书为什么要做多元内容社区,面向更广泛受众?
  2. 为什么要做视频?

这就深入到企业战略层面,我们尝试做个分析。

3. 第三层:战略层

战略可以理解为对所处环境的整体要素分析后,制定的一系列战争策略和指导。

有两个关键点:

分别来看。

小红书面对什么样的环境呢?

用波特五力模型做个分析(小红书兼具内容社区和电商功能,这里只从内容角度分析):

供应商:内容生产方,比如KOL、领域达人、以及普通人等。

达人的需求是流量变现,现在视频类内容有流量红利,且很多短视频平台有补贴和变现渠道,优质内容会倾向这类平台。而优质内容生产者一直是内容平台争取的关键资源。

同行业竞争者:如果从美妆、女性定位出发,她的竞对是美拍、蘑菇街等;从内容消费角度看,则竞对更广,如抖音、快手、视频号、B站、公众号等。因为不是看你就是看他,他们都属于内容消费。

潜在进入者:无论是美妆或是其他垂直领域内容平台,甚至电商平台,都有转为大众内容消费的可能。比如即刻、知乎可以开始做短视频;淘宝等电商平台已经开始做直播、短视频;甚至闲鱼这类二手交易平台也有自己的内容社区,视频浏览体验无异于抖音、快手,而且似乎也掌握了流量密码。

闲鱼的视频板块

替代产品:线上内容消费的替代产品,就是不把时间花在看视频上,可以去打游戏、看书、运动健身、旅游、逛街等。

而这些场景仍然有内容属性:打游戏想看下直播、教程;看书想找下推荐、读后感、一分钟看完X书讲解;健身想看瑜珈教程、私教讲课等。

每一项都与线上内容强绑定,而视频又是最好的载体。

客户谈判能力:普通用户,很明显的趋势是看视频的用户量和增长趋势,远高于图文内容消费,那么他们的选择逻辑就是——哪家有视频看哪家。

综上,小红书若想保留现有用户,持续吸引新用户,必然面临的转型就是视频化。靠流量补贴和变现渠道吸引创作者,通过广告号召普通用户在平台晒视频,以建立自己的视频资源供给。

你可能还有疑问:做视频是大势所趋,小红书为什么不做美妆、女性垂直内容,反而做大众内容呢?

这里我用一个工具分析:

销售收入=人数x客单价x购买频次

对内容平台来说,他们抢占的是用户注意力,衡量数据就不是总交易额,而是用户在平台的总消费时间。那么:

总消费时间=人数x单次使用时间x打开频次

要想提高总消费时间,就要提高每个要素的数额:

(1)提高人数

扩大用户基数,用多类型、大众化内容吸引不同年龄段和不同兴趣爱好用户,不难理解。

(2)提高单次使用时间

即便视频做得再精美,只看美妆内容也会审美疲劳,就要美食、音乐、段子、美女、运动、旅游等内容来中和。

字节系的智能算法、个性推荐已验证,通过数据标签给用户推荐喜欢的不同内容,让用户拿起来就放不下,使用时间越长,对平台的依赖也越强。

(3)提高打开频次

除评论点赞互动、消息通知、积分、活动等运营手段能让你时不时打开APP外,丰富内容类型也可以。

比如做饭想找美食参考、看环球影城攻略、周末逛街去处推荐、或者单纯排队想打发时间,每一个线下场景,也都能让你打开APP,找到自己所需。

马老师讲过,每一家互联网公司,做到最后都是数据公司。当你掌握的用户数据量越多,数据越精准、多维,那么公司的价值也越高。

电商平台通过交易数据给用户设定标签,能做到精准广告投放,提高交易效率。内容平台则通过浏览记录给用户打标签,要想标签越精准,就需要更多的用户数据和浏览时长,那么泛大众内容就是必经之路。

至于何时推出什么主题吸引什么人群,那就是运营策略上要考虑的了。

三、回过头再来看看

现在再看这条广告,你是不是能理解得更多?

https://v.qq.com/x/page/o3225xpbk46.html

除了看到小红书在宣传晒做饭的视频,也看到了小红书美妆之外多种多样的内容,以及背后是各大内容平台的领地争夺、厮杀与号角。

最后我想说,视频广告、平面广告或者活动事件,只是企业的战术行为,它必须符合企业的战略。

我们在分析一个营销动作时,如果不明白背后的战略意图,那就无法看到全貌。你所做的「案例学习」,也不过是蜻蜓点水,收效甚微。

比如有文章分析谷爱凌代言某些品牌不合适,原因是品牌调性与谷爱凌关联弱。这就是只从战术层面看,没有看到背后的战略设计。

三棵树、科勒可能冬奥期间线上投放少,但在线下门店时,代言人的作用很大的,哪怕只有一张照片,也能促进消费者购买决策。

而且,这些品牌找代言人,还有个目的是为了增加经销商信心,为了让渠道看见品牌实力。

半天妖是山东区域品牌,自从有张一山代言后,进入一线城市mall店的阻力小了很多。

当你明白企业的这一层意图,再来看代言人,才能理解这么做的真正原因。

那么再做案例分析,或者下一次做类似项目,才有借鉴的意义。

战略、策略不像平面、视频能用肉眼看到,但肉眼看不到的东西,往往才是关键所在。

#专栏作家#

苏佬师,微信公众号:苏佬师,人人都是产品经理专栏作家。专注广告营销领域,有趣有料,深受读者喜欢,行业文章被全网几十万人阅读。

本文原创发布于人人都是产品经理,未经作者许可,禁止转载

题图来自 Unsplash,基于CC0协议

Web 开发中,解析 HTML 是一个常见的任务,特别是当我们需要从网页中提取数据或操作 DOM 时。掌握 Node.js 中解析 HTML 的各种方式,可以大大提高我们提取和处理网页数据的效率。本文将介绍如何在 Node.js 中解析 HTML。

  • Node.js 是什么?Node.js 如何安装及如何配置环境?一文讲解

基本概念

HTML 解析是指将 HTML 文本转换为可操作的数据结构,通常是 DOM(文档对象模型)。DOM 是一个树状结构,表示了网页的结构和内容,允许我们使用 JavaScript 操作和修改网页。

常用的 HTML 解析方法

以下是在 Node.js 中常用的几种 HTML 解析方法:

1.Cheerio:Cheerio 是一个类似于 jQuery 的库,它可以在服务器端使用 CSS 选择器来解析 HTML 并操作 DOM。它适用于解析静态 HTML 页面。

2.jsdom:jsdom 是一个在 Node.js 中模拟 DOM 环境的库。它能够解析和操作 HTML,同时还支持模拟浏览器环境中的许多特性,如事件处理和异步请求。

3.htmlparser2:htmlparser2 是一个快速的 HTML 解析器,它能够将 HTML 文档解析成 DOM 节点流。它通常用于处理大型 HTML 文档或流式数据。

实践案例:使用 Cheerio 解析 HTML

以下是一个使用 Cheerio 解析 HTML 的实际案例,其中包含基本的路由与请求处理。确保你的开发环境中已经安装了 Node.js 和 npm。

1、首先,创建一个新的文件夹,并在该文件夹中运行以下命令初始化项目:

npm init -y

2、安装所需的依赖库:

npm install express cheerio axios

3、创建一个名为 index.js 的文件,然后编写以下代码:

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');  // 引入 cheerio 库,用于解析 HTML

const app = express();
const PORT = 3000;

app.get('/', async (req, res) => {
  try {
    // 使用 Axios 发起 GET 请求获取网页的 HTML 内容
    const response = await axios.get('https://apifox.com/blog/mock-manual/'); // 替换为你想要解析的网页 URL
    const html = response.data;  // 获取响应中的 HTML 内容
    
    const $ = cheerio.load(html);  // 将 HTML 文本传递给 cheerio,创建一个类似于 jQuery 的对象
    
    // 使用 cheerio 对象的选择器来获取网页标题,并提取文本内容
    const title = $('title').text();  
    
    res.send(`Title: ${title}`);  // 将标题作为响应发送给客户端
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred');  // 发生错误时发送错误响应
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);  // 启动服务器并监听指定端口
});

在上述代码中,注释解释了每个关键步骤的作用:

  • 通过 axios.get() 发起 GET 请求,获取网页的 HTML 内容。
  • 使用 Cheerio 的 $ = cheerio.load(html) 创建了一个可用于选择 DOM 元素的 Cheerio 对象。
  • 通过 $() 使用类似于 jQuery 的选择器,获取 <title> 元素的文本内容。
  • 最后,将提取的标题作为响应发送给客户端。在这个案例中,我们使用 Express 来创建一个简单的服务器,当访问根路由时,我们使用 Axios 获取网页的 HTML 内容,然后使用 Cheerio 解析并提取网页标题。在浏览器或 API 工具中访问 http://localhost:3000/,你将看到响应。
    • 什么是 axios?如何使用 axios?一文快速入门

提示、技巧与注意事项

  • 在使用 Cheerio、jsdom 或 htmlparser2 时,务必了解它们的文档和用法,以充分利用其功能。
  • 当解析复杂的动态页面时,考虑使用模拟浏览器行为的库,如 Puppeteer。

使用接口工具调试后端接口

Apifox 为例,Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口,并且集成了 IDEA 插件。在后端人员写完服务接口时,测试阶段可以通过 Apifox 来校验接口的正确性,图形化界面极大的方便了项目的上线效率。

在本文的例子中,就可以通过 Apifox 来测试接口。新建一个项目后,在项目中选择 “调试模式” ,填写请求地址后即可快速发送请求,并获得响应结果,上文的实践案例如图所示:

总结

Node.js 提供了多种方法来解析 HTML,包括 Cheerio、jsdom 和 htmlparser2。选择适合你需求的库,可以轻松地操作和提取网页内容。

知识扩展:

  • Node.js 中怎么拷贝文件?nodejs 拷贝文件的方法
  • 如何在线建一个 JAVA 的 Spring Boot 项目?Spring Boot 快速入门 Helloworld 示例

参考链接:

  • Cheerio 官方文档:https://cheerio.js.org/
  • jsdom GitHub 仓库:https://github.com/jsdom/jsdom
  • htmlparser2 GitHub 仓库:https://github.com/fb55/htmlparser2