使用uniapp开发小程序

定位功能的实现

和微信小程序一样，是使用uni.getLocationapi,同时需要在manifest.json文件微信小程序配置加上APPid

源码视图里加上

		"requiredPrivateInfos":[
			"getLocation"
		]

效果如图

无限下拉功能（小程序的懒加载）

1 先渲染第一页数据
2 确认懒加载的时机（滑动到屏幕最底部）
3 在懒加载的触发时机中，加载并渲染下一页数据

<view v-if="isEnd">没有数据了</view>

onReachBottom() {
		if (this.isEnd === true) return
		this.page++;
		this.getLikeData()
	}

效果如图

页面的传参

和微信小程序一样同样使用eventChannel,可以类比vue2的$bus。
接收方在onload生命周期里面使用apigetOpenerEventChannel

		uni.navigateTo({
			url: '/pages/detail/detail',
			success: (res) => {
			res.eventChannel.emit("homeDetail", v)
			}
		})

			this.getOpenerEventChannel().on('homeDetail', data => {
				this.homeInfo = data
			})

拨打电话使用api`makePhoneCall`

uni.makePhoneCall({
	phoneNumber:"10086"
})

获取城市分类

地图页面

使用uniapp自带的map组件

<map style="width:100%;height:100%" scale="16" :longitude="longitude" :latitude="latitude"></map>

onLoad() {
	uni.getLocation({
            success: (point) => {
		this.longitude = point.longitude
		this.latitude = point.latitude
            }
	})
}

根据传入的时间计算过了多久

//根据传入的时间字符串 | 时间戳数字, 运算过了多少分钟/小时/天数
export const getTimeStamp = (time) => {
	// timenum就是时间差，中间过了多少毫秒
	let timenum = new Date().getTime() - new Date(time).getTime()

	// <1小时,显示几分钟前
	if (timenum < 1000 * 60 * 60) {
		return Math.floor(timenum / 1000 / 60) + '分钟前' //转成分钟
	}
	// <24小时,显示几小时前
	else if (timenum < 1000 * 60 * 60 * 24) {
		return Math.floor(timenum / 1000 / 60 / 60) + '小时前' //转成小时
	}
	// >24小时,显示几天前
	else {
		return Math.floor(timenum / 1000 / 60 / 60 / 24) + '天前' //转成天数
	}
}

动态设置标题

使用apiuni.setNavigationBarTitle

uni.setNavigationBarTitle({
	title: this.info.title
});

小程序笔记3