模板建站广团,大良营销网站建设教程,如何制作一个静态网站源码,泉州网络推广公司前言今天来聊一下前端必备技能——小程序开发。从最早发布的微信小程序#xff0c;到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序#xff0c;还有最近发布的360小程序#xff0c;面对这么多套的代码#xff0c;开发者该如何开发呢#xff1f;当业务要求同时…前言今天来聊一下前端必备技能——小程序开发。从最早发布的微信小程序到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序还有最近发布的360小程序面对这么多套的代码开发者该如何开发呢当业务要求同时在不同的端都要展现时候针对不同的端去编写多套代码的成本显然非常高。这时候只需编写一套代码就能够适配多端的能力就显得尤为需要。今天就来给大家介绍一款使用Vue的跨端框架——uni-appuni-app 框架简介uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架可编译到 iOS、Android、H5、以及各种小程序微信/支付宝/百度/头条/QQ/钉钉等平台。uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等 6 大关键指标上拥有极强的竞争优势开发者/案例数量更多跨端抹平度/扩展灵活性(通过条件编译调用专有能力而不影响其他平台)性能体验更优秀(App 端支持 weex 渲染带来更流畅的用户体验。)周边生态丰富(推出插件市场能够提供较多的组件和模板真正做到开箱即用)学习成本低(采用Vue.js 语法 小程序 API)开发成本低(不止开发成本招聘、管理、测试各方面成本都大幅下降。)虽然不同端框架环境千变万化无论各类小程序、Weex、React-Native、Flutter、快应用它们万变不离其宗的是MVVM架构设计思想。uni-app希望既能用一套代码完成所有端需求将相同的业务逻辑完成收敛到同一层系统里面又不会因为项目的抽象一致导致可维护性变差。开发工具通过 HBuilderX 可视化界面 HBuilderX 内置相关环境开箱即用无需配置 nodejs。开发语言使用Vue.js 小程序 API进行开发。数据绑定及事件处理同 Vue.js 规范同时补充了 App 及页面的生命周期。uni-app 帮我们把不同平台的小程序API 几乎都封装了 只需要将前缀替换为 uni 即可 举例说明在微信中发送 request 请求wx.request({url: https://www.example.com/request, //仅为示例并非真实接口地址success: res {console.log(res.data);}
});
在 uni-app中发送 request 请求uni.request({url: https://www.example.com/request, //仅为示例并非真实接口地址success: res {console.log(res.data);}
});
了解微信小程序的你是不是感觉很简单呢无非就是把 wx 前缀 换成了 uni 而已而且uni.request是全端通用的 ajax 请求 API 哦最大程度的降低开发者的学习成本。如何解决跨端兼容问题每个平台有自己的一些特性因此会存在一些无法跨平台的情况。uni-app 提供了条件编译手段在一个工程里优雅的完成了平台个性化实现。view classcontent! -- #ifdef MP-WEIXIN --view只会编译到微信小程序/view! -- #endif --! -- #ifdef APP-PLUS --view只会编译到app/view! -- #endif --
/view
nvue 模式uni-app 里根据编译配置不同可以使用 weex 的组件也可以使用小程序组件(即uni-app组件)。编写页面时页面后缀名为 .nvue (native vue 的缩写)uni-app App 端内置 weex 渲染引擎提供了原生渲染能力让uni-app在App端有更好的表现。nvue 相当于给 weex 补充了大量 uni-app 的组件和 api以及丰富的 Plus API、Native.js、原生插件。了解更多 nvue官方 ui 库uni-uiuni-ui是DCloud提供的一个跨端ui库它是基于vue组件的、flex 布局的、无 dom 的跨全端 ui库。web 开发中有的开发者习惯用一个ui库完成所有开发但在uni-app体系中推荐开发者首先使用性能更高的基础组件然后按需引入必要的扩展组件。GitHub 地址uni-ui看到这里你是不是觉得特别心动了呢别着急让我们看一下uni-app的开发规范。uni-app 开发规范为了实现多端兼容综合考虑编译速度、运行性能等因素uni-app 约定了如下开发规范页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范详见uni-app 组件规范接口能力JS API靠近微信小程序规范但需将前缀 wx 替换为 uni详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范同时补充了 App 及页面的生命周期为兼容多端运行建议使用 flex 布局进行开发关于各端的管理规则需要耐心学习uni-app 并不难学但我们注意到很多新人在适应各个平台的规则限制时很焦躁。uni-app 跨了很多端虽然代码层面可以开发一次生成多端。但注意每个端有每个端的管理规则这与开发无关但每个开发者仍然要耐心掌握这些规则限制。比如 H5 端的浏览器有跨域限制比如微信小程序会强制要求 https 链接并且所有要联网的服务器域名都要配到微信的白名单中比如 App 端iOS 对隐私控制和虚拟支付控制非常严格比如 App 端Android、国产 rom 各种兼容性差异尤其是因为谷歌服务被墙导致的 push、定位等开发混乱的坑如果你的 App 要使用三方 sdk比如定位、地图、支付、推送…还要遵循他们的规则和限制总结uni-ui 对比其他框架主要有两个优势如何在有限前端团队人数下搞定更多平台是需要首要考虑的原因跨端方面uni-app更成熟。团队里熟悉vue技术栈的同学多一点则使用uni-app内部培训时间短、风险低。开发需要注意的点注意各端的差异性很多东西h5 是对的上真机就错了真机好着的换小程序就错了不同小程序之间还有差异总之就是考虑好不同的情况重点是仔细阅读文档。由于 uni-app 框架集成了5API一些需要原生功能 uniapp 也可以通过5API去进行实现。很多的坑还是因为多端不兼容除了写起来麻烦一点基本上都还是有可以解决的策略。关于 uni-app 的更多信息可以参考官方文档 uni-app - 多端开发框架 或者直接前往 GitHub 仓库 uni-app查看 uni-app 文档及相关资料。欢迎前去 star 或是提 issue 哈。github地址https://github.com/dcloudio/uni-app/PS我现在在写一个 ui 库接下来我应该会写一些如何从零实现一个 ui 库方面的文章欢迎有这方面经验的小伙伴们相互交流一下。
