uni-app
<h2><strong>什么是 uni-app</strong></h2><p>uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。</p>
<p>uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。</p>
<h2>使用 uni-app 的前置条件</h2>
<p>不要认为uni-app 可以跨多端，就感觉开发难度会直线上升。如果说，你开发过小程序，恰好又会vue， 那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话，我建议你花一些时间，看一看他们的官方文档。再回来学习uni-app。</p>
<h4>为了更好的跨端开发， 参考uni-app 统一规范：<br>
</h4>
<p>页面组件我们要遵循Vue 单文件组件 (SFC) 规范</p>
<p>组件标签靠近微信小程序规范</p>
<p>接口能力（JS API）靠近微信小程序规范</p>
<p>数据绑定及事件处理靠近Vue.js 规范，同时补充了App及页面的生命周期</p>
<p>为兼容多端运行，建议使用flex布局进行开发</p>
<h2>开发工具</h2>
<p>毫无疑问，首选使用官方推出的HBuilderX 编辑器</p>
<p>可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。</p>
<h4>框架目录见下:<br>
</h4>
<blockquote>
<p>┌─components uni-app组件目录</p>
<p>│ └─comp-a.vue 可复用的a组件</p>
<p>├─hybrid 存放本地网页的目录，详见</p>
<p>├─platforms 存放各平台专用页面的目录，详见</p>
<p>├─pages 业务页面文件存放的目录</p>
<p>│ ├─index</p>
<p>│ │ └─index.vue index页面</p>
<p>│ └─list</p>
<p>│ └─list.vue list页面</p>
<p>├─static 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此</p>
<p>├─main.js Vue初始化入口文件</p>
<p>├─App.vue 应用配置，用来配置App全局样式以及监听</p>
<p>├─manifest.json 配置应用名称、appid、logo、版本等打包信息</p>
<p>└─pages.json 配置页面路由、导航条、选项卡等页面类信息</p>
</blockquote>
<h2>小程序（微信、支付宝、百度、头条、QQ、360）</h2>
<p>如果要开发小程序，我们需要知道不同平台下的小程序规范的 。规范了解之后，我们开发起来就相对来说比较简单一些。uni-app 帮我们把不同平台的小程序API 几乎都封装了 ，只需要将前缀替换为uni 即可 例如： </p>
<p>我们调用微信小程序的request 请求</p>
<blockquote>
<p>wx.request({</p>
<p> url: 'https://www.example.com/request', //仅为示例，并非真实接口地址</p>
<p> data: {</p>
<p> text: 'uni.request'</p>
<p> },</p>
<p> header: {</p>
<p> 'custom-header': 'hello' //自定义请求头信息</p>
<p> },</p>
<p> success: (res) => {</p>
<p> console.log(res.data);</p>
<p> this.text = 'request success';</p>
<p> }</p>
<p>});</p>
</blockquote>
<p>我们使用uni-app 的request 请求</p>
<blockquote>
<p>uni.request({</p>
<p> url: 'https://www.example.com/request', //仅为示例，并非真实接口地址</p>
<p> data: {</p>
<p> text: 'uni.request'</p>
<p> },</p>
<p> header: {</p>
<p> 'custom-header': 'hello' //自定义请求头信息</p>
<p> },</p>
<p> success: (res) => {</p>
<p> console.log(res.data);</p>
<p> this.text = 'request success';</p>
<p> }</p>
<p>});</p>
</blockquote>
<p>除了前缀wx 替换为uni之外，其他与原规范机会保持一致。uni-app 会最大程度的抹平不同小程序平台之间的差异。</p>
<h2>App（ios、安卓）</h2>
<p>uni-app 在App 端不仅可以使用绝大多数的小程序相关的API，同时也可以使用5+API 很好的补足了小程序上一些还没有实现的功能。同时，App 端内置weex 引擎，提供了原生渲染能力。让你 App 性能更好。</p>
<h2>H5</h2>
<p>h5 基本上跟常规vue 开发没有什么区别， 唯一需要注意的是，有些API 是不能在h5 中使用，注意文档中标注的平台差异说明。</p>
<h2>如何实现跨端</h2>
<p>虽说是跨端，但是肯定是有情况是不支持的，比如遇到有些平台特有的API 怎么办 ？不用担心，这些问题uni-app 都为你想到了，那就是使用条件编译。</p>
<h2>条件编译</h2>
<p>在C 语言中，通过#ifdef、#ifndef 的方式，为windows、mac 等不同os 编译不同的代码，uni-app 参考这个思路，为uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现 。</p>
<p>条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用// 注释、css 使用、vue/nvue 模板里使用 ``。</p>
<p>举个例子：</p>
<blockquote>
<p>// #ifdef %PLATFORM%</p>
<p>平台特有的API实现</p>
<p>// #endif</p>
<p>// #ifndef H5</p>
<p>// 表示只有 h5 不使用这个 api</p>
<p>uni.createAnimation(OBJECT)</p>
<p>// #endif</p>
</blockquote>
<h2>注意事项</h2>
<p>非H5 端，不能使用浏览器自带对象，比如document、window、localstorage、cookie 等，更不能使用jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发，uni 提供的api 足够完成业务。</p>
<p>uni-app 的tag 同小程序的tag，和HTML 的tag 不一样，比如div 要改成view，span 要改成text、a 要改成navigator。</p><br><br>
来源：https://www.cnblogs.com/wenkangIT/p/15201142.html
頁:
[1]