Skip to main content

小程序封装

基本介绍​

通过新建小程序门户可以实现小程序端与pc管理端的数据互通，同时一个应用可以封装出多个小程序，方便数据统一管理

创建应用​

image.png

我们可以看到门户管理列表默认有pc端的门户

image.png

创建小程序页面​

image.png

创建小程序门户​

image.png

此时pc门户可以作为小程序的管理端，小程序门户可以创建多个，可以实现一个应用封装多个小程序

image.png

进入小程序门户编辑，我们会将小程序页面自动填充进来，并且过滤了非小程序页面

image.png

小程序基础设置​

配置页面设置，底部 TabBar，自定义依赖，小程序 CI 设置，平台域名，是否独立运行配置。

image

顶部导航设置​

此处可配置小程序顶部/底部相关样式，包括导航栏背景色，字体风格，下拉 loading 风格，顶部底部背景色相关设置。

image

底部导航配置​

此处可配置小程序底 bar 导航相关内容， 包括背景色，边框风格，tab 默认态和激活态样式，底 bar 导航项相关设置。

自定义依赖​

只在运行时里有用的自定义npm依赖，会全局安装，然后自定义代码里可以引用（require方式引用全局安装的npm包）

image

独立运行配置​

如开启独立运行平台，小程序运行时所有请求服务不依赖爱速搭平台。开启后，需要配置登录接口（通过 API 中心对接外部登录服务），登录界面，错误码，token 获取字段和生成的静态资源部署地址。

静态域名

这里使用注意两点：

  1. 应用或者平台配置了对象存储则配置对象存储的域名或者 cdn 即可。
  2. 没有对象存储的应用需要自己上传图片到自己的静态资源服务器，操作步骤： 应用发布-> 导出应用源码->解压缩打开根目录的 upload 目录->将 upload 目录下的所有文件夹及图片上传到静态资源服务器。

这里要确保域名+路径可访问 例如：

image

这里的图片路径为 /files/2022-11/pJu8pMUYWMrsAw7eKjZosq/3b1f375681f390755f8dfa9c03383765.jpeg 假如我们的域名为： https://***.com 则需要确保 https://***.com/files/2022-11/pJu8pMUYWMrsAw7eKjZosq/3b1f375681f390755f8dfa9c03383765.jpeg 可访问 静态域名则填写 https://***.com

image

CI配置​

微信小程序配置​

image.png

访问微信公众平台 https://mp.weixin.qq.com/，在开发>开发管理中获取小程序密钥，注意关闭 IP 限制，否则沙盒将无法提交代码到小程序平台。

image

将小程序 APPID 和密钥添加到小程序 CI 设置中。

百度小程序配置​

image.png

在百度小程序平台注册百度小程序 https://smartprogram.baidu.com/

获取appid如下图：

image.png

首先需要下载小程序开发者工具 https://smartprogram.baidu.com/docs/develop/devtools/history/, 根据自己电脑系统选择对应版本下载。

注意： 使用小程序管理员账号或者有开发权限的百度账号登录开发者工具

小程序密匙获取步骤如下（mac）：

新建个空项目

image.png

APPID直接使用测试号

image.png

image.png

复制登录密钥

image.png

基础库版本分布： https://smartprogram.baidu.com/docs/develop/swan/version/

支付宝小程序配置​

image.png

在支付宝开放平台注册支付宝小程序

https://open.alipay.com/module/miniApp

APPID 获取

https://open.alipay.com/develop/manage?bundleId=com.alipay.alipaywallet

密钥获取

https://open.alipay.com/develop/manage/tool-key

管理模式选择身份密钥 直接生成，

image.png

将下载的配置文件内容全选粘贴即可

一定要全选粘贴！！！

image.png

抖音小程序配置​

image.png

在抖音开放平台注册抖音小程序

https://developer.open-douyin.com

APPID 获取

https://developer.open-douyin.com/console?type=1

由于抖音小程序官方ci工具要求登录才能上传代码，为了方便起见我们只支持邮箱密码登录方式，这里注意，如果抖音小程序是用手机号注册的用户还要在账户中心绑定邮箱，并将邮箱及密码填入爱速搭平台。

https://developer.open-douyin.com/info?type=1

image.png

注：抖音小程序生成的预览二维码只有在 24 小时内有效，24 小时之后，当前生成的二维码将会无法访问

小程序推送​

image.png

可以选择推送的小程序类型、推送版本、环境类型、设置推送标题、选择推送小程序的门户 注意： 如果ci配置项缺失，小程序门户将禁止选中，需要提前设置好ci信息

版本号由于各端小程序的限制除微信小程序支持beta格式，其他端小程序只支持 `*.*.*` 格式的版本号

image.png

查看推送记录​

image.png

百度小程序推送记录

image.png