uni-app的使用分享(一)

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里面设置。

此篇先写到这里。

uni-app的使用分享(一)相关推荐

uni app使用雷电模拟器进行真机调试
之前我用uni app真机调试时都是连接的自己的手机,每次都插根数据线,感觉不是很喜欢.今天又用真机调试想起来手机模拟器,就下了一个雷电.然后把配置真机调试的步骤分享出来吧. 一.安装手机模拟器在这 ...
百度开发者大会-《用HTML5新特性开发移动App》PPT分享
今天百度开发者大会,移动互联网分论坛,我的主题演讲<用HTML5新特性开发移动App>PPT分享如下. 完整PPT可在Slideshare观看,或者在百度开放云平台上下载到.
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
iOS实现App之间的分享
我们在iOS平台上想要实现不同App之间的内容分享一般有几种常用方式: 第一种是通过AirDrop实现不同设备的App之间文档和数据的分享: 第二种是给每个App定义一个URL Scheme,通过访问 ...
Android——App内文件分享功能
国内的Android开发者,在遇到App内有分享功能时,基本都是对接友盟分享.ShareSDK分享等第三方SDK.简单的集成SDK以及配置之后,即可分享至多个不同App平台.反而很少来使用Androi ...
uni-app 添加到“用其他应用打开”中、app加入系统分享列表、获取分享的文件
地址:添加到"用其他应用打开"中.app加入系统分享列表.获取分享的文件 - DCloud 插件市场添加到"用其他应用打开"中.app加入系统分享列表.获取分 ...

uni-app的使用分享(一)

uni-app的使用分享(一)相关推荐

最新文章

热门文章