uniapp之uni-starter小程序多端研发框架搭建与项目实践
- - - - - - START - - - - - -
随着移动互联网的飞速发展，无数移动APP琳琅满目；在移动App的发展的基础上，衍生了小程序、轻应用技术，它随时可用，但又无需安装卸载。
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
它与H5的主要区别在于基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自定义的开发语言标准，提升了小程序的性能以及系统API、权限能力。
所以，小程序的小体现的是它的轻应用性，无需下载，体现了“用完即走”的理念。小程序可以承载几乎一般所有App的业务与功能，目前小程序已经成为很多企业以及个人开发者的选择，便于他们实现在不同平台里给用户提供业务服务与拓展（如微信小程序、支付宝小程序等）。
1
小程序多端开发框架
目前市面上有微信/支付宝/百度/头条/飞书/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/快手/钉钉/淘宝）、快应用等多个平台。
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，做到海纳百川、各取所长。
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一键登录、微信登录、Apple登录、微信小程序登录、手机微信扫码登录、微信公众号内登录）
修改密码、忘记密码、头像更换（集成图片裁剪）、昵称修改、积分查看、退出登录、账号注销
系统设置：
内置App升级中心（整包升级、wgt升级、强制升级，后台搭配uni-admin的升级中心插件管理）
推送开关（app）、清除缓存（app）
指纹解锁（app）、人脸解锁（app）
多语言切换
隐私权限：
内置Android先弹出隐私协议对话框，然后再向用户申请设备权限
权限引导：
当应用拒绝授权某些权限，但在后续使用中又需要这个权限；此时实现：引导用户可“一键跳转至系统设置”中开启。
实用功能：
问题与反馈、关于、隐私政策、用户服务协议等
营销裂变：点击“分销推荐”，生成带用户inviteCode参数的应用下载页（H5），一键分享到微信或微信朋友圈等。被邀请人打开下载页面点击下载，设备剪贴板的内容会被自动设置为邀请者的inviteCode。
04
AIPHD项目实践
AIPHD科技文教专注于科技文教，由AIPHD公众号，AIPHD英语、AI智能古诗、AIPHD科技心理等具有独立功能的APP产品矩阵组成，同时将AIMANT星球作为情感辅助。AIPHD系列更注重于大学生学习、娱乐与健康的和谐统一，用科技提升效率与成绩。
打开uniapp的IDE编辑器HBuilderX，选择uni-starter项目模版，会自动生成项目。
首先，开通uniCloud：本项目是云端一体的，它的云端代码需要部署在uniCloud云服务空间里，需要开通uniCloud。在https://unicloud.dcloud.net.cn/登录，按云厂商（阿里云或腾讯云）要求进行实名认证。
其次，绑定以及运行云服务空间初始化
在项目根目录manifest.json下，完成基础配置和微信小程序配置：
uni-starter使用uni-id为开发者提供了开源、易用、安全、丰富、可扩展的用户管理框架。
uni-id已完成的功能：
注册、登录、发送短信验证码、密码加密保存、修改密码、忘记密码、头像管理、token管理、rbac权限角色体系、页面访问权限路由控制、用户邀请裂变、用户签到、日志记录、账户防刷等。
关于登录方式，目前已实现：
账户密码登录
手机号+短信验证码登录 （内置uniCloud短信能力）
App手机号一键认证，免验证码（内置uni-app App一键登录能力）
三方登录：App中的微信登录、Apple ID、QQ登录；微信小程序中的微信登录；支付宝小程序中的支付宝账户登录；QQ小程序中的QQ登录
由于三方登录很多，在uni-id-co中留下了空实现，开发者可以自行补充、提交pr或发布扩展插件，共同完善uni-id。
首先，配置登录方式：在根目录uni-starter.config.js下，配置登录方式；
其次，在uniCloud->cloudfunctions->common->uni-config-center->uni-id->config.json下配置mp-weixinappid、appsecret，以及登录过期时间等信息。
组件是视图层的基本组成单元。组件是一个单独且可复用的功能模块的封装。
uni-app的组件，分为基础组件和扩展组件。
基础组件
基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。
扩展组件
uni-starter已经集成到uni_modules下，可以直接引用。
也可以在插件市场引入第三方组件，例如uViewUI组件库。
uViewUI组件库等插件市场的组件可以直接安装，无需手动安装：
自定义组件
用户自定义的组件可以放在components目录下，不用引用、注册，直接在页面中使用。
只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
unipay为uniCloud开发者提供了简单、易用、统一的支付能力封装。让开发者无需研究支付宝、微信等支付平台的后端开发、无需为它们编写不同代码，拿来即用，屏蔽差异。
uni-starter项目可在uniCloud->cloudfunctions->common->uni-config-center->uni-pay->config.js下配置：
= require('path')= {// 微信小程序端对应的微信支付及登录配置配置: {: '',: '',: '',: '',},// App端对应的微信支付配置: {: '',mchId: '',: '',},// 微信PC网站支付: {: '',: '',: ',},// 支付宝小程序端对应的支付宝支付及登录配置: {: "",: "",: "",: "",},// App端对应的支付宝支付配置: {: "",: "",: "",: "",}}
uniad支持APP，H5和微信小程序广告。具体配置请参考uni-AD广告联盟。
至此，基于uni-starter的微信小程序项目研发框架搭建完成，开发者可以依据具体的业务需求，使用uniCloud的进行数据库设计、云函数实现接口，使用Vue相关的技术栈完成业务页面的搭建，从而实现整个微信小程序的研发。
微信小程序的研发完成后，不仅可以发布到微信小程序以及支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝等各种小程序，也可以发布到iOS、Android、Web（响应式）等多个平台。
微信小程序基础包大小为2M，如果大于2M需要分包处理。具体分包请参看《分包优化的说明》。
微信小程序后台需要配置小程序服务端的白名单，要在开发->开发管理->开发设置->服务器域名下进行request合法域名，uploadFile、downloadFile合法域名等配置。具体厂商的域名请查看《小程序域名白名单》。
如果开了uni统计，也需要开通统计白名单。
小程序如有用到打开地图选择位置等地理位置，小程序运动打卡到微信运动等其他接口权限，需要提前在开发->开发管理->接口设置下进行申请权限。
微信小程序发布需要通过一定的规范审核。具体请查看《具体运营规范》。
🎉🎈相关的应用小程序上线啦，快来体验！💫✨
AIPHD英语 AI智能古诗 AIPHD科技心理 AIMANT星球
- - - - - - END - - - - - -