Zalo Mini App 初体验

这是一个风和日丽的上午,本牛马正品着咖啡哼着小曲儿打算开始一天忙碌(摸鱼),产品(很烦)突然找到我:"我们要开发一款小程序,可以搞么?"

小程序?可以搞么??!!笑话!这不洒洒水~~~

产品:"哦!是Zalo小程序"

o((⊙﹏⊙))o :"咋咯? 神马东西?能吃么?!" 一脸懵逼ing

于是,本牛马开始各种百度,Google,DeepSeek。然而查获的资源实在有限。好不容易找到一篇,(最低0.47元/天,解锁文章)。好吧,本牛马资金有限,超额要走OA。这个还是不开了。于是俺就开始用俺这 一瓶子不满,半瓶子晃荡的-4级英语加机翻硬撸官方文档。忍不住吐槽!Zalo官方文档是真的一言难尽!!!垃圾的一批。

故事讲完,下面开始正文

概述

Zalo 是越南当地的一款即时聊天软件,类似国内微信。但是小程序实现和国内出入很大,Zalo提供一些配置,可以将现有web直接转换为Zalo 小程序,灵活性很高。并且Zalo提供了一下api可以直接使用 Zalo 的一些高级功能。

网站托管服务

通过 Zalo Mini App,开发者的应用程序将被打包托管在 Zalo 的系统上,并通过 CDN 系统分发给用户,确保快速的访问速度并能够处理大量用户流量。

缓存和更新新版本

Zalo Mini App 的资源会保存在 Zalo 应用程序的 Cache 中,因此当用户第二次访问该应用程序时,几乎会立即加载,并且可以支持无需网络的离线加载机制。

安全和权限

Zalo Mini App 应用程序在分发给用户之前会经过 Zalo 系统的身份验证和测试,因此比常规的 Web 应用程序更加安全。

所有访问 Zalo Mini Apps 系统功能或访问用户信息的权限均须在实际使用前声明并获得批准。

创建小程序

  1. 前往 Zalo for Developer 并登录 Zalo 帐户。然后在 Zalo 平台上创建应用程序或使用现有应用程序。
  2. 在"设置" 中 选择 "启用应用程序" ,以便外部用户使用。

3. 接下来,你需要创建一个新的小程序。 应用管理页面,方便开发者管理自己的小程序,例如:管理权限、查看报表、发布小程序...... 创建小程序步骤:

  1. 进入应用管理页面
  2. 选择 add Mini App
  3. 填写所需信息。然后选择"新建"

创建小程序后,会收到一个小程序 ID,妥善保存。如果忘了也没关系,应用管理页面可以查。

开发

VScode 使用 Zalo Mini App 扩展

  1. 安装 Visual Studio CodeZalo Mini App 扩展
  2. 配置:在 Home 标签页,完成 配置应用ID安装依赖
  1. 登录:进入 Deploy 标签页 扫码登录开发者账号。
  2. 启动:进入 Run 标签页,选择合适的启动器,点击 Start
  1. 部署:进入 Deploy 标签页,选择部署环境,点击Deploy,注意:Deploy无法使用 env 文件。 该tab页可以查看小程序 Testing 环境发布的历史版本

使用 Zalo Mini App CLI

  1. 安装 Node JS
  2. 安装 Zalo Mini App CLI
  3. 安装依赖
Bash 复制代码
pnpm install
  1. 登录 登录开发者账号:
Bash 复制代码
pnpm run login
  1. 启动 开发服务器:
Bash 复制代码
pnpm run start

部署 Dev环境: zmp-cli 选择 Development。

Bash 复制代码
pnpm run deploy

部署 Test环境:zmp-cli 选择 Testing。

Bash 复制代码
pnpm run deploy

调试

使用 pnpm run start 启动开发服务器后,命令行工具内出现二维码,用Zalo 扫描二维码查看小程序页面。

开启调试:浏览器打开 http://localhost:51019 调试页面。

点击 inspect 进入控制台,就可以愉快地敲BUG啦。

愉快地一天就这么结束了!!

相关推荐
电商API_18007905247几秒前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌2 分钟前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
Up九五小庞31 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程1 小时前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
2601_949593654 小时前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
天人合一peng4 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
方也_arkling5 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐5 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端