wepy

騰訊團(tuán)隊(duì)開源的一款類vue語(yǔ)法規(guī)范的小程序框架,借鑒了Vue的語(yǔ)法風(fēng)格和功能特性,支持了Vue的諸多特征，比如父子組件、組件之間的通信、computed屬性計(jì)算、wathcer監(jiān)聽器、props傳值、slot槽分發(fā)，還有很多高級(jí)的特征支持：Mixin混合、攔截器等

<template>
  <view>
    相當(dāng)于 .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>
//相當(dāng)于 .js
import wepy from '@wepy/core';

//wepy.page 創(chuàng)建一個(gè)頁(yè)面
//script 主要寫js
wepy.page({
  config: {//頁(yè)面配置
    navigationBarTitleText: 'test'
  },
  data: {
    list: []
  },
  created() {
    this.getlist();
  },
//方法
  methods: {
    //跳詳情
    tdetail(id, downurl) {
      let url = '/pages/detail?downurl=' + downurl;
      wx.navigateTo({ url });
    },
    //獲取數(shù)據(jù)
    getlist() {
      let that = this;
      //測(cè)試接口
      let url = 'http://localhost:3000';
      wx.request({
        url: url,//請(qǐng)求接口路徑
        method: 'GET',//請(qǐng)求方式
        success: res => {//成功回調(diào)
          that.list = res.data;//改變數(shù)據(jù)
        }
      });
    }
  }
});
</script>
<style lang="less">
//相當(dāng)于原生 .wxss 文件
</style>
<config>
//相當(dāng)于原生小程序 .json 文件
 {
    navigationBarTitleText: 'Home',
}
</config>

mpvue

美團(tuán)團(tuán)隊(duì)開源的一款使用 Vue.js 開發(fā)微信小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn)，同時(shí)為 H5 和小程序提供了代碼復(fù)用的能力

<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 });
    },
    //獲取數(shù)據(jù)
    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

京東凹凸實(shí)驗(yàn)室開源的一款使用 React.js 開發(fā)微信小程序的前端框架。它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時(shí)支持使用 JSX 語(yǔ)法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進(jìn)行開發(fā)可以獲得和 React 一致的開發(fā)體驗(yàn)。,同時(shí)因?yàn)槭褂昧藃eact的原因所以除了能編譯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>
    );
  }
}

對(duì)比