微信小程序要完败APP了?

本文探讨了微信小程序作为连接工具的价值,它继承了APP的优点并进行了创新。小程序无需下载安装,基于微信生态,便于用户查找和使用。文章还讨论了小程序在推广和盈利方面的优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  

timg.jpg

  每一个跨时代的产品,都具备两个特点,一是继承,一是颠覆。微信小程序亦是如此——和APP比较,一方面继承了APP很多特点,另一方面,又有了很多的颠覆性发展。

  张小龙:“一个好的产品应该是让用户用完即走的,不应该黏住用户。任何产品都只是一个工具,对工具来说,好的工具就是应该最高效率的完成用户的目的,然后尽快的离开。”

  几乎所有的人都是用过APP,对APP的使用流程再清楚不过了。现在我们来对比下APP和微信小程序在获取用户过程的区别。

  

u=643929028,3981778842&fm=26&gp=0.jpg

  使用APP获取用户,需要通过线下线上推广,用户扫描二维码之后,下载相关程序之后,才算获得一个用户,这个环节,不仅要耗费大量的人工和成本,如何获得用户认可也是一个大问题,而且这只是获客成本,维护也是一个大问题。

  而企业使用微信小程序如何获得用户呢?扫描二维码、“搜一搜”搜索、公众号关联、公众号自定义菜单跳转、好友分享、发现页面小程序功能、附近的小程序。这个过程看似很繁琐,但是,有一点是APP无法比拟的,那就是微信小程序无需下载安装,而且是基于微信“背书”,对于用户来说,信任度大大的提高了。

  不仅如此,小程序的好处在于,是用户主动“送上门”的,以餐饮小程序为例,当用户有订餐或者用餐需求的时候,他可以打开微信,搜索附近的小程序,就可以看到安装小程序的餐饮店,然后根据自己的喜好选择自己中意的餐饮店。和APP通过各种活动诱导用户扫描下载比较,很多用户下载你的APP,不是冲着你的产品或者服务,而是冲着你给的礼品而下载的,当他们的需求满足之后,就会卸载掉APP,这其实是假性需求,企业耗费了大量的成本,换来的都是一些“假粉丝”,就算数字做的很漂亮,结果真的能为企业带来效益吗?而微信小程序的用户,都是根据自己的需求主动加入,他们有这方面的需求,而且通过微信这一流量入口,通过搜索满足自己需求,俗话说:“强扭的瓜不甜,伤感的没有好买卖”,只有占据主动的一方才有话语权,微信小程序满足的双方都是主动地要求。

u=2342844423,3845267694&fm=26&gp=0.jpg

  小程序并非上线了就坐等用户上门,也要学会主动出击。APP一些营销手段,同样适用于小程序的推广,因为任何一个好的产品、服务都离不开推广的,以目前最好的共享单车为例,某共享单车在接入小程序之后推出了“30天免费骑”的活动,让原先未使用过共享单车或使用其他品牌共享单车的用户选择在30天内连续选择该品牌骑行,通过这个活动激活了潜在用户,培养了用户习惯,提高了用户的留存率。

  小程序获得收入的方式比APP更简单。企业花了很多钱做成并上线小程序最终目的是为了赚钱,获得更多的收入,而不是赶时髦。一切的营销运营都是为了提高转化率。小程序作为一个工具,是一种连接客户与商品的服务手段,是转化的桥梁,小程序很难依靠自身创造价值,只有通过自己快速便捷的“小”特性更好的服务客户,才是小程序的价值所在。企业APP和用户达成交易意向的时候,往往需要借助第三方支付工具完成交易,而微信小程序坐拥微信微信支付功能,从获客到完成支付都可以在微信内完成,这样避免节外生枝的弊端。

<!-- pages/newslist/index.wxml --> <view class="container"> <!-- Top Search Bar --> <input type="text" placeholder="输入关键词搜索..." bindinput="handleSearchInput"/> <!-- News Items List --> <scroll-view scroll-y style="height: calc(100vh - 60rpx);"> <block wx:for="{{filteredNews}}" wx:key="id"> <view class="item-box" catchtap="gotoDetail" data-id="{{item.id}}"> <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg"/> <text>{{item.title}}</text> </view> </block> </scroll-view> </view> const mockNewsData = require('../../util/data'); Page({ data: { searchKeyword: '', // 当前搜索关键字 filteredNews: [] // 已过滤后的新闻列表 }, onLoad() { this.setData({ filteredNews: mockNewsData // 加载初始数据 }); }, handleSearchInput(e) { const keyword = e.detail.value.trim(); // 获取用户输入的关键字 let result = []; if (keyword.length > 0) { // 如果有输入,则筛选符合条件的内容; result = mockNewsData.filter((item) => item.title.includes(keyword)); } else { // 否则恢复原始全量结果集; result = mockNewsData; } this.setData({ // 更新UI视图层显示的数据源信息 searchKeyword: keyword, filteredNews: result }); }, gotoDetail(e) { const newsId = e.currentTarget.dataset.id; wx.navigateTo({ url: `../detail/index?nid=${newsId}` }); } }) module.exports = [{ id: '001', title: 'navi比赛失利Aliksib难逃其咎', content: '近日,某知名战队NaVi比赛失利...', detail: 'https://www.bilibili.com/video/BV1WJo4YPE6s/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/navi.png' }, { id: '002', title: '中国战队天禄重回世界赛场!', content: '天禄2/0完败世界强队永恒之火,惜败No.1绿龙...', detail: 'https://www.bilibili.com/video/BV1wD9aYqE6h/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/tyloo.png' }, { id: '003', title: 'g2新阵容表现平平,Monesy对此的态度是。。。', content: '小孩怒喷队友不干事?原来是这样...', detail: 'https://www.bilibili.com/video/BV1rZQgYvEPk?spm_id_from=333.788.recommend_more_video.0&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/g2.png' }, { id: '004', title: '知名赛事解说玩机器竟关闭直播间,背后原因令人深思', content: '...', detail: 'https://www.bilibili.com/video/BV1JBNDemE3Q/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/wjq.png' }, { id: '005', title: 'ra算定时机,为亚洲赛区争夺两个世界赛名额!', content: '...', detail: 'https://www.bilibili.com/video/BV1NoosYcE6m/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/ra.png' }, { id: '006', title: '禾和在绝密航天中无心一局千万撤离,震惊安信工所有玩家', content: '...', detail: '', imageUrl: '/images/hh.png' } ]; 根据上述代码设计以下功能:点击图片跳转至detail中的地址
03-26
<think>嗯,我需要根据用户提供的微信小程序代码,实现点击图片跳转到detail中的地址的功能。让我仔细看一下代码结构。 首先,用户展示的代码中有一个新闻列表页面(index.wxml和对应的js文件),以及模拟数据mockNewsData。每个新闻项有一个imageUrl和一个detail字段,detail存储的是跳转的URL。 当前,新闻项的点击事件是通过catchtap="gotoDetail"绑定的,触发gotoDetail函数。这个函数现在是通过wx.navigateTo跳转到../detail/index页面,并传递了nid参数。但是用户希望点击图片时跳转到detail中的地址,而不是跳转到详情页。 我需要修改代码,使得点击图片时直接跳转到detail的链接。首先,查看wxml结构,图片组件是<image>标签,现在它位于一个<view class="item-box">中,该view绑定了gotoDetail事件。目前无论是点击图片还是标题,都会触发gotoDetail,跳转到详情页。 为了实现点击图片跳转到detail地址,而点击其他区域仍跳转到详情页,可能需要为图片单独绑定一个事件。例如,给<image>添加catchtap事件,比如handleImageTap,然后在js中处理这个事件,获取对应的detail链接,并使用wx.navigateTo或者wx.navigateToMiniProgram(如果是跳转到其他小程序)或者打开网页(可能需要使用web-view组件或wx.openURL,但需要注意微信小程序的限制)。 不过,微信小程序中直接打开外部链接可能需要使用web-view组件,或者在后台配置业务域名。如果detail字段是网页链接,可能需要使用wx.openURL,但需要检查这些链接是否在合法域名列表中,否则会被拦截。或者,用户可能希望跳转到小程序内的一个页面,显示该网页内容,这时候可以使用web-view组件。 根据用户提供的代码,mockNewsData中的detail字段是类似B站的视频链接,例如'https://www.bilibili.com/video/BV1WJo4YPE6s',所以可能需要直接打开这个网页。但微信小程序中,打开外部链接需要使用web-view组件,或者复制链接到剪贴板提示用户自行打开。另一种方式是使用navigator组件的open-type为redirect或navigate,但可能受限于域名配置。 考虑到代码的现有结构,可能的实现步骤: 1. 在图片组件上添加单独的事件处理函数,例如handleImageTap,并传递item.detail作为参数。 2. 修改wxml中的image标签,添加catchtap事件,并传递detail参数,比如data-url="{{item.detail}}"。 3. 在对应的js文件中编写handleImageTap函数,获取传递的url,然后调用wx.navigateTo或wx.openURL。不过需要注意,wx.navigateTo用于跳转到小程序内的页面,而wx.openURL可能需要用户确认,或者使用web-view。 但根据微信小程序的API,直接打开外部链接可以使用wx.navigateTo跳转到web-view页面,或者使用wx.openURL。例如: - 使用wx.openURL需要将域名添加到业务域名中,否则无法直接打开。但用户提供的链接是B站的,可能不在业务域名里,这会导致无法直接打开。 - 另一种方式是在小程序内使用web-view组件,创建一个页面来加载该URL。这时需要在小程序后台配置业务域名,并且该页面的路径需要配置为使用web-view。 例如,可以创建一个新的页面,比如pages/webview/index,然后在其中使用web-view组件,src设置为传递过来的URL。然后,在点击图片时,跳转到这个webview页面,并传递URL参数。 这样,步骤大致如下: 1. 创建web-view页面,配置路由和页面文件。 2. 修改图片的点击事件,跳转到webview页面,并传递detail中的URL作为参数。 3. 在webview页面中,使用web-view组件加载该URL。 但需要检查用户的代码是否已经具备这样的页面。用户当前的代码中,点击新闻项会跳转到../detail/index页面,传递nid参数。可能现在需要让点击图片跳转到webview,而点击其他区域仍跳转到原来的detail页面。 现在,用户提供的mockNewsData中的每个新闻项的detail字段是一个URL字符串。例如,第一个新闻项的detail是B站视频链接。 因此,具体修改步骤: 首先,在index.wxml中,为图片添加单独的事件处理: 将原来的: <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg"/> 改为: <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg" catchtap="handleImageTap" data-url="{{item.detail}}"/> 这样,点击图片时会触发handleImageTap事件,并传递data-url参数为item.detail的值。 然后,在对应的Page的js文件中,添加handleImageTap函数: handleImageTap(e) { const url = e.currentTarget.dataset.url; if (url) { // 跳转到web-view页面,或者直接打开 wx.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(url)}` }); } else { wx.showToast({ title: '链接无效', icon: 'none' }); } } 接下来,需要创建web-view页面: 在pages目录下创建webview目录,包含index.wxml、index.js、index.json、index.wxss。 index.wxml内容: <web-view src="{{url}}"></web-view> index.js: Page({ data: { url: '' }, onLoad(options) { this.setData({ url: decodeURIComponent(options.url) }); } }); 此外,需要在微信小程序后台配置业务域名,将B站的域名(如www.bilibili.com)添加到业务域名中,否则web-view无法加载。 如果用户无法配置业务域名,那么这种方法行不通,可能需要其他方式,比如提示用户复制链接,或者在浏览器中打开。但微信小程序中,打开外部链接可能需要用户手动长按识别,或者使用<web-view>,但必须配置业务域名。 假设用户已经配置了业务域名,或者允许测试环境下不校验域名,那么这样可以实现。 另外,需要检查用户的mockNewsData中的detail字段是否存在空值,例如id为006的新闻项的detail为空字符串。在点击时,需要处理这种情况,提示用户无链接。 总结修改步骤: 1. 修改index.wxml中的image组件,绑定catchtap事件,传递data-url。 2. 在index.js中添加handleImageTap函数,处理跳转。 3. 创建webview页面,用于展示web-view。 4. 配置业务域名,确保目标URL的域名在允许列表中。 现在,用户可能没有配置业务域名,或者希望用其他方式处理。另一种方法是用wx.openURL,但根据微信文档,这个API是打开小程序内的链接,或者使用浏览器打开外部链接可能需要用户确认。不过,wx.openURL可能已经被废弃,正确的方法可能是使用wx.navigateTo到web-view页面。 因此,最终的代码修改建议是: 在index.wxml的image标签添加catchtap事件,传递URL,然后在js中跳转到web-view页面,前提是该页面存在且配置正确。 另外,需要确保当detail字段为空时,点击图片不执行跳转,或者提示用户。例如,在handleImageTap中检查url是否存在。 如果用户没有配置业务域名,或者无法使用web-view,可能需要采用其他方式,比如复制链接到剪贴板,提示用户在浏览器中打开。例如: handleImageTap(e) { const url = e.currentTarget.dataset.url; if (url) { wx.setClipboardData({ data: url, success: () => { wx.showToast({ title: '链接已复制,请在浏览器打开', icon: 'none' }); } }); } else { wx.showToast({ title: '暂无链接', icon: 'none' }); } } 不过,这种方法用户体验较差,但可能适用于无法配置业务域名的情况。 用户的需求是点击图片跳转到detail中的地址,因此需要明确如何实现。根据用户提供的代码,可能希望直接跳转到该链接,而无需其他操作。因此,最优解是使用web-view,前提是配置了域名。 因此,最终的步骤是: 1. 修改图片的绑定事件,传递URL。 2. 创建web-view页面。 3. 处理跳转逻辑,并处理空URL情况。 现在,用户提供的代码中的gotoDetail函数是跳转到../detail/index页面,并传递nid参数。这可能与点击图片跳转到detail地址的需求冲突,因此需要分开处理:点击图片跳转链接,点击其他区域跳转到原详情页。 因此,在wxml中,需要将图片的catchtap事件与item-box的catchtap事件分开,避免事件冒泡。因为默认情况下,点击图片会触发图片的事件,然后冒泡到父view的catchtap事件。因此,需要阻止事件冒泡。 在微信小程序中,事件分为冒泡事件和非冒泡事件。catchtap会阻止事件冒泡,而bindtap不会。但在这里,原item-box使用的是catchtap="gotoDetail",而图片也使用了catchtap="handleImageTap",这样点击图片时,handleImageTap会触发,而由于catchtap阻止了冒泡,父view的gotoDetail不会被触发。这样就能实现点击图片只触发handleImageTap,而点击其他区域(如标题)则触发gotoDetail。 因此,修改后的image标签应使用catchtap来阻止冒泡,这样点击图片不会触发父view的gotoDetail事件。 所以,最终的代码修改如下: 在index.wxml中: <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg" catchtap="handleImageTap" data-url="{{item.detail}}"/> 然后,在index.js中添加handleImageTap函数,处理跳转。 总结所有步骤,用户需要进行的代码修改包括: 1. 在image组件上添加catchtap事件和data-url。 2. 创建web-view页面。 3. 实现handleImageTap函数,跳转到web-view页面。 4. 处理没有URL的情况。 这样就能实现点击图片跳转到detail中的地址。</think>让我们分步骤实现点击图片跳转至detail地址的功能: 1. 修改WXML结构(添加点击事件和参数传递) ```html <!-- 修改image标签,添加单独点击事件 --> <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg" catchtap="handleImageTap" <!-- 阻止事件冒泡 --> data-url="{{item.detail}}" <!-- 传递详情地址 --> /> ``` 2. 在JS文件中添加图片点击处理函数 ```javascript // 在Page对象中添加新方法 handleImageTap(e) { const url = e.currentTarget.dataset.url; if (url && url.trim()) { wx.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(url)}` }); } else { wx.showToast({ title: '该新闻暂无详情链接', icon: 'none', duration: 2000 }); } } ``` 3. 新建webview页面(pages/webview/index) ```javascript // pages/webview/index.js Page({ data: { url: '' }, onLoad(options) { this.setData({ url: decodeURIComponent(options.url) }); } }) ``` ```html <!-- pages/webview/index.wxml --> <web-view src="{{url}}"></web-view> ``` 4. 配置注意事项 $$ \textcolor{red}{重要提示} $$ - 需要在小程序后台配置业务域名(如`www.bilibili.com`) - 在app.json中注册webview页面: ```json { "pages": [ "...其他页面", "pages/webview/index" ] } ``` 5. 增强健壮性(处理空链接) ```javascript // 修改handleImageTap方法 handleImageTap(e) { const url = e.currentTarget.dataset.url?.trim(); // 使用可选链操作符 if (!url) { wx.showToast({ title: '暂无可访问的详情页面', icon: 'none', duration: 2000 }); return; } if (!/^https?:\/\//i.test(url)) { // 验证URL格式 wx.showToast({ title: '链接格式不正确', icon: 'none', duration: 2000 }); return; } wx.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(url)}` }); } ``` $$ \boxed{实现要点} $$ 1. 事件隔离:使用`catchtap`阻止事件冒泡,确保点击图片时不会触发父容器的`gotoDetail` 2. 参数编码:使用`encodeURIComponent`处理URL参数 3. 安全验证:增加URL格式校验和空值处理 4. 渐进增强:对于无链接的新闻项(如ID006),给出友好提示 该方案实现了: - 点击图片跳转详情页 - 原有标题区域点击保持跳转新闻详情页 - 完善的错误处理机制 - 符合微信小程序安全规范 $$ \textcolor{red}{注意} $$ 实际部署前需完成: 1. 小程序后台配置业务域名 2. 处理HTTPS证书有效性 3. 测试所有链接的可访问性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值