(1)生命周期不同
小程序:onLoad():页面加载,一个页面只会调用一次,可以获取参数
onShow()页面显示
onReady() 首次显示页面,会触发onReady()方法,渲染页面元素和样式,一个页面只会调用一次。
onHide() 当小程序后台运行或者跳转到其他页面,触发onHide()
onUnload()页面卸载
VUE:
beforeCreate、created(创建)、beforeMount、mounted(挂载)、beforeUpdate、updated(更新)、beforeDestory、destoryed(销毁)
(2)数据绑定
vue:动态绑定一个变量的值为某个属性时,会在前面加上冒号 <img :src="imgSrc"
/>
小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来 <image src=
"{{imgSrc}}"
></image>
(3)列表渲染
vue:
<ul>
<li v-for="(item,index) in list">
{{index}}---{{item.name}}
</li>
</ul>
小程序:
<view wx:for="{{arrList}}" wx:key="*five">
<view id="{{index}}">
<view>{{item.name}}</view>
</view>
</view>
(4)事件绑定
vue:
<div @click='fun'></div>
小程序:使用bindTap或catchTap(catchTap阻止事件冒泡)
<view bindTap='fun'></view>
微信小程序与H5页面的区别
(1)运行环境不同。微信小程序是基于微信平台的,H5页面是基于浏览器的。
(2)开发成本不同。H5的开发设计开发工具、前端框架、webpack、浏览器兼容性等,而微信小程序有开发者工具并且规范了开发的标准,简单了很多。
(3)运行流畅程度不同。打开H5,实际上是打开一个网页,而网页需要在浏览器中渲染。对于复杂的业务或者丰富的页面交互会产生卡顿现象。
而微信小程序,他的代码直接运行在微信上,省去了浏览器渲染的步骤,因此在微信中使用小程序才会比H5流畅很多。