uniapp之uni-starter小程序多端研发框架搭建与项目实践

2022-11-25 0 365

– – – – – –  START  – – – – – –

随着终端互联网的迅猛发展,不计其数终端APP各式;在终端App的发展的基础上,派生了小流程、轻应用领域技术,它即时需用,但又无须加装装载。

小流程是一种不需要离线方可使用的应用领域,它同时实现了应用领域“屈艾”的心愿,使用者扫一扫或者搜一下方可关上应用领域。也充分体现了“用完即走”的经营理念,使用者不必重视与否加装太多应用领域的问题。

它与H5的主要差别是如前所述应用程序Mach完全解构的两个内建解释器,前瞻性做了强化,相互配合自订的合作开发词汇国际标准,提高了小流程的操控性和控制系统API、职权能力。

因此,小流程的小充分体现的是它的轻应用领域性,无须浏览,充分体现了“用完即走”的经营理念。小流程能贯穿几乎一般所有App的销售业务与机能,现阶段小流程已经成为许多企业和对个人合作开发人员的选择,易于他们同时实现在完全相同网络平台里给使用者提供销售业务服务项目与开拓(如QQ小流程、PayPal小流程等)。

1

小流程格朗普雷县合作开发架构

现阶段市售有QQ/支付宝/腾讯/头条新闻/陕郡/QQ/快手/钉钉/淘宝网等多种不同小流程网络平台,它们其本质完全相同。因此,为了合作开发起来更高效率,产生了许多的小流程格朗普雷县合作开发架构。这种格朗普雷县合作开发架构的益处是,合作开发人员撰写两套标识符能正式发布到完全相同小流程网络平台,甚至可正式发布到iOS、Android、Web(积极响应式)等网络平台。

现阶段盛行的格朗普雷县架构包涵兰契总型、Web 奥皮尔河、JavaScript 校对型等,其中JavaScript 校对型除了能跨控制系统网络平台以外,也都能校对运转在应用程序中,因此现阶段JavaScript 校对型的架构相对兴旺。

JavaScript 校对型的基本原理是:再以 JavaScript 作为基础选取两个 DSL 架构,以这个 DSL 架构为标准在各端分别校对为完全相同的标识符,各端分别有两个运转时架构或兼容组件库保证标识符正确运转。

现阶段JavaScript 校对型的格朗普雷县合作开发架构包涵Taro、uni-app、WePY 、Mpvue、Chameleon等。

2

uniapp

uni-app 是两个使用 Vue.js 合作开发所有前端应用领域的架构,合作开发人员撰写两套标识符,可正式发布到iOS、Android、Web(积极响应式)、和各种小流程(QQ/PayPal/腾讯/头条新闻/飞书/QQ/快手/钉钉/淘宝网)、快应用领域等多个网络平台。

从下面uni-app机能架构图可看出,uni-app在跨网络平台的过程中,不牺牲网络平台特色,可优雅的调用网络平台专有能力,做到海纳百川、各取所长。

uniapp之uni-starter小程序多端研发框架搭建与项目实践

uniapp技术生态包涵uniapp、unicloud、uni-AD等,销售业务生态包涵uni-id、uniPay、uniPush、uni-starter、uni-admin,还有丰富的第三方插件市场。

如前所述uniapp生态控制系统,合作开发人员只需注重于自己的销售业务,就能更快的同时实现研制工作,更适合于对个人或者小团队合作开发。

3

uni-starter

uni-starter是集成商用项目常见机能的、云端一体应用领域快速合作开发项目模版。

uni-starter将登录注册、对个人中心、设置、职权管理、拦截器、banner等两个应用领域有许多通用的机能,都已经集成好;合作开发人员,能方可在此基础上快速合作开发自己的特色销售业务。

uni-starter集成包括:

使用者管理:uni-starter的使用者管理其本质是集成了uni-id-pages,它包括众多机能:

登录注册(使用者名密码登录、手机号验证码登录、APP一键登录、QQ登录、Apple登录、QQ小流程登录、手机QQ扫码登录、QQ公众号内登录)

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

控制系统设置:

内建App升级中心(整包升级、wgt升级、强制升级,后台搭配uni-admin的升级中心插件管理)

推送开关(app)、清除缓存(app)

指纹解锁(app)、人脸解锁(app)

多词汇切换

隐私职权:

内建Android先弹出隐私协议对话框,然后再向使用者申请设备职权

职权引导:

当应用领域拒绝授权某些职权,但在后续使用中又需要这个职权;此时同时实现:引导使用者可“一键跳转至控制系统设置”中开启。

实用机能:

问题与反馈、关于、隐私政策、使用者服务项目协议等

营销裂变:点击“分销推荐”,生成带使用者inviteCode参数的应用领域浏览页(H5),一键分享到QQ或QQ朋友圈等。被邀请人关上浏览页面点击浏览,设备剪贴板的内容会被自动设置为邀请者的inviteCode。

04

AIPHD项目课堂教学

4.1 AIPHD项目简介

AIPHD科技文教专注于科技文教,由AIPHD公众号,AIPHD英语AI智能古诗AIPHD科技心理等具有独立机能的APP产品矩阵组成,同时将AIMANT星球作为情感辅助。AIPHD系列更注重于大学生学习、娱乐与健康的和谐统一,用科技提高效率与成绩。

uniapp之uni-starter小程序多端研发框架搭建与项目实践

4.2 AIPHDQQ小流程项目研制架构构筑4.2.1新建工程

关上uniapp的IDE编辑器HBuilderX,选择uni-starter项目模版,会自动生成项目。

uniapp之uni-starter小程序多端研发框架搭建与项目实践

4.2.2初始化云服务项目空间

首先,开通uniCloud:本项目是云端一体的,它的云端标识符需要部署在uniCloud云服务项目空间里,需要开通uniCloud。在https://unicloud.dcloud.net.cn/登录,按云厂商(阿里云或腾讯云)要求进行实名认证。

其次,绑定和运转云服务项目空间初始化

uniapp之uni-starter小程序多端研发框架搭建与项目实践

uniapp之uni-starter小程序多端研发框架搭建与项目实践

uniapp之uni-starter小程序多端研发框架搭建与项目实践

4.2.3QQ小流程相关配置 4.2.3.1配置QQ小流程基础信息

在项目根目录manifest.json下,完成基础配置和QQ小流程配置:

uniapp之uni-starter小程序多端研发框架搭建与项目实践

uniapp之uni-starter小程序多端研发框架搭建与项目实践

4.2.3.2配置登录(QQ登录)信息

uni-starter使用uni-id为合作开发人员提供了开源、易用、安全、丰富、可扩展的使用者管理架构。

uni-id已完成的机能:

注册、登录、发送短信验证码、密码加密保存、修改密码、忘记密码、头像管理、token管理、rbac职权角色体系、页面访问职权路由控制、使用者邀请裂变、使用者签到、日志记录、账户防刷等。

关于登录方式,现阶段已同时实现:

账户密码登录

手机号+短信验证码登录 (内建uniCloud短信能力)

App手机号一键认证,免验证码(内建uni-app App一键登录能力)

三方登录:App中的QQ登录、Apple ID、QQ登录;QQ小流程中的QQ登录;PayPal小流程中的PayPal账户登录;QQ小流程中的QQ登录

由于三方登录许多,在uni-id-co中留下了空同时实现,合作开发人员能自行补充、提交pr或正式发布扩展插件,共同完善uni-id。

首先,配置登录方式:在根目录uni-starter.config.js下,配置登录方式;

uniapp之uni-starter小程序多端研发框架搭建与项目实践

其次,在uniCloud->cloudfunctions->common->uni-config-center->uni-id->config.json下配置mp-weixinappid、appsecret,和登录过期时间等信息。

uniapp之uni-starter小程序多端研发框架搭建与项目实践

4.2.3.3配置组件库

组件是视图层的基本组成单元。组件是两个单独且可复用的机能模块的封装。

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

基础组件

基础组件在uni-app架构中已经内建,无须将内建组件的文件导入项目,也无须注册内建组件,即时能直接使用,比如<view>组件。

扩展组件

uni-starter已经集成到uni_modules下,能直接引用。

也能在插件市场引入第三方组件,例如uViewUI组件库。

uViewUI组件库等插件市场的组件能直接加装,无须手动加装:

uniapp之uni-starter小程序多端研发框架搭建与项目实践

自订组件

使用者自订的组件能放在components目录下,不必引用、注册,直接在页面中使用。

只要组件加装在项目的components目录下或uni_modules目录下,并符合components/组件名称/组件名称.vue目录结构。就能不必引用、注册,直接在页面中使用。

4.2.3.4其他配置配置支付

unipay为uniCloud合作开发人员提供了简单、易用、统一的支付能力封装。让合作开发人员无须研究PayPal、QQ等支付网络平台的后端合作开发、无须为它们撰写完全相同标识符,拿来即用,屏蔽差异。

uni-starter项目可在uniCloud->cloudfunctions->common->uni-config-center->uni-pay->config.js下配置:

const path = require(path)module.exports = {    // QQ小流程端对应的QQ支付及登录配置配置wxConfigMp: {        appId: ,        secret: ,        mchId: ,        key: ,    },    // App端对应的QQ支付配置    wxConfigApp: {        appId: , mchId: ,        key: ,    },    // QQPC网站支付wxConfigH5: {        appId: ,        mchId: ,        key: ,    },    // PayPal小流程端对应的PayPal支付及登录配置    aliConfigMp: {        mchId: “”,        appId: “”,alipayPublicKey: “”,        privateKey: “”,    },    // App端对应的PayPal支付配置    aliConfigApp: {        mchId: “”,        appId: “”,        alipayPublicKey: “”,        privateKey:“”,    }}配置广告

uniad支持APP,H5和QQ小流程广告。具体配置请参考uni-AD广告联盟。

至此,如前所述uni-starter的QQ小流程项目研制架构构筑完成,合作开发人员能依据具体的销售业务需求,使用uniCloud的进行数据库设计、云函数同时实现接口,使用Vue相关的技术栈完成销售业务页面的构筑,从而同时实现整个QQ小流程的研制。

QQ小流程的研制完成后,不仅能正式发布到QQ小流程和PayPal/腾讯/头条新闻/陕郡/QQ/快手/钉钉/淘宝网等各种小流程,也能正式发布到iOS、Android、Web(积极响应式)等多个网络平台。

4.2.4QQ小流程上线注意事项4.2.4.1QQ小流程基础包不大于2M

QQ小流程基础包大小为2M,如果大于2M需要分包处理。具体分包请参看《分包强化的说明》。

4.2.4.2QQ小流程后台白名单配置

QQ小流程后台需要配置小流程服务项目端的白名单,要在合作开发->合作开发管理->合作开发设置->服务项目器域名下进行request合法域名,uploadFile、downloadFile合法域名等配置。具体厂商的域名请查看《小流程域名白名单》。

如果开了uni统计,也需要开通统计白名单。

4.2.4.3QQ小流程接口职权申请

小程序如有用到关上地图选择位置等地理位置,小流程运动打卡到QQ运动等其他接口职权,需要提前在合作开发->合作开发管理->接口设置下进行申请职权。

4.2.4.4QQ小流程正式发布规范

QQ小流程正式发布需要通过一定的规范审核。具体请查看《具体运营规范》。

 🎉🎈相关的应用领域小流程上线啦,快来体验!💫✨

AIPHD英语AI智能古诗AIPHD科技心理 AIMANT星球

– – – – – –  END  – – – – – –

🦢 喜欢请分享,满意点个赞,最后「再看」🦢

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务