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>
);
}
}
对比
