wepy

腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征，比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发，还有很多高级的特征支持：Mixin混合、拦截器等

<template>
  <view>
    相当于 .wxml
    <div v-for="(item,index) in list"  class="item"  :key="{index}"  @tap="tdetail(item.id,item.downurl)">
      <div class="left">
        <img :src="item.pic" />
      </div>
      <div class="right">
        <h5>{{item.name}}</h5>
        <p>{{item.artist}}</p>
      </div>
    </div>
  </view>
</template>

<script>
//相当于 .js
import wepy from '@wepy/core';

//wepy.page 创建一个页面
//script 主要写js
wepy.page({
  config: {//页面配置
    navigationBarTitleText: 'test'
  },
  data: {
    list: []
  },
  created() {
    this.getlist();
  },
//方法
  methods: {
    //跳详情
    tdetail(id, downurl) {
      let url = '/pages/detail?downurl=' + downurl;
      wx.navigateTo({ url });
    },
    //获取数据
    getlist() {
      let that = this;
      //测试接口
      let url = 'http://localhost:3000';
      wx.request({
        url: url,//请求接口路径
        method: 'GET',//请求方式
        success: res => {//成功回调
          that.list = res.data;//改变数据
        }
      });
    }
  }
});
</script>
<style lang="less">
//相当于原生 .wxss 文件
</style>
<config>
//相当于原生小程序 .json 文件
 {
    navigationBarTitleText: 'Home',
}
</config>

mpvue

美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力

<template>
  <view>
    HOme page
    <div v-for="(item,index) in list"
         class="item"
         :key="{index}"
         @tap="tdetail(item.id,item.downurl)">
      <div class="left">
        <img :src="item.pic" />
      </div>
      <div class="right">
        <h5>{{item.name}}</h5>
        <p>{{item.artist}}</p>
      </div>
    </div>
  </view>
</template>

<script>
import wepy from '@wepy/core';

wepy.page({
  config: {
    navigationBarTitleText: 'test'
  },
  data: {
    list: []
  },
  created() {
    this.getlist();
  },
  methods: {
    //跳详情
    tdetail(id, downurl) {
      console.log(id, 'id');
      let url = '/pages/detail?downurl=' + downurl;
      // let url ="/pages/detail?id="+ id
      wx.navigateTo({ url });
    },
    //获取数据
    getlist() {
      let that = this;
      let url = 'http://localhost:3000';
      wx.request({
        url: url,
        method: 'GET',
        success: res => {
          that.list = res.data;
        }
      });
    }
  }
});
</script>
<style lang="less">
.item {
  height: 200rpx;
  display: flex;
  margin-bottom: 10rpx;
  .left {
    width: 300rpx;
    display: flex;
    padding: 10rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
  }
}
</style>
<config>
{
    navigationBarTitleText: 'Home',
}
</config>

taro

京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative。

import Taro, { Component } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import './index.css';

export default class index extends Component {
  state = {
    list: []
  };
  config = {
    navigationBarTitleText: '音频'
  };

  componentDidMount() {
    this.getList();
  }
  getList() {
     let url = 'http://localhost:3000';
    Taro.request({ url, method: 'GET' }).then(res => {
      this.setState({
        list: res.data
      });
    });
  }
  //跳详情
  handleClick(itm) {
    Taro.navigateTo({
      url: `/pages/posts/index?type=${itm.downurl}`
    });
  }
  render() {
    let { list } = this.state;
    return (
      <View className='index'>
        <View className='container'>
          <View className='content'>
            {list.map((item, ind) => {
              return ( <View className='icon' key={ind}>
                  <View className='odiv'>
                    <Image onClick={this.handleClick.bind(this, item)} className='img' src={item.pic} />
                  </View>
                  <View className='odiv'>
                    <View className='op'>{item.name}</View>
                    <View className='op'>{item.artist}</View>
                  </View>
                </View> );
            })}
          </View>
        </View>
      </View>
    );
  }
}

对比