开发一个小程序 Demo| 学习笔记

本文涉及的产品
mPaaS订阅基础套餐,标准版 3个月
OCR统一识别,每月200次
票据凭证识别,票据凭证识别 200次/月
简介: 快速学习开发一个小程序 Demo。

开发者学堂课程【mPaaS 小程序开发实战 - 教你如何独立运行小程序 :开发一个小程序 Demo】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/741/detail/13124


开发一个小程序 Demo

 

mPaaS 小程序的使用方法以及技巧

为 APP 开发,测试,远营及运维提供云到端的一站式解决方案,有效降低技术门造,减少研发成木。协助企业快速搭建稳定高质量的移动应用。

image.png

首先要登录到 APP 的管理后台,需要下载一份配置文件才能登录到 mPaaS 小程序 ID 。现在已经登录到 mPaaS 管理后台,配置文件是绑定应用的, 每个应用实际上都是一份配置文件。

找一个应用进去,选择小程序发布。

image.png

里面有配置管理,配置文件里有 IDE 配置管理,下载配置文件导入 IDE 中可以进行登录。

image.png

登录 ID 用户名是登录 mPaaS 控制台的用户名。

密码是配置文件输入的动态密码。

配置文件下载完成,小程序一定要选择 mPaaS 类型的小程序。

mPaaS 小程序提供了三个模板,之后会补充更多,前两个是多端开发的模板,先点击程序示例模板进行演示。

image.png

创建过可以直接打开。

打开之后右上角有登录,登陆时新增一个登陆环境,上传配置文件。

配置文件上传完之后登录,密码是刚才输入的动态密码。

ID 提示需要有依赖要安装,插件中可以安装依赖。安装成功之后可以在 ID 里面看到小程序的本地预览。

左侧端有插件,mPaaS 工具箱和 mPaaS 相关的集成工具都在里面。

image.png

里面有白名单的设置,在真机调试以及预览的时候一定要有白名单的概念,白名单对应 APP 端用户的 user ID 才能拉到临时的包。

小程序设置里面有很多配置项目,如果每个配置不对,小程序无法正常显示出来。需要先选择小程序。

点击配置,有提示的原因可能之前的小程序主入口和底部导航栏否,但是小程序 ID 会检测代码中合理的配置,两个配置出现错误,选择自动修改。

加入两个平台都可以预览到选0.0.0.0版本,最高版本不填,主入口是后台小程序的主入口。

有两个点容易出现错误,主入口和是否显示底部导航栏。

最下面两个为底部导航栏。

主入口 app.json

App.json

app.json>[ ]pages

{

"pages":[

"page/tabBar/component/index"

"page/tabBar/API/index",

"page/common/search/search",

"page/API/tiny-to-native/tiny-to-native"

"subpackages":[

{

"root": "page/API",

"pages": [

"events/event5",

"share/share",

"action-sheet/action-sheet",

"alert/alert",

"animation/animation",

"canvas/canva5",

"card-pack/card-pack",

"choose-city/choose-city"

"favorite/favorite",

"choose-location/choose-location",

"confirm/confirm",

"contact/contact",

"date-picker/date-picker",

"option-menu/option-menu",

"download-file/download-file"

"file/file",

"ocr/ocr",

"ocr-idcard-face/ocr-idcard-face",

"ocr-business-card/ocr-business-card",

"ocr-vehicle/ocr-vehicle",

"ocr-driver-license/ocr-driver-license",

"ocr-business-license/ocr-business-license",

"ocr-bank-card/ocr-bank-card"

"ocr-train-ticket/ocr-train-ticket",

"ocr-passport/ocr-passport",

在真机上进行预览,只有和白名单所对应的用户才能预览。

真机预览

可以看到屏幕上的 APP ,Demo APP 相当于以后 mpast 、SDK 在 APP 里面很好的调整。

小程序在真机上已经拉包

image.png 

当发预览包之后可以观察一下,因为在 ID 上选的小程序示例的小程序,看一下小程序测试包,可以看到刚刚发的小程序的包已经可以看到,版本号。

image.png

也可以发一个真机览包。

观看一下上传功能,上传相当于上传正式的小程序包,若想正式发布需要在 mPaaS 控制台手动发布一次,现在的版本是1.0.58,要上传的版本是1.0.59。

有错误会在上传日志体现出来。

image.png

上传完成,再回到 mPaaS 控制台,小程序版本变成1.0.59,待发布状态,相当于从 ID 直接传到了 mPaaS 控制台上,这就是小程序的功能。

image.png

还有比较特殊的功能,清除缓存可能是构建过程中在系统有一些文件,直接清除就可以。

导出比如上传了1.0.59正式包版本,把正式包拉到本地分享给别人或者拷贝,上传至新的版本导出。

小程序已经导出,小程序的名称、ID、版本、发布时间和导出地址下载就可以。

相关文章
|
5天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
19 3
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
13天前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
4天前
|
小程序 前端开发 JavaScript
开发支付宝小程序的思路
【9月更文挑战第7天】本文介绍了一种在支付宝小程序中实现网页抓取的方法,通过云函数或自建后端服务来解析外部网页的标题、描述和图片。具体步骤包括:用户输入链接,小程序调用云函数抓取并解析网页内容,最后将结果返回并在前端展示。文中详细介绍了使用 Node.js 的云函数实现过程,包括代码示例和小程序前端页面的实现方法。通过这种方式,可以显著提升链接分享的用户体验。
13 0
|
13天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
36 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
13天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
34 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
30天前
|
存储 小程序 JavaScript
|
30天前
|
小程序 前端开发 安全
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
35 7