uni-app的使用分享(一)

╰半夏微凉° 2022-04-10 14:24 179阅读 0赞

1.  18年11月公 ![公共号][20190111150325686.gif] 标题 司有开发需求要将现在的公共号商城转为小程序，先让大家看一下公共号商城。

商城分为四个部分，分别为首页，拼团，王国以及个人中心。主要分为筛选区和信息流区，筛选区又分为年卡活动，周末活动，夏冬令营，集体定制，活动日历，视频秀，假日伙伴和活动相册。从年卡活动到活动日历都是筛选不同的活动，视频秀不用做，假日伙伴则是人物介绍，活动相册则是照片集。而拼团就是和普通活动打开不一样的活动。个人中心就是对个人信息和订单的修改查看。这写起来肯定不小啊，于是我想到之前见过的HbuilderX里面的uni-app技术，一次开发，多端使用，更重要的是它可以使用我们的vue2技术。非常开心啊。这样的话，我们一直起来就非常方便了！！！（商城市vue写的）

关于uni-app，官网对它的介绍是:[uni-app][]是一个使用[Vue.js][]开发**跨平台个人文库**应用的前端框架，开发者编写一套代码，可编译到的iOS，安卓，H5，小程序等多个平台。我对于他的感觉就是我写完了代码，他会内部构建生成相应的平台端的代码并运行。(个人粗浅理解)。

`而且uni-app`实现了一套代码，同时运行到多个平台;一套代码，同时运行到的iOS模拟器，机器人模拟器，微信开发者工具，支付宝小程序Studio中，百度开发者工具，H5（底部6个终端选项卡代表6个终端模拟器),亲测可用，不过微信开发工具有时会打开代码部分空白（个人经常遇到），最好的办法是启动项目之前先打开微信开发者工具里面的项目，再在hbuilder里面运行。

2.首先开发者需先下载安装 [HBuilderX][] 和[微信开发者工具][Link 1]。

在[HBuilderX][] 点击工具栏里的文件 - >新建 - >项目：

![create1.png][]

选择uni-app，输入工程名，如：HolidayShop，点击创建，即可成功创建uni-app。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70][]

首先他分为三个区域，第一个区域就是pages，pages下面的和小程序一样，就是单个页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 1][]

我们新建一个center页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 2][]

就可以看到它是以.vue结尾的。在他的里面和vue2一样，分为template和css和script。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 3][]、

3.而static目录就是放置图片等静态资源的地方，引入方式就是/static/aa.png这种方式。

main.json里面需要配置小程序的appid。

page.json则和小程序中的保持一致

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 4][]

uni-app完整支持 `Vue` 实例的生命周期，同时还支持 [应用生命周期][Link 2] 及 [页面生命周期][Link 3]。但是相比web平台，部分功能受限，比如 `v-html` 指令，具体见下。（受限部分仅在App和小程序端受限，H5版不受限）。

3.我们先将四个tab页面创建，和小程序一样（避免侵权，这里示例用[微信官方][Link 4]）

"tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 5][]

页面则分别建立，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文件夹右键创建

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 7][]

使用起来和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里面设置。

此篇先写到这里。

[20190111150325686.gif]: /images/20220328/cb9d1ce8fe07476e93699ab136db424d.png
[uni-app]: https://uniapp.dcloud.io/
[Vue.js]: https://vuejs.org/
[HBuilderX]: http://www.dcloud.io/hbuilderx.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[create1.png]: /images/20220328/647825b390a24fa398b6709255611386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70]: /images/20220328/e198eb4e86f54c069ace4bbfcd2d2279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 1]: /images/20220328/9ee231cdc49c4e61b4d2bf9a225c8a08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 2]: /images/20220328/fe6f30500ae04609b743bdc75ae169cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 3]: /images/20220328/68d084d287724b90a12bba796f17da9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 4]: /images/20220328/9ebcd898cadf43389e0b5114f63ded7e.png
[Link 2]: https://uniapp.dcloud.io/frame?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
[Link 3]: https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
[Link 4]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 5]: /images/20220328/06eef9a7ac8e4bfa89354221dd35799f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 6]: /images/20220328/da5d5290b7c54c25af2d85232e128431.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjIyODEx_size_16_color_FFFFFF_t_70 7]: /images/20220328/0793633256024aec931253897abb1e52.png