- 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里面设置。
此篇先写到这里。