谈谈我所了解的前端技术的发展

为什么会突然提到这个话题？

最近看到一个很好看的小程序前端模版nxdc-milktea，展示效果如下图所示，想着看把程序跑起来。看了前端代码仓库中有App.vue，我理解应该是基于vue开发的项目，但此项目没有package.json，按vue的方式启动不了。

也给作者留过言”服务如何运行起来？”，因为项目开发的时间很久了，作者目前暂未答复。模版也作为插件发布在了DCloud的uni-app插件市场，看了uni-app的官方文档，一切都变得豁然开朗。首先需求下载hbuilderx插件，然后导入插件的内容，在左上角点击发行->小程序(微信)，会将导出的代码导入微信开发工具，如下图所示。

小程序代码导入微信开发工具后的样子，左边是模拟器，右边是代码区。看起来有种开发ios或android app的感觉，相比而言，理解开发小程序的门槛能低一些。

什么是uni-app?

简单来说，uni-app我理解是一种移动端通用的开发框架，像做移动端应用时，基于uni-app只需开发一版，然后就可以导出针对不同平台的安装包，例如：安卓、ios、鸿蒙、微信小程序、支付宝小程序、京东小程序等，具体可以看uni-app的官方文档。

有一件有意思的事情，在19年时，公司安排组内同事去上海某大型国有银行出差支持，在上海呆了1个多月。在那边主要做应用后端，前台是一个数据探查的app，是基于uni-app开发，1个前端、2个后端差不多一个多左右完成开发上线。同时期，也有友商在现场开发类似应用，好几个android开发，一个月的开发速度惊讶到对方了，跑过来问同事，你们是怎么做的，怎么那么快😂？

还想挖同事过去，后来也是从同事那边知道这个事情，我想了下，肯定写安卓组件比写html慢，并且要同时适配安卓和ios，应该是这个原因。

uni-app使用的是vue的语法，不是小程序自定义的语法，DCloud与vue合作，在vue.js官网提供了免费视频教程https://learning.dcloud.io/#/ 。

了解下vue.js的语法

vue.js文档地址https://v2.cn.vuejs.org/v2/guide/， 和其它js库一样，在页面中引入vue.js也是通过<script>标签引入的。

<!-- html中引入vue.js, 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

第一个Vue应用，引入vue.js后，在当前页面就回有一个Vue对象来绑定页面属性，其属性el就是页面选择器，选择了id=app的div，dom中的message就是取的Vue#data中的元素。

<!-- v-bind动态给class绑定变量，当前div是绑定color颜色; @click.stop能阻止事件向上传播 -->
<div id="app" v-bind:class="color" @click.stop="click">
  <!-- 两个大括号要连接起来，模版插值语法，加入v-once后，message属性更新后不会再刷新到页面 -->
  <span v-once>Message: { { message }}</span>
  <!-- v-html会将变量的值 直接以html展示 -->
  <p>using v-html directive: <span v-html="rawHtml"></span></p>
  <!-- vue中的条件渲染，v-if会根据seen变量的值 来决定是否展示元素内容(为true时展示)，v-bind绑定元素内容 -->
  <span v-if="seen">你现在看到我了</span>
  <span v-else>Oh no 😂</span>
  <!-- vue中的列表渲染，v-for语法展示list中的元素，Foo和Bar元素各生成一个li元素 -->
  <ul>
    <li v-for="item in items">
        { {item.message}}
    </li>
  </ul>
  <!-- v-on指令监听DOM事件，counter监听click事件，每多点击一次click，counter的值就会加1 -->
  <button v-on:click="counter +=1">Add 1</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    a: "normal value",
    rawHtml: '<span style="color:red">this is should be red</span>',
    color: 'red',
    seen: true,
    elems: [
      {message: 'Foo'},
      {message: 'Bar'}
    ],
    counter: 0
  },
  method: {
    click: function() {console.log("click element!")}
  }
})
// 可通$访问vue暴露的属性和方法，另一种vm.$watch('a', func(newValue, oldValue){xxx}) ，观察到a变化时，会触发回调用函数
vm.$data.message = "Change Value!"

.red {color:red;}
.blue {color:blue;font-size:100px;}