- 18年11月公
标题
商城分为四个部分，分别为首页，拼团，王国以及个人中心。主要分为筛选区和信息流区，筛选区又分为年卡活动，周末活动，夏冬令营，集体定制，活动日历，视频秀，假日伙伴和活动相册。从年卡活动到活动日历都是筛选不同的活动，视频秀不用做，假日伙伴则是人物介绍，活动相册则是照片集。而拼团就是和普通活动打开不一样的活动。个人中心就是对个人信息和订单的修改查看。这写起来肯定不小啊，于是我想到之前见过的HbuilderX里面的uni-app技术，一次开发，多端使用，更重要的是它可以使用我们的vue2技术。非常开心啊。这样的话，我们一直起来就非常方便了！！！（商城市vue写的）
关于uni-app，官网对它的介绍是:uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架，开发者编写一套代码，可编译到的iOS，安卓，H5，小程序等多个平台。我对于他的感觉就是我写完了代码，他会内部构建生成相应的平台端的代码并运行。(个人粗浅理解)。
而且uni-app实现了一套代码，同时运行到多个平台;一套代码，同时运行到的iOS模拟器，机器人模拟器，微信开发者工具，支付宝小程序Studio中，百度开发者工具，H5（底部6个终端选项卡代表6个终端模拟器),亲测可用，不过微信开发工具有时会打开代码部分空白（个人经常遇到），最好的办法是启动项目之前先打开微信开发者工具里面的项目，再在hbuilder里面运行。
2.首先开发者需先下载安装 HBuilderX 和微信开发者工具。
在HBuilderX 点击工具栏里的文件 - >新建 - >项目：
选择uni-app，输入工程名，如：HolidayShop，点击创建，即可成功创建uni-app。
首先他分为三个区域，第一个区域就是pages，pages下面的和小程序一样，就是单个页面。
我们新建一个center页面
就可以看到它是以.vue结尾的。在他的里面和vue2一样，分为template和css和script。
、
3.而static目录就是放置图片等静态资源的地方，引入方式就是/static/aa.png这种方式。
main.json里面需要配置小程序的appid。
page.json则和小程序中的保持一致
uni-app完整支持 Vue 实例的生命周期，同时还支持 应用生命周期 及 页面生命周期。但是相比web平台，部分功能受限，比如 v-html 指令，具体见下。（受限部分仅在App和小程序端受限，H5版不受限）。
3.我们先将四个tab页面创建，和小程序一样（避免侵权，这里示例用微信官方）
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
页面则分别建立，index，pintuan，center。
在index页面我们首先看到的是进来需要选择城市，这里我们选择使用uni.showActionSheet弹窗选择（这里是官方示例）
uni.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
console.log(res.errMsg);
}
});导航菜单部分就用vue2的for循环渲染，这里用 v-for="(item,index) in list"这种方式去循环，如果你的循环里面还有循环,需要注意一点，必须指定不同的索引！需要填写 :key="xx"。
下面的信息流可以写成一个组件，组件在哪里呢？就在components文件夹右键创建
使用起来和vue2一样的，子组件在父级中使用hello=‘xx’就可以了。
5.关于数据流上拉刷新下拉加载的问题
首先在pages.json添加允许下拉刷新，譬如index
{
"path":"pages/center/index",
"style":{
"navigationBarTitleText":"index",
"enablePullDownRefresh": true//把这个设置为true 允许下拉刷新
}
}
复制一个叫uni-load-more.vue的文件到component下（这个是uni-app演示中自带的一个上拉加载底部的文字显示包含加载中，正在加载，加载完毕这种文字）。
<template>
<view class="teacherList">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,index) in list" :key='index'>
<view class="uni-media-list">
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.name}}-{{value.nick_name}}</view>
</view>
</view>
</view>
</view>
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</template>
<script>
import http from "../../../../fly.js";
import loadMore from '../../../../components/load-more.vue';
export default {
components: {
loadMore
},
onLoad(){
const that = this;
setTimeout(function(){
that.loadData();
}, 1000);
uni.startPullDownRefresh();
},
onReachBottom() {
const that = this;
that.loadData();
},
onPullDownRefresh() {
//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
const that=this;
that.page=0;
that.list=[];
that.loadingType=0;
console.log('refresh');
setTimeout(function () {
that.loadData();
uni.stopPullDownRefresh(); //停止下拉刷新动画
}, 1000);
},
data() {
return {
list: [],
page:0,
loadingType: 0,
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "我们也是有底线的~~~"
},
key:"",
};
},
methods:{
loadData(){
const that=this;
let list = [];
that.page++;
http.fly.get('getData',{
"key":that.key,
"page":that.page,
"per-page":6
}).then(res => {
console.log('res是',res.data);
if (res.data.length == 0) {
that.loadingType = 2;
return false;
}
for(let i = 0; i < res.data.length; i++) {
list.push(res.data[i]);
};
that.list = that.list.concat(list);
that.loadingType = 0;
});
}
}
}
</script>这里的引入的fly.js是一个类似于axios的工具，可以设置拦截等需求，以后可以讲一下。onload就是进来就会加载的函数，并且只加载一次，onReachBottom则是上拉刷新，触底则执行此函数。onPullDownRefresh则是触顶，也可以设置距离顶部距离触发，在style里面设置。
此篇先写到这里。