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