小程序、H5、APP开发常用代码对比

一、小程序：

1.界面

<view></view> <!--块元素常用于初始页面定位配合 position:relative 使用-->
<text></text> <!--行内元素，常用于显示当前价格，市场价格，横排显示的文字-->
<image></image><!--行内元素，常用来显示商品图片，横向显示配合text显示，竖排显示配合display:block或者display:flex实现竖排显示-->
<block></block><!--块元素，常用于程序判断显示,配合wx:if="{{show}}"-->
<view bindtap="submit"></view> <!--块元素bindtap常用于绑定函数，实现程序逻辑层-->

2.程序

onload:function() <!--小程序初始加载，只执行一次-->
onshow:function() 
<!--小程序初始加载，每次进入页面都执行，可以配合this.onshow()实现页面刷新数据-->
this.setData({}) <!--小程序数据赋值，实现数据实时变化-->
wx.request({}) <!--小程序请求数据，经常与后端API接口配合使用，从而实现产品功能逻辑-->
wx.setStorageSync({}) <!--数据存储，常用于用户登录状态判断和地址跳转判断-->
wx.getStorageSync({}) <!--数据读取，常用于用户登录状态判断和地址跳转判断-->

二、APP开发VUE写法

1.界面

<template></template>
<text></text>
<view></view>
<image></image>
<view v-if></view>
<view v-else></view>
<view v-show></view>
<view v-for="(item,index) in items">
<text v-text></text>
<view @click="submit"></view>
<image :src="img"></image>

2.程序

api.ajax({})
api.openWin({})

三、H5开发

1.界面

<html></html>
<div></div>
<span></span>
<ul><li></li></ul>
<table><tr><td></td></tr></table>
<img></img>
<a href="#"></a>

2.程序

$.post("/wechat/user/index",{id:id},function(){})
$.get("/wechat/user/index",{id:id},function(){})