uni-app官方教程学习手记

<blockquote>本人微信公众号：<strong>前端修炼之路</strong>，欢迎关注</blockquote> <h1>背景介绍</h1> <p>大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hello示例教程。通过一番努力，在云端打包成功了。当时这个软件还不够完善，用iphone真机模拟运行时，还会存在中文乱码问题。我还特地提交了一个bug。</p> <p>当时以为这个框架真的好用。早先开发过混合app，也就是在webview下内嵌html5页面，常常会出现卡顿的和性能问题。这个解决方案DCloud自己也提供了，就是mui。可是uni-app是不同的，一套代码，能够完美的运行在安卓、苹果、小程序甚至将来会支持H5页面。想一想都以为蛮兴奋的。</p> <p>而后我并无动手去作任何项目，毕竟是新项目还须要发展一段时间。再有就是前端水太深，不能瞎折腾，时刻保持关注就行。一旦有需求，随时能最快上手就是最好的。</p> <p>这两天恰好朋友有个项目让我接手。仔细了解了下项目状况，发现项目刚开始作，由一个前端人员采用mui框架作的。作了不到一半页面就跑路了。这个项目没有任何的安卓或者苹果的开发人员，朋友跟我也没有任何相关的客户端开发经验。</p> <p>我这么一听，一会儿想起来uni-app了。这就是个机会啊，既能接私活挣钱，又能学习新技术积累经验，更重要的是，一旦这个项目作成，就意味着本身不只仅只会html、css、js了。之后能够吹牛逼说，我丫的客户端IOS和Android都能搞定~ 想一想之后求职面试向面试官吹牛，我就有点小激动~~ 扯偏了 :)</p> <h1>学习手记</h1> <p>甭管多高深的框架，要想学习就得老老实实的去看官网。我又去看了一下官网，发现才隔了不到两个月，更新的内容仍是蛮多的。更新得越频繁，说明框架越有活力，也就更值得我去折腾一下。大概的看了下文档以后，心中的第一个疑问就冒出来了。</p> <p>既然mui和uni-app都是DCloud出品，mui能直接平滑过渡到uni-app不？ 官方给出的答案是否认的。</p> <blockquote>若是已有5+或mui App、wap2app、原生App，是没法迁移到uni-app的。</blockquote> <p>而后我就想起来，以前的webview存在的性能卡顿问题，看到官网给出的答案，我就放心了。也就下定决心，将朋友的mui项目改写成uni-app的。</p> <blockquote><ul> <li>对于Hybrid方案，uni-app比普通基于webview的Hybrid方案体验更好，包括比DCloud以前的mui体验更好。</li> <li>对比纯原生渲染的方案，体验差很少，但易用性和生态完整度上uni-app明显胜出（uni-app自身功能组件丰富，而且小程序的周边丰富生态均可以用于跨平台开发）。</li> </ul></blockquote> <p>心中的顾虑都解除了，那就开始学习这个框架吧。如下内容基本都来源于官方网站，仅此记录本身学习过程~</p> <p>官方给出了一个视频：<a href="https://ke.qq.com/course/343370" rel="nofollow noreferrer">https://ke.qq.com/course/343370</a>，老老实实地认真看过了视频，加上以前运行过demo，心中有了个大概。</p> <p>光看视频是不行的，感受像是明白了，等到一动手操做的时候，就会发现哪里忘记或者记错了。因此我新建了一个仓库在腾讯云开发者平台，由于目前腾讯云是免费的，不限制建立项目数量，因此能够随便折腾。</p> <h2>新建项目时注意事项</h2> <ul> <li>HBuilder X提倡使用快捷键开发，因此尽可能使用快捷键。这点在视频中有提到。我以为仍是很是好的一款编辑器。</li> <li>若是是练习项目，能够选择hello 模版。也能够在hello模版基础上二次开发。</li> <li>新建空白的项目须要拷贝uni.css和uni.js，保存到common目录。照着视频作，直接拷贝，很是方便</li> <li>新建的项目须要修改内容页面的标题，打开<code>pages.json</code>将文件中的<code>navigationBarTitleText</code>修改为本身的标题便可。</li> </ul> <h2>使用代码进行编辑</h2> <p>视频中随便敲了一下键盘，噼里啪啦的出现了一堆的代码，感受仍是不错的。应该是内置了一个代码块。因此去官网查了一下，果真nice。内置了不少的代码块。代码块分为Tag代码块、JS代码块。<a href="https://uniapp.dcloud.io/snippet" rel="nofollow noreferrer">使用代码块直接建立组件模板</a></p> <h3>新闻列表页 index.vue</h3> <p>视频中就是一个新闻列表页，而列表页也就是一个列表而已。在<code>index.vue</code>中编写以下代码。</p> <ul> <li> <code>v-for</code>表示要循环的语句，其中的<code>news</code>是在js部分中的<code>data</code>定义的属性，表示新闻列表。<code>v-for</code>中的<code>item</code>表示一个列表项，也就是一个新闻；<code>index</code>表示列表的下标。</li> <li> <code>@tap</code>表示绑定点击事件。由于是在移动端，仍是不要写<code>@click</code>了。<code>click</code>事件在移动端会有300ms的延迟</li> <li> <code>:data-postid</code>表示绑定一个动态的数据，而<code>postid</code>表示这个动态的数据属性是这个名字。</li> <li>若是想直接输出数据中的内容，经过<code>{{}}</code>两对大括号将数据内容包裹在里面便可。例如<code>{{item.title}}</code> </li> <li>视频中特别强调了声明<code>data</code>属性时要注意，必须声明为返回一个初始数据对象的函数。只须要更新最新版本的HBuilder X 新建页面的时候就会自动生成。</li> <li>编写js代码的时候，编辑器会自动用eslint对代码进行检查。能够经过<code>工具-插件配置-eslint-vue</code>查看和修改配置项。</li> <li> <code>onLoad</code>是页面的生命周期。uni-app 完整支持 Vue 实例的生命周期，同时还支持应用生命周期及页面生命周期</li> <li> <code>uni.request</code>是发起请求，直接经过代码块敲代码会特别快。另外这个接口跟ajax仍是有些不太同样的。例如发送给服务器的数据都是string类型的。具体能够查看文档<a href="https://uniapp.dcloud.io/api/request/request" rel="nofollow noreferrer">发起网络请求</a>。</li> <li>关于项目目录、开发规范必定要遵照，直接经过官网学习便可。<a href="https://uniapp.dcloud.io/frame?id=%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83" rel="nofollow noreferrer">开发规范</a> </li> </ul>

<template>
    <view class="content">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opennews" :data-postid="item.post_id">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.title}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                news: []
            };
        },
        onLoad:function(){
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    this.news = res.data;
                },
                fail: () => {},
                complete: () => {}
            });
        },
        methods:{
            opennews(e){
                uni.navigateTo({
                    url: '../news/news?postid='+e.currentTarget.dataset.postid
                });
            }
        }
    }
</script>

<style>
    .uni-media-list-body{height: auto;}
    .uni-media-list-text-top{line-height: 1.6em;}
</style>

<p>这个列表页面就算完成了。经过总体代码，能够发现采用vue这种开发模式，代码如此的简洁，总共才不到50行的代码。相比较于传统的jQuery方式，不知道要方便多少倍。经过代码，再一次鼓舞我继续下去，将项目修改为uni-app项目，无论工做量有多么大，也无论坑有多深了。</p> <h3>新闻详情页 news.vue</h3> <p>新闻详情页，超级简单，所有代码才区区40行。就能够比较好的展现页面了。由于新闻页面通常都包含<code>&lt;p&gt;&lt;/p&gt;</code>标签等富文本内容，因此使用uni-app提供的内置组件<a href="https://uniapp.dcloud.io/component/rich-text" rel="nofollow noreferrer">rich-text</a>来实现。</p> <p>另外须要注意的就是，在页面的<code>onLoad</code>函数中，接到的参数<code>e</code>，实际上就是在页面index.vue传过来的参数。这种页面之间传参的方式很是方便。不用写任何多余的代码。</p>

<template>
    <view class="wrap">
        <view class="title">
            {{title}}
        </view>
        <view class="content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: '',
                content: ''
            };
        },
        onLoad:function(e){
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.postid,
                method: 'GET',
                data: {},
                success: res => {
                    this.title = res.data.title;
                    this.content = res.data.content;
                },
                fail: () => {},
                complete: () => {}
            });
        }
    }
</script>

<style>
    .wrap{padding: 10upx 2%;width: 96%;flex-wrap: wrap;}
    .title{line-height: 2em;font-weight: bold;font-size: 40upx;}
    .content{line-height: 2em;}
</style>

<h2>运行和调试项目</h2> <p>uni-app调试是在微信开发者工具之中调试的。因此本地必定要按照这个软件。以后<code>ctrl+R</code>，在微信中运行就能够调试了。开发App程序和微信小程序都须要在微信开发者工具之中调试。<a href="https://uniapp.dcloud.io/snippet?id=%E8%BF%90%E8%A1%8C%E4%B8%8E%E8%B0%83%E8%AF%95%E4%BB%8B%E7%BB%8D" rel="nofollow noreferrer">运行与调试介绍</a></p> <p>我以为仍是很是方便的，由于首先在HBuilder X 编辑代码以后，按下<code>ctrl+s</code>，会自动编译，而后就会自动刷新微信开发者工具。这就好像是前端开发中会使用自动刷新工具同样。之前我开发的时候还会专门去用一些工具去作到实时刷新，而后能够双屏幕开发。可是我发现没有那个第三方软件作得比较好的，因此每次在浏览器里我仍是须要手动刷新。可是这个HBuilder X 内置的实时刷新，是很是好用的。</p> <p>另外就是编译的时候会对代码进行检查，若是有错误会直接在控制台报错。</p> <p>最后就是发布安卓包和苹果包了。由于我没有申请相应的开发者证书，不能进行本地打包。这里仍是要对HBuilder X 再点一个赞的。它在软件内部集成了一个打包工具，支持本地打包和云打包。若是使用云打包还可使用Dcloud 公用的开发者证书进行测试，或者使用本身的开发者证书。很是很是的方便。</p> <p>我将本身作的第一个新闻列表、新闻详情程序打包，安装到了安卓手机上测试了下，效果很是棒。由于个人苹果手机没有越狱，我也不想对本身手机越狱，就没有测试苹果系统下效果。</p> <h2>用Mock模拟虚拟数据。</h2> <p>在看这个项目以前，我一直没有使用过Mock数据，进行开发。主要是我没有接触过。可是恰好在接这个项目的前一天，我知道了还有Mock数据这个东西，而后就学习了一下。我才发现本身是有多么的懒惰，没有学习这个技能。Mock数据简直是前端开发的神器啊。在实际项目开发中，常常是前端开发完成了，后端数据尚未到。等后端数据到了，会发现接口跟当初预约的接口不一致了，等各类意想不到的问题。尤为是在等接口的过程当中，我之前是本身写假数据。可是当后端接口数据提供以后，会发现本身写的假数据有问题，而后就影响到个人代码了。常常搞得本身焦头烂额。</p> <p>Mock数据就是为了解决这个痛点的。经过对比学习，我决定使用<a href="https://easy-mock.com/" rel="nofollow noreferrer">Easy-Mock</a>。使用方法和注意事项能够参考<a href="https://juejin.im/post/59a8f15ef265da246c4a3822" rel="nofollow noreferrer">数据模拟神器 easy-mock 正式开源</a></p> <p>之因此采用这种平台化的Mock数据，是由于我没有花时间去看怎么在本地搭建一个测试服务。直接就拿来主义了。</p> <h1>总结</h1> <p>经过这个新闻列表的程序，快速上手了uni-app，完成了一套代码，多端运行。按照官网给出的说法是，学习成本很是低的，但对比我我的，我以为仍是有成本的，至少要理解其中的概念，才能更愉快的上手项目。</p> <p>须要熟练掌握至少如下知识点</p> <ul> <li>Vue的语法，至少要知道如何建立文件、怎样绑定数据、怎样通信、如何绑定事件、怎样经过绑定数据刷新页面。我虽然没有作过vue的项目，可是好在我有看过vue文档，并练习了官网的例子。不然，在运行这个项目以前我得花很多时间去vue官网学习vue~</li> <li>微信小程序相关知识。一样的，若是彻底没有看过微信小程序相关知识，一样会遇到问题，尤为是后续开发会用到微信小程序API</li> <li>css三、flex布局、ES六、打包、发布、模块化开发等等。相关的知识点，都须要学习、强化。</li> </ul> <p>能够发现，经过uni-app，就将目前主流的技术全都连接起来了。这样的好处是很是多的。对我我的而言，能够学习新框架、开发IOS和Android APP项目、串联起来目前主流的技术栈，积累经验。另外最重要的就是，经过这个过程，还能挣一笔零花钱~ 不只学习了知识，积累了项目经验，还有伙食费，真是好处多多啊~</p> <p>目前已经上手了这个框架，下一步就应该考虑将mui项目，修改为uni-app项目了。但愿这个过程是幸福并快乐的。目前项目是180多个html页面，但愿采用vue以后，页面数量能减小一半。</p> <p>（完）</p>

原文地址：http://www.javashuo.com/article/p-pjedgeev-cr.html