最近闲来没事使用uni-app给自己写个小程序，又想上到H5，跟安卓上所以就开始捣鼓了，看官网挺简单的。就是vue+微信小程序的结合体；so开始…
首先下载个HBuilderX下载地址；然后去登录没有登录的话去注册个。
开始
选择uni-app，选择默认，我选的是默认，创建就好了


上一段代码首页的吧

HTML:



<view class=“homeLi” v-for="(item,index) in lists" :key=‘index’ v-if="index%2=0" @tap=“goTOdetail(item)”>


{{item.name}}
{{item.barCode=‘001’?‘美甲’:‘美睫’}}




<view class=“homeLi height420” v-if="index%2=1" v-for="(item,index) in lists" :key=‘index’ @tap=“goTOdetail(item)”>


{{item.name}}
{{item.barCode=‘001’?‘美甲’:‘美睫’}}



{{msg}}


JS
import {$http} from ‘…/…/static/js/commonApi.js’ //统一请求配置
export default {
data() {
return {
pages:{
page:1,
pageSize:10
},
lists:[],
msg:‘上拉加载更多’
}
},
onLoad() { //页面加载
this.query(this.pages);
},
methods: {
query(pages){//数据的请求
this.msg = ‘加载中’;
KaTeX parse error: Expected 'EOF', got '}' at position 294: …停止 }) }̲, goTOdeta…{item.id}`
})
}
},
onPullDownRefresh() {//下来加载
this.lists = [];
this.pages.page = 1;
this.query(this.pages);
},
onReachBottom() {//上拉刷新console.log(111111111111)
this.query(this.pages);
}
}
CSS:
.home {width: 750upx;overflow-x: hidden;background: #f2f2f2;}
.homeUl{width: 100%;display: flex;flex-wrap: wrap;padding: 0 10upx;padding-top: 10upx;}
.homeUlBox{width:360upx;margin-right:10upx;}
.homeUlBox:last-child{margin-right: 0;}
.homeLi{width: 100%;height: 400upx;background: #ffffff;margin-bottom: 10rpx;border-radius: 6upx;}
.homeLi image{width: 100%;display: block;height: 250upx;}
.homeLi>view{width: 100%;height: 150rpx;padding: 10rpx;box-sizing: border-box;}
.homeLiMsg_h5{width: 100%;height:96upx;line-height: 48upx;font-size: 30upx;color: #303030;overflow: hidden; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.homeLiMsg_span{width: 100%;font-size: 28upx;color: #007AFF;text-align: right;}
.height420:first-child{height: 420upx;}
.homeMsg{width: 100%;display: flex;justify-content: center;align-items: center;font-size: 32upx;line-height: 48rpx;color: #C0C0C0;}

这下看看配置吧H5



H5就可发布成功了

小程序
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190717145231562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20xODU2NTg5MDMwNg==,size_16,color_FFFFFF,t_70

微信小程序直接在开发工具发布就行以前的小程序怎么发布就怎么发布

安卓


那么三端就好了看看效果吧
H5的

小程序的

安卓的

因为从来没弄过ios所以不弄了，官网上说是看样的，所以有详细Ios配置的看样评论出来。拜谢大佬