目前随着5g网络的不断普及以及web app 跨平台的优势，web app已经逐渐成了 普通app 开发的首选框架。uni-app基于Vue.js实现的。所以它具备了vue.js前端的所有优势。而且uniapp 有很丰富的第三方插件，可以很方便的用一套代码开发公众号与小程序。先上图，效果如下：

html5页面：

?

?小程序页面：

?

?1、列表页面代码：这里用引入了mescroll 上拉下拉第三方插件，非常好用。

<template> ?? ?<view class="container"> ?? ?<bar :nav="setNav"></bar> ?? ? <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" > ?? ??? ?<view class="notice"></view> ?? ??? ?<good-list :list="goods"></good-list> ?? ?</mescroll-body> ?? ?</view> </template>

<script> ?? ?import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; ?? ?import bar from '../components/bar'; ?? ?export default { ?? ??? ?mixins: [MescrollMixin], // 使用mixin ?? ??? ?components:{ ?? ??? ??? ?bar ?? ??? ?}, ?? ??? ?data() { ?? ??? ??? ?return { ?? ??? ??? ??? ?baseUrl:getApp().globalData.baseUrl, ?? ??? ??? ??? ?goods: [], ?? ??? ??? ??? ? setNav:{ ?? ??? ??? ??? ? ?? ?'bg':'yellow', ?//背景色 ?? ??? ??? ??? ? ?? ?'color':'red', ?//字体颜色 ?? ??? ??? ??? ? ?? ?'isdisPlayNavTitle':true, //是否显示返回按钮，由于导航栏是共用的，把所有的东西封装好， ?? ??? ??? ??? ??? ?'isdisPlayNavLeftButton':true, ?? ??? ??? ??? ? ?? ?// 然后有些页面不需要的东西通过条件控制进行显示与隐藏 ?? ??? ??? ??? ? ?? ?'navTitle':'商品列表' //导航标题 ?? ??? ??? ??? ? }// 数据列表 ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?methods: { ?? ??? ??? ? ?? ??? ??? ?/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ ?? ??? ??? ?upCallback(page) { ?? ??? ??? ??? ?console.log("调用2:"+page.num); ?? ??? ??? ??? ?console.log("this.baseUrl:"+this.baseUrl); ?? ??? ??? ??? ?uni.request({ ?? ??? ??? ??? ? ? ?url: this.baseUrl+'/app/secondHand/list', //仅为示例，并非真实接口地址。 ?? ??? ??? ??? ??? ? contentType: "application/json;charset=utf-8", ?? ??? ??? ??? ? ? data : JSON.stringify({ 'page':page.num,'rows':8}), ?? ??? ??? ??? ? ? dataType : "json", ?? ??? ??? ??? ? ? ?method: "POST", ?? ??? ??? ??? ? ? ?header: { ?? ??? ??? ??? ? ? ? ? ?'custom-header': 'hello' //自定义请求头信息 ?? ??? ??? ??? ? ? ?}, ?? ??? ??? ??? ? ? ?success: (res) => { ?? ??? ??? ??? ? ? ? ? ?console.log(res); ?? ??? ??? ??? ??? ??? ?//this.goods=res.data.data; ?? ??? ??? ??? ??? ??? ?this.mescroll.endSuccess(res.data.data.length); ?? ??? ??? ??? ??? ??? ?//this.mescroll.endByPage(this.goods.length,100); //必传参数(当前页的数据个数, 总页数) ?? ??? ??? ??? ??? ??? ?//设置列表数据 ?? ??? ??? ??? ??? ??? ?//if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表 ?? ??? ??? ??? ??? ??? ?this.goods=this.goods.concat(res.data.data); //追加新数据 ?? ??? ??? ??? ? ? ?}, ?? ??? ??? ??? ??? ?fail: () => { ?? ??? ??? ??? ??? ??? ?this.mescroll.endErr(); ?? ??? ??? ??? ??? ? ? ?console.log("失败"); ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ?}); ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ?} ?? ?} </script>

<style> ?? ?/*说明*/ ?? ?.notice{ ?? ??? ?font-size: 26upx; ?? ??? ?padding: 40upx 0; ?? ??? ?border-bottom: 1upx solid #eee; ?? ??? ?text-align: center; ?? ??? ?color:#555; ?? ?} ?? ?.container{ ?? ??? ?display: flex; ?? ??? ?flex-direction: colum; ?? ?} ?? ?mescroll-body{ ?? ??? ?margin-top:50rpx; ?? ?} </style>

2、列表项组件页面：vue.js 就是组件化更方便，相比微信小程序原生代码结构会更方便些。

<template> ?? ?<view class="good-list"> ?? ??? ?<view :id="'good'+good.id" class="good-li" v-for="good in list" :key="good.id"> ?? ??? ??? ? <image class="good-img" :src="getImgUrl(good.goodPic)" mode="scaleToFill"/>? ?? ??? ??? ?<view class="item_data"> ?? ??? ??? ??? ?<view class="item_1"> ?? ??? ??? ??? ??? ?<text class="good-name">{{good.goodName}}</text> ?? ??? ??? ??? ??? ?<text class="good-price">{{good.goodPrice}} 元</text> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<text class="good-desc">{{good.goodDesc}}</text> ?? ??? ??? ?</view> ?? ??? ?</view> ?? ?</view> </template>

<script> ?? ?export default {? ?? ??? ?props:{ ?? ??? ??? ?list: { ?? ??? ??? ??? ?type: Array, ?? ??? ??? ??? ?default(){ ?? ??? ??? ??? ??? ?return [] ?? ??? ??? ??? ?} ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?methods: { ?? ??? ??? ?getImgUrl(icon){ ?? ??? ??? ??? ?console.log("getApp().globalData.host:"+getApp().globalData.host); ?? ??? ??? ? ? return ?getApp().globalData.host+icon; ?? ??? ??? ?} ?? ??? ?} ?? ?} </script>

<style lang="scss"> ?? ?.good-list{ ?? ??? ?background-color: #000000; ?? ??? ?width:750rpx; ?? ??? ?.good-li{ ?? ??? ??? ? ?? ??? ??? ?display: flex; ?? ??? ??? ?flex-direction:row; ?? ??? ??? ?align-items: center; ?? ??? ??? ?padding:20rpx; ?? ??? ??? ?background-color: #fef; ?? ??? ??? ?border-bottom: 1upx solid #eee; ?? ??? ??? ? ?? ??? ??? ?.good-img{ ?? ??? ??? ??? ?width: 160upx; ?? ??? ??? ??? ?height: 160upx; ?? ??? ??? ??? ?margin-right: 20rpx; ?? ??? ??? ?} ?? ??? ??? ?.item_data{ ?? ??? ??? ??? ?display: flex; ?? ??? ??? ??? ?flex-direction:column; ?? ??? ??? ??? ?width:100%; ?? ??? ??? ??? ?.item_1{ ?? ??? ??? ??? ??? ?display: flex; ?? ??? ??? ??? ??? ?flex-direction:row; ?? ??? ??? ??? ??? ?justify-content:space-between; ?? ??? ??? ??? ??? ?width:100%; ?? ??? ??? ??? ??? ?.good-name{ ?? ??? ??? ??? ??? ??? ?font-size: 30rpx; ?? ??? ??? ??? ??? ??? ?height: 80upx; ?? ??? ??? ??? ??? ??? ?margin-bottom: 20upx; ?? ??? ??? ??? ??? ??? ?overflow: hidden; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ?.good-price{ ?? ??? ??? ??? ??? ??? ?font-size: 30rpx; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?.good-sold{ ?? ??? ??? ??? ??? ??? ?font-size: 24upx; ?? ??? ??? ??? ??? ??? ?margin-left: 16upx; ?? ??? ??? ??? ??? ??? ?color: gray; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ?} ?? ??? ??? ??? ?.good-desc{ ?? ??? ??? ??? ??? ?font-size: 30rpx; ?? ??? ??? ??? ?} ?? ??? ??? ?} ?? ??? ?} ?? ?} </style> 3、新增页面：集成了第三方上传组件htz-image-upload

?<template> ?? ?<view class="container"> ?? ????????<bar :nav="setNav"></bar> ?? ??? ? ?? ??? ?<view class="uni-padding-wrap uni-common-mt"> ?? ??? ??? ?<form @submit="formSubmit" @reset="formReset"> ?? ??? ??? ??? ?<view ?class="row_style"> ?? ??? ??? ??? ??? ?<text class="title">物品名称:</text> ?? ??? ??? ??? ??? ?<input class="uni-input" name="goodName" placeholder="请输入物品名称" /> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<view ?class="row_style"> ?? ??? ??? ??? ??? ?<text class="title">新旧程度:</text> ?? ??? ??? ??? ??? ?<picker @change="bindPickerChange" :value="newLevel" :range="array" range-key="name"> ?? ??? ??? ??? ??? ??? ?<view class="uni-input">{{array[newLevel].name}}</view> ?? ??? ??? ??? ??? ?</picker> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<view ?class="row_style"> ?? ??? ??? ??? ??? ?<text class="title">物品价格:</text> ?? ??? ??? ??? ??? ?<input class="uni-input" type="number" ?name="goodPrice" placeholder="请输入价格" /> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<view ?class="colum_style"> ?? ??? ??? ??? ??? ?<text class="title">物品图片或视频:</text> ?? ??? ??? ??? ??? ?<htz-image-upload :max="19" v-model="ceshiData" mediaType="all" :chooseNum="9" :sourceType="['album','camera']" ?? ??? ??? ??? ??? ??? ?:compress="false" :quality="80" :formData="{'businessType': 'ershou'}" :remove="true" ?? ??? ??? ??? ??? ??? ?@uploadSuccess="ceshiUploadSuccess" @imgDelete="ceshiImgDelete" @uploadFail="ceshiUploadFail" ?? ??? ??? ??? ??? ??? ?:action="mediaActionUrl"></htz-image-upload> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<view ?class="colum_style"> ?? ??? ??? ??? ??? ?<text class="title">物品描述:</text> ?? ??? ??? ??? ??? ?<textarea ?name="goodDesc" placeholder-style="color:#666666" placeholder="请输入物品描述不少20个字"/> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ? ?? ??? ??? ??? ?<view class="uni-btn-v"> ?? ??? ??? ??? ??? ? <button form-type="submit" plain="true">发布</button> ?? ??? ??? ??? ?</view> ?? ??? ??? ?</form> ?? ??? ?</view> ?? ?</view> </template> <script> ?? ?// import htzImageUpload from '/components/htz-image-upload/htz-image-upload.vue' ?? ??import bar from '@/components/bar'; ?? ???var ?graceChecker = require("../../common/graceChecker.js"); ?? ?export default { ?? ?????components:{ ?? ?????????????bar ?? ?????????}, ?? ????????data() { ?? ?????????????return { ?? ?????????????????baseUrl:getApp().globalData.baseUrl, ?? ?????????????????array: [{name:'9成新'},{name: '8成新'}, {name:'7成新'}, {name:'7成以下'}], ?? ?????????????????newLevel: 0, ?? ?????????????????ceshiData: [ ?? ????????????????? ?? ?????????????????], ?? ?????????????????incAttachments:"", ?? ?????????????????setNav:{ ?? ?????????????????????'bg':'yellow', ?//背景色 ?? ?????????????????????'color':'red', ?//字体颜色 ?? ?????????????????????'isdisPlayNavTitle':true, //是否显示返回按钮，由于导航栏是共用的，把所有的东西封装好， ?? ?????????????????????'isdisPlayNavLeftButton':false, ?? ?????????????????????// 然后有些页面不需要的东西通过条件控制进行显示与隐藏 ?? ?????????????????????'navTitle':'新增物品' //导航标题 ?? ?????????????????},// 数据列表 ?? ?????????????????mediaActionUrl:getApp().globalData.baseUrl+'/app/attachment/upload/Media' ?? ?????????????} ?? ?????????}, ?? ??? ?methods: { ?? ??? ??? ? ?? ??? ??? ?bindPickerChange: function(e) { ?? ??? ??? ??? ?console.log('picker发送选择改变，携带值为：' + e.detail.value) ?? ??? ??? ??? ?this.newLevel = e.detail.value; ?? ??? ??? ??? ? ?? ??? ??? ??? ? ?? ??? ??? ?}, ?? ??? ??? ?formSubmit: function(e) { ?? ??? ??? ??? ?console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value)) ? ? ? ? ? ? ? ? //定义表单规则 ? ? ? ? ? ? ? ? var rule = [ ? ? ? ? ? ? ? ? ? ? {name:"goodName", checkType : "string", checkRule:"1,10", ?errorMsg:"物品名称应为1-10个字符"}, ?? ??? ??? ??? ??? ?{name:"goodDesc", checkType : "string", checkRule:"20,", ?errorMsg:"物品描述不少20个字符"}, ?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ]; ? ? ? ? ? ? ? ? //进行表单检查 ? ? ? ? ? ? ? ? var formData = e.detail.value; ?? ??? ??? ??? ?var incAttachments=this.incAttachments.substring(0,this.incAttachments.length-1); ?? ??? ??? ??? ?formData["incAttachments"]=incAttachments; ?? ??? ??? ??? ?formData["newLevel"]=this.newLevel; ? ? ? ? ? ? ? ? var checkRes = graceChecker.check(formData, rule); ? ? ? ? ? ? ? ? if(checkRes){ ?? ??? ??? ??? ??? ?if(this.ceshiData.length <= 0){ ?? ??? ??? ??? ??? ??? ? uni.showToast({title:"请添加物品图片或视频!", icon:"none"}); ?? ??? ??? ??? ??? ??? ? return; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?if(formData['goodPrice'].length <=0){ ?? ??? ??? ??? ??? ??? ?uni.showToast({title:"请输入价格!", icon:"none"}); ?? ??? ??? ??? ??? ??? ?return; ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?//uni.showToast({title:"验证通过!", icon:"none"}); ? ? ? ? ? ? ? ? ?? ?? ??? ??? ??? ??? ?uni.request({ ?? ??? ??? ??? ??? ??? ??? ?url: getApp().globalData.baseUrl+"/app/secondHand/add", ?? ??? ??? ??? ??? ??? ??? ?data: JSON.stringify(formData), ?? ??? ??? ??? ??? ??? ??? ?method: "post", ?? ??? ??? ??? ??? ??? ??? ?success:(res)=> { ?? ??? ??? ??? ??? ??? ??? ??? ?uni.showToast({title:"提交成功!", icon:"none"}); ?? ??? ??? ??? ??? ??? ??? ??? ?console.log(JSON.stringify(res)); ?? ??? ??? ??? ??? ??? ??? ??? ?uni.navigateBack({ ?? ??? ??? ??? ??? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ??? ??? ?fail:(res)=>{ ?? ??? ??? ??? ??? ??? ??? ??? ?uni.showToast({title:"提交成功!", icon:"none"}); ?? ??? ??? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ? ? ?? ??? ??? ??? ? ? ?? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? uni.showToast({ title: graceChecker.error, icon: "none" }); ? ? ? ? ? ? ? ? } ?? ??? ??? ?}, ?? ??? ??? ?ceshiUploadSuccess(res) { //上传成功 ?? ??? ??? ??? ?console.log('res', this) ?? ??? ??? ??? ?/**************** ?? ??? ??? ??? ?因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考 ?? ??? ??? ??? ?***************/ ?? ??? ??? ??? ?var _res = JSON.parse(res.data); ?? ??? ??? ??? ?console.log('_res', _res) ?? ??? ??? ??? ?if (_res.success) { ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?this.ceshiData.push(getApp().globalData.host+"/" + _res.data.path); ?? ??? ??? ??? ??? ?this.incAttachments+=_res.data.id+","; ?? ??? ??? ??? ?} ?? ??? ??? ??? ?/*******************************/ ?? ??? ??? ?}, ?? ??? ??? ?ceshiUploadFail(err) { //上传失败 ?? ??? ??? ??? ?console.log('err', err) ?? ??? ??? ?}, ?? ??? ??? ?ceshiImgDelete(e) { ?? ??? ??? ??? ?console.log('ceshiImgDelete', e) ?? ??? ??? ?}, ?? ??? ??? ?formReset: function(e) { ?? ??? ??? ??? ?console.log('清空数据') ?? ??? ??? ?} ?? ??? ?} ?? ?} </script>

<style> ?? ?.uni-form-item .title { ?? ??? ?width: 150rpx; ?? ??? ?text-align: right; ?? ?} ?? ?.uni-input{ ?? ??? ?width:560rpx; ?? ??? ?margin-left: 10rpx; ?? ?} ?? ?.row_style{ ?? ??? ?display: flex; ?? ??? ?flex-direction: row; ?? ??? ?margin-left: 15rpx; ?? ??? ?margin-right: 15rpx; ?? ??? ?margin-top: 30rpx; ?? ??? ? ?? ?} ?? ?.colum_style{ ?? ??? ?display: flex; ?? ??? ?flex-direction: column; ?? ??? ?margin-left: 15rpx; ?? ??? ?margin-right: 15rpx; ?? ??? ?margin-top: 30rpx; ?? ??? ? ?? ?} </style> ?