uniapp开发常用功能

1.页面带参数跳转

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    
    
    url: 'test?id=1&name=uniapp'//可进行字符串拼接
});

//在test.vue页面接受参数
export default {
    
    
    onLoad: function (option) {
    
     //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

2.功能公用一个页面，根据上个页面传递过来的参数动态更改顶部标题

onLoad(option) {
    
    
			this.type = option.type;
			// 设置页面的标题栏名称
			uni.setNavigationBarTitle({
    
    
				title: option.type==1?'标题一':'标题二' //判断参数作为标题
			});
			}

3.优惠券虚线

        background-image: linear-gradient(#E9B5AA 40%, rgba(255, 255, 255, 0) 0%);
		/* 35%设置虚线点y轴上的长度 */
		background-position: right;
		/* right配置右边框位置的虚线 */
		background-size: 1px 12rpx;
		/* 第一个参数设置虚线点x轴上的长度；第二个参数设置虚线点的间距 */
		background-repeat: repeat-y;

4.自定义导航头部

//page.json设置值
"navigationStyle":"custom"

{
    
    
			"path": "pages/index",
			"style": {
    
    
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true,
				"navigationStyle": "custom"
			}
		},

5.u-radio单选

<view class="flex align-center">
					<u-radio-group v-model="info.proStatus" placement="row">
						<u-radio v-for="(item, index) in statusData" :key="index" :label="item.name" :name="item.index"
							activeColor="#fcb029" :rowStyle="{marginLeft: '6px'}">
						</u-radio>
					</u-radio-group>
				</view>

statusData: [{
    
    
						index: 1,
						name: '分发到校',
						disabled: false,
						checked: false,
					}, {
    
    
						index: 2,
						name: '驳回科室',
						disabled: false,
						checked: false,
					},

					{
    
    
						index: 3,
						name: '转办科室',
						disabled: false,
						checked: false,
					}
				],

6.u-rate评分

<u-rate v-model='info.startLevel' active-color="#fcb029" inactive-color="#b2b2b2" gutter="10"></u-rate>

7.u-datetime-picker日期格式化

	<u-datetime-picker ref="datetimePicker" :show='show' mode="date"
						:formatter="formatter" @confirm='handleConfirm' @cancel='show = false'></u-datetime-picker>
					<u-icon name="arrow-right" size="12"></u-icon>

onReady() {
    
    
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
handleConfirm(e) {
    
    
				this.show = false
				const times = this.result(e.value, e.mode)
				this.info.proposedTime = times
	
			},
result(time, mode) {
    
    
				const timeFormat = uni.$u.timeFormat,
			
				switch (mode) {
    
    
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},

8.文件预览下载

<view class="orderNumberStyle" style="justify-content: flex-start;">
											<view>附件</view>
											<view v-for="(item,index) in item.acttachmentTwo" :key="index">
												<image :src="item" @tap.stop="$xf.previewImage(1,[item])"
													v-if="item.split('.').pop()=='png' || item.split('.').pop()=='jpg' || item.split('.').pop()=='jpeg' || item.split('.').pop()=='gif'"
													class="img-margin" mode="aspectFill"
													style="width: 160rpx;height: 160rpx;border-radius: 10rpx;margin: 0 16rpx 16rpx 0;">
												</image>
												<view class="flex align-center justify-center" @tap="download(item)"
													v-else
													style="width: 160rpx;height: 160rpx;border-radius: 10rpx;margin: 0 16rpx 16rpx 0;background: #F5F5F5;">
													<image src="@/static/img/wenjian.png"
														style="width: 57rpx;height: 45rpx;" mode=""></image>
												</view>
											</view>
										</view>


download(url) {
    
     
//url是后端返回的完整地址加域名的
				uni.downloadFile({
    
    
					url: url,
						success: function(res) {
    
    
							if (res.statusCode === 200) {
    
    
									var filePath = res.tempFilePath; // 获取到本地临时路径
									// 调用wx.openDocument打开文件
									console.log(filePath)
									console.log(res)
									uni.openDocument({
    
    
									   filePath: filePath,
									   fileType: url.split('.').pop(),
									   success: function(res) {
    
    
											console.log('打开文档成功')
										},
										fail: function(err) {
    
    
											console.log('打开文档失败', err)
										}
										})
									}
								},
								fail: function(err) {
    
    
									console.log('下载文件失败', err)
								}
							})
						},
			previewImage(current, urls, indicator) {
    
    
				uni.previewImage({
    
    
					current: current,
					urls: urls,
					indicator: indicator ? indicator : 'number',
					complete: (e) => {
    
    
						// console.log(e);
					}
				});
			}

9.uniapp后端返回文件流下载xlsx文件

//多个下载
exporAll() {
    
    
				uni.request({
    
    
					url: '后端接口', // 替换为你的接口地址
					method: 'POST',
					responseType: 'arraybuffer',
					data: {
    
    
						title: this.searchValue
					},
					header: {
    
    
						"X-Dqmall-Token": uni.getStorageSync("token"),
						'content-type': 'application/json',
					},
					success: (res) => {
    
    
						if (res.statusCode === 200) {
    
    
							this.handlesave({
    
    title:'邮箱列表'},res.data)
						}
					}
			
				})
			},
//单个下载			
expor(item) {
    
    
				uni.request({
    
    
					url: '后端接口', // 替换为你的接口地址
					method: 'POST',
					responseType: 'arraybuffer',
					data: {
    
    
						id: item.id
					},
					header: {
    
    
						"X-Dqmall-Token": uni.getStorageSync("token"),
						'content-type': 'application/json',
					},
					success: (res) => {
    
    
						if (res.statusCode === 200) {
    
    
							this.handlesave(item,res.data)
						}
					}

				})
			},
handlesave(item,data){
    
    
				const fs = uni.getFileSystemManager(); //全局唯一的文件管理器
				let BuffData = data // 后端返回的流数据
				fs.writeFile({
    
     // 写入文件
					filePath: wx.env.USER_DATA_PATH + '/' + item.title +
					".xlsx", //这里填文件的名字
					data: BuffData,
					encoding: "binary",
					success(res) {
    
    
						uni.openDocument({
    
     // 打开文档 
							showMenu: true,
							filePath: wx.env.USER_DATA_PATH + '/'+item.title  +
								".xlsx",
								fileType:'xlsx',
							success: function(res) {
    
    
								uni.hideLoading()
								console.log('打开文档成功');
							}
						});
					},
					fail(err) {
    
    
						uni.hideLoading()
					},
				})
			},