北京华网天下

小程序多端开发框架是怎样的体验？

2024-05-23

来源：网络整理

----- - - - - - - -

随着移动互联网的快速发展，无数的移动APP应运而生，基于移动APP的发展，小程序、轻应用技术应运而生，无需安装、无需卸载，随时可用。

小程序是无需下载安装即可使用的应用程序，实现了“应用触手可及”的梦想，用户只需扫一扫或搜索即可打开应用，体现了“用了就走”的理念，用户无需担心安装太多应用。

它与H5最主要的区别在于内置了完全基于浏览器内核重构的解析器，并进行了针对性的优化以及定制化的开发语言标准，提升小程序的性能以及系统API和权限能力。

因此小程序的“小”体现了其轻量级的应用，无需下载，体现了“用了就走”的理念。小程序几乎可以承载一般APP的所有服务和功能。目前小程序已经成为很多企业和个人开发者的选择，让他们可以更方便地在不同平台（如微信小程序、支付宝小程序等）向用户提供业务服务和扩展。

小程序多端开发框架

市面上有很多小程序平台，微信/支付宝/百度/今日头条/飞书/QQ/快手/钉钉/淘宝等，本质上都大同小异。因此为了更高效的开发，诞生了很多小程序多端开发框架，这种多端开发框架的好处就是开发者可以编写一套代码，发布到不同的小程序平台，甚至可以发布到iOS、Web（响应式）等平台。

目前流行的多端框架有全包式、Web技术、编译式等，其中编译式不仅可以跨系统平台，还可以在浏览器端编译运行，所以编译式框架目前比较繁荣。

编译型的原理是：先选定一个DSL框架作为基础，然后基于这个DSL框架在各端编译成不同的代码，各端都有运行时框架或者兼容的组件库来保证代码的正确运行。

目前编译的多端开发框架包括Taro、uni-app、WePY等。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可以发布到 iOS、Web（响应式）、各类小程序（微信/支付宝/百度/今日头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

从下面的uni-app功能框架图可以看出，uni-app在跨平台的过程中，不牺牲平台特性，可以优雅地调用平台特有的能力，达到包容全平台、各取所长的目的。

技术生态包括uni-AD、uni-ID、uni-AD、uni-AD等，商业生态包括uni-ID、uni-AD……另外还有丰富的第三方插件市场。

基于生态系统，开发者只需关注自身业务，可以更快的完成研发工作，更适合个人或者小团队开发。

单

uni-是一个基于云的应用快速开发项目模板，集成了商业项目的常用功能。

uni-集成了应用的登录注册、个人中心、设置、权限管理、拦截器等很多常用功能，开发者可以在此基础上快速开发自己的特色业务。

Uni- 包括：

用户管理：Uni-的用户管理本质上与uni-id-集成在一起，包含多项功能：

登录注册（用户名密码登录、手机号验证码登录、APP一键登录、微信登录、微信小程序登录、手机微信扫码登录、微信公众号登录）

修改密码、忘记密码、修改头像（集成图片裁剪）、修改昵称、查看积分、退出登录、注销账号

系统设置：

内置App升级中心（整包升级、wgt升级、强制升级、后台有uni- 插件管理）

推送开关（app）、清除缓存（app）

指纹解锁（应用程序）、面部解锁（应用程序）

多语言切换

隐私权限：

首先弹出内置隐私协议对话框，然后询问用户设备权限

许可指南：

当某个App拒绝授权某些权限，但是后续使用需要这些权限时，可以这样实现：引导用户“一键跳转至系统设置”来开启这些权限。

有用的功能：

问题与反馈、关于、隐私政策、用户服务协议等

营销裂变：点击“分发推荐”，生成带用户参数的应用下载页面（H5），一键分享到微信或朋友圈，当被邀请人打开下载页面点击下载时，设备剪贴板内容将自动设置为邀请人的。

项目实践

4.1 项目简介

科技文教聚焦科技、文化、教育，由公众号、英语、AI智能古诗词、科技心理等独立功能APP产品矩阵组成，同时以星球作为情感辅助。该系列更注重大学生学习、娱乐、健康的和谐统一，用科技提升效率和业绩。

4.2 微信小程序项目研发框架搭建

4.2.1 新建项目

打开IDE编辑器，选择uni-模板，会自动生成项目。

4.2.2 初始化云服务空间

一、开通：本项目为云集成项目，其云代码需要部署在云服务空间，需要开通，登录时根据云厂商（阿里云或腾讯云）的要求进行实名认证。

其次，绑定并运行云服务空间初始化

4.2.3 微信小程序相关配置

4.2.3.1 配置微信小程序基本信息

在项目根目录.json中完成基础配置和微信小程序配置：

小程序开发指纹解锁_指纹模块开发_指纹解锁开发程序小米版

4.2.3.2 配置登录（微信登录）信息

uni-为开发者提供使用uni-id的开源、易用、安全、丰富、可扩展的用户管理框架。

uni-id已完成的功能：

关于登录方式，目前实现的有：

使用帐号和密码登录

手机号+短信验证码登录（内置短信功能）

App手机号一键认证，无需验证码（内置uni-app App一键登录能力）

三方登录：App内微信登录、ID、QQ登录；微信小程序内微信登录；支付宝小程序内支付宝账号登录；QQ小程序内QQ登录

由于第三方登录较多，uni-id-co中还留有空的实现，开发者可以对其进行补充，提交PR，或者发布扩展插件，共同完善uni-id。

一、配置登录方法：在根目录uni-..js中，配置登录方法；

其次在->->->uni--->uni-id->.json下配置mp-，以及登录过期时间等信息。

4.2.3.3 配置组件库

组件是视图层的基本构成要素，组件是对一个独立、可复用的功能模块的封装。

uni-app的组件分为基础组件和扩展组件。

基本组件

uni-app框架中已经内置了基础组件，不需要将内置组件的文件导入到项目中，也不需要注册内置组件，可以直接随时使用，比如组件。

扩展

uni-已经集成到以下内容，可直接引用。

还可以在插件市场引入第三方组件，例如组件库。

可以直接安装来自组件库等插件市场的组件，无需手动安装：

自定义组件

用户定义的组件可以放在目录中，直接在页面中使用，无需引用或注册。

只要组件安装在项目目录或者目录下，且符合/组件名/组件名.vue 目录结构，就可以直接在页面中使用，无需引用或注册。

4.2.3.4 其他配置

配置付款

它为开发者提供了简洁、易用、统一的支付能力包，让开发者无需研究支付宝、微信等支付平台的后端开发，也不需要为它们编写不同的代码，开箱即用，屏蔽差异。

uni-可以在->->->uni--->uni-pay->.js下配置：

const path = require('path')module.exports = { // 微信小程序端对应的微信支付及登录配置配置 wxConfigMp: { appId: '', secret: '', mchId: '', key: '', }, // App端对应的微信支付配置 wxConfigApp: { appId: '', mchId: '', key: '', }, // 微信PC网站支付 wxConfigH5: { appId: '', mchId: '', key: ', }, // 支付宝小程序端对应的支付宝支付及登录配置 aliConfigMp: { mchId: "", appId: "", alipayPublicKey: "", privateKey: "", }, // App端对应的支付宝支付配置 aliConfigApp: { mchId: "", appId: "", alipayPublicKey: "", privateKey: "", }}