（1）前端框架uni-app

前端框架uni-app 可编译到iOS、Android、H5、小程序等多个平台

一套代码编到7个平台

image.png

uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。

image

image.png

image

image.png

HBuilderX内置相关环境

• HBuilderX：官方IDE下载地址

uni-app支持通过 HBuilderX可视化界面、vue-cli命令行两种方式快速创建项目

image

image

image

image

image

image

image

image

运行的快捷键是Ctrl+r

image

原生app-云端打包

image

image

uni-app 支持离线打包

image

发布为H5

manifest.json 的可视化界面

image

点击发行

image

发布为微信小程序： unpackage/dist/build/mp-weixin 生成微信小程序项目代码

image

/unpackage/dist/build/mp-baidu 生成百度小程序项目代码

image

在 /unpackage/dist/build/mp-alipay 生成支付宝小程序项目代码

image

在 /unpackage/dist/build/mp-alipay 生成头条小程序项目代码

image

发布的快捷键是Ctrl+u

通过 vue-cli 创建 uni-app 项目

全局安装vue-cli

npm install -g @vue/cli

创建uni-app

vue create -p dcloudio/uni-preset-vue my-project

image

选择自定义模板时，需要填写 uni-app 模板地址

运行发布

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

image.png

看完《uni-app官方教程》

白话uni-app

《uni-app 商业级应用实战》

《uni-app 实战教程 - “悦读”项目实战》

《uni-app实战仿糗事百科app开发》

《跟枫桥一起开发App》

H5端的浏览器有跨域限制 微信小程序会强制要求https链接 iOS对隐私控制和虚拟支付控制非常严格