[实战]:UniApp开发小程序怎么可以这么简单！

我终于终于用上了uniapp！！！

为什么发出这样的感叹呢？uniapp从诞生到现在已经有两年了吧，这两年间断断续续听到过uniapp的声音，但是一直没有兴趣去尝试下，总的原因有一下几点：

• 1、开始阶段，相对于vscode，HbuilderX简直就是个弟弟，体验差，小bug多，手感不行！
• 2、潜意识作怪，一个框架啥都想做估计啥都做好，然后就不想试；
• 3、自己懒

---

不会真的有前端不知道uniapp吧？！

那么，什么是uniapp？

官网：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

我：行行行，你说的都对，我们还是有突出一个“但是”；uniapp的愿景是好的，整体上来说基本符合官网的描述，但是，限制也是有的，有兴趣的小伙伴可以去官网(https://uniapp.dcloud.io/)看看，uniapp的很多api的对于不同的平台也是有兼容问题的。即使是这样，也不影响我们对uniapp的使用，因为他的确很方便，尤其是对于使用Vue的前端来说！

初试uniapp，爱了爱了

就像女朋友总是问我，你为什么喜欢我？这个题我回答不了女朋友，但是可以回答uniapp呀：

• 1、我跟uniapp它爸Vue熟呀，这两就像一个模子(语法)刻出来的！
• 2、作为前端，我累了，谁能实现最好的跨平台，我就爱了！
• 3、看谁活的久点，uniapp的两个“金主”(H5、微信小程序)应该能够支撑它吧，这又是我认为其主要优势！

话不多说，先看看uniapp开发的微信小程序效果：

大家可以微信搜索“去哪吃喝玩乐呢”，搜索小程序试一试，也可以扫码：

前提

1、熟悉Vue.js开发，不会的同学可以过一遍官网（https://cn.vuejs.org/）；

2、会在uniapp官网（https://uniapp.dcloud.io/）查找api和组件，也就是搜索能力；

（官网上说还要熟悉微信小程序开发，本人觉得没必要，直接开uniapp的api就可以了）

涉及内容

1、uniapp基本开发和调试；

2、uniapp开发微信小程序；

3、uniapp引用高德sdk定位、获取poi等；

4、uniapp使用字体图标；

5、微信小程序授权和分享；

开发

1、uniapp新建项目

打开HBuilderX，点击“文件”—“新建”—“项目”，根据自己的项目需求选择模板，此处我选择“uni-app项目”模板，最后点击”创建“，项目结构如图所示；

2、新建页面

在pages（视图目录）下新建index/index.vue文件，用于页面开发；

在pages.json（视图配置）下设置微信小程序的全局样式，以及index.vue页面的路由和相关样式；

具体api可以查看uni-app官网；

pages.json：

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "去哪·吃喝玩购"
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "去哪·吃喝玩购",
		"navigationBarBackgroundColor": "#abd8cf",
		"backgroundColor": "#FFFFFF"
	}
}

3、页面布局

开发之前，现将整体布局弄清楚，便于后面的组件化/模板化开发；（在此说明一点，由于个人偷懒和初试uniapp，因此并没有进行划分，都写在index.vue上，这样是不对的╮(╯▽╰)╭）

4、高德地图定位与pois获取

uniapp自带了地图定位的功能函数uni.getLocation(OBJECT)，但是获取的位置信息不全且不适用，所以此处直接代用高德地图sdk进行定理信息相关操作。高德地图开发者的注册和sdk下载可以参考《uniapp 如何引入高德地图》文章https://www.jianshu.com/p/7935272776b1；

下载好高德地图的sdk（amap-wx.js）后将其放在目录components下；页面中引入：

import amap from '../../components/amap-wx.js'

微信小程序对于很多功能的调用都要求用户授权，地理位置也需要授权，下列代码进行授权和地理信息获取：

		methods: {
			//授权获取地理位置信息
			getAuthorizeInfo() {
				uni.authorize({  //调用授权操作
					scope: 'scope.userLocation',
					success: () => { // 允许授权
						this.getLocationInfo();
					},
					fail: () => { // 拒绝授权
						this.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				this.amapPlugin.getRegeo({ //调用高德地图sdk进行位置信息获取
					success: (res) => { //获取地理位置信息成功
						console.log("lbs", res)
						//地址，用于显示
						this.address = res[0].regeocodeData.formatted_address;
						//经纬度，用户查询周边吃喝玩乐信息
						this.lat = res[0].latitude;
						this.lng = res[0].longitude;
					},
					fail: (error) => { //获取地理位置信息失败
						console.log(error)
						//弹窗提示获取信息失败
						uni.showToast({
							title: '无法获得周边信息' + error,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			//获取周边poi数据
			getPoiInfoAround() {
				uni.showLoading({
					title: '获取数据中'
				});
				//按照参数形式拼接经纬度
				let loc = this.lat + "," + this.lng
				//调用高德sdk获取周围的pois信息
				this.amapPlugin.getPoiAround({
					"location": loc,
					"querytypes": this.searchPoiType, //查询的pois类型（吃喝玩乐）
					"querykeywords": this.searchPoiKw, //关键字
					success: (data) => { //获取成功信息存储
						//成功回调
						this.searchPois = data.poisData
						this.setShowPois()
						uni.hideLoading();
						console.log("poi", this.searchPois)
					},
					fail: (info) => {  //获取失败信息说明
						//失败回调
						console.log(info)
						uni.hideLoading();
						uni.showToast({
							title: '无法获得周边信息,您可以手动添加内容',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 2000
							})
						}
					}
				});
			},
		}

5、uniapp中字体图标的使用

字体图标是现在用的比较多的一种图标形式，体积小，适用于小的图片/图标的显示，并且颜色和大小都是可设置的，和设置字体的方式相仿；现在用的比较多的是阿里巴巴矢量图标库，iconfont的具体下载和使用方式大家自行百度，此处不做具体说明。可参考如何在uni-app使用iconfont；

下载好iconfont文件后解压，放到static/fonticon目录下：

使用也比较简单（例如定位图标）：

1、在main.js中引入iconfont图标：

import "./static/fonticon/iconfont.css"

2、在页面样式中使用：

<text class="iconfont icon-icon-test">text>

**注意：**fonticon文件夹下的iconfont.js文件一定要删除，因为在微信小程序（uniapp）上线发布后iconfont的js文件会导致，线上发布版本运行报错且页面白屏；

6、微信小程分享

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息；

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '分享去哪·吃喝玩乐小程序',
				path: '/pages/index/index'
			}
		}

完整页面代码

至此，已经介绍了该小程序开发中的一些主要功能点和应该注重的地方，接下来将页面代码放上来，里面的注释还算比较多，供大家自行学习：

项目代码获取

关注微信公众号：迟亦早（chiyizao）

发送：”wherewego“获取