使用mpvue仿美团小程序

首页

定位当前城市

1. 获取经纬度

    wx.getLocation({

      type: "wgs84",

      success: res => {

        console.log(res); // 获取到经纬度

      }

    });

2. 需要给app.json配置permission字段

{
	"pages": [
		...
	],

  	"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息将用于小程序位置接口的效果展示"
		}
	},
}

3. 根据经纬度逆解析

   • 使用腾讯地图小程序JavaScriptSDK

     • 申请开发者秘钥 https://lbs.qq.com/qqmap_wx_jssdk/index.html

     • 下载 http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

     • 引入

       // 引入SDK核心类
       var QQMapWX = require("../../utils/qqmap-wx-jssdk.js");
       // 实例化API核心类
       var qqmapsdk = new QQMapWX({
       	key: "VX4BZ-ORPCP-PGBDM-V6P3E-XDUO7-KIBUL" // 必填
       });
       

       注意：qqmap-wx-jssdk不支持commonjs
       处理：修改 .babellrc文件，给plugins添加字段
       "plugins": ["transform-runtime","transform-es2015-modules-commonjs"]

     • 逆地址解析

               qqmapsdk.reverseGeocoder({
       			location: {
       				latitude: res.latitude,
       				longitude: res.longitude
       			 },
       			success: r => {
       				this.city = r.result.address_component.city;
       			}
       		});
       

4. 点击跳转地图——跳转时加上参数(当前城市)

   goCity() {
   	wx.navigateTo({
   		url: "../city/main?city=" + this.city
   	});
   },
   

列表渲染

1. 将列表数据、图片资源全部上传到云存储数据库
   注意点：
   1、JSON 数据不是数组，而是类似 JSON Lines，即各个记录对象之间使用 \n 分隔，而非逗号；
   2、JSON 数据每个键值对的键名首尾不能是 .，例如 “.a”、“abc.”，且不能包含多个连续的 .，例如 “a…b”；
   3、键名不能重复，且不能有歧义，例如 {“a”: 1, “a”: 2} 或 {“a”: {“b”: 1}, “a.b”: 2}；
   4、时间格式须为 ISODate 格式，例如 “date”: { “$date” : “2018-08-31T17:30:00.882Z” }；
   5、当使用 Insert 冲突处理模式时，同一文件不能存在重复的 _id 字段，或与数据库已有记录相同的 _id 字段；
   6、CSV 格式的数据默认以第一行作为导入后的所有键名，余下的每一行则是与首行键名一一对应的键值记录。

   处理方式： 导入新的json文件

   const fs =require("fs");
   let res = fs.readFileSync('./mydata.json').toString();
   let reg = /\}\s*\,\s*{/g;
   let result = res.replace(reg,"}{");
   fs.writeFileSync("./wxList.json",result);
   

2. 获取云存储的数据

   • 初始化数据库

     const db = wx.cloud.database()
     

   • 查询数据库

     db.collection("库名").get().then(res => {
     	console.log(res)
     });
     

3. 点击跳转到详情页

   跳转时将自己当前的id传递过去
   
   <div class="content-detail" @click="goDetail(v)" v-for="(v,k) in myLikeData" :key="k"></div>
   
   goDetail(val) {
   	wx.navigateTo({
   		url: "../detail/main?id=" + val._id
   	});
   }
   

4. 上拉更新

   onReachBottom(){
   	...
   }
   

列表详情

1. 页面渲染

   • 接收到首页跳转时传递的数据

         onLoad(option){
     		 console.log(option)
     	},
     

   • 通过数据获取到当前完整数据

     db.collection("collectList").doc(option.id).get({
     	success:res=>{
     		this.obj = res.data;
     		this.collectImg = true;
     	},
     	fail:res=>{
     		db.collection("newList").doc(option.id).get().then(result=>{
     			result.data.image_path = "自己云存储上边的统一标识符" + result.data.image_path
     			this.obj = result.data;
     			this.collectImg = false;
     		})
     	}
     })
     

2. 点击收藏
   • 点击收藏按钮样式发生改变
     • 新建一个，存储已收藏数据的唯一标识符，并判断是否收藏

       if(this.collectImg){
       	console.log("已收藏")
       } else {
       	console.log("未收藏")
       }
       

       • 未收藏——上传数据

         db.collection('collectList').add({
         	data:{
         		...this.obj
         	}
         }).then(res=>{
         	console.log(res)
         })
         

       • 已收藏——删除数据

         db.collection('collectList').doc(this.obj._id).remove().then(res=>{
         	console.log(res);
         	this.collectImg = false;
         })
         

   • 下次打开时检测是否已收藏
     每次在加载页面时 先去获取收藏集合里的数据 成功就渲染到页面，并且设置为已收藏图标 失败获取原本集合里的数据 然后渲染页面，并且设置为未收藏图标

     onLoad(option){
     	db.collection("collectList").doc(option.id).get({
     		success:res=>{
     			this.obj = res.data;
     			this.collectImg = true;
     		},
     		fail:res=>{
     			db.collection("newList").doc(option.id).get().then(result=>{
     				result.data.image_path = "自己云存储的统一标识" + result.data.image_path
     				this.obj = result.data;
     				this.collectImg = false;
     			})
     		}
     	})
     },
     

地图

地图列表渲染

1. 引入数据
2. 循环赋值页面

点击导航字母跳转到对应城市位置

1. 须通过scroll-view实现
2. scroll-into-view:值应为某子元素id（id不能以数字开头)

<scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="letter">
	.......
</scroll-view>

点击城市切换定位

类似于组件传参的eventBus，需要在传递参数的页面和接收参数的页面都写上

1. 通过全局变量传递参数

   let app = getApp();
   app.globalData.自定义属性 = "传递的参数"
   

2. 通过全局变量接收参数

onShow() {
	if (typeof app.globalData.自定义属性(需要和你传递页面的这个属性名一致) != "undefined") {
		this.city = app.globalData.c;
	}
},

为什么使用onShow而不是onLoad:
onLoad只会在页面第一次创建时触发 而这里是从跳转出去的页面返回一级到这个页面 onLoad是不会被触发的 所以使用onShow,每次进入到当前页面都会被触发

点击城市后跳转回首页

wx.navigateBack({
	delta: 1
})

这里的delta为你要想上返回几层，返回几层就写几

个人中心

判断用户是否登录

1. 获取openid

   getOpenId() {
   	return new Promise((resolve, reject) => {
   		wx.login({
   			success: result => {
   				let code = result.code;
   				wx.request({
   					url: `https://api.weixin.qq.com/sns/jscode2session?appid=wxb49315418db7e879&secret=d40f63610573267e4293be7c09aaf18e&js_code=${code}&grant_type=authorization_code`,
   					success: res => {
   						let openid = res.data.openid;
   						resolve(openid);
   					},
   					fail(err) {
   						reject(err);
   					}
   				});
   			}
   		});
   	});
   }
   

2. 获取用户信息

   getUserInfo() {
   	return new Promise((resolve, reject) => {
   		 wx.getUserInfo({
   			success: res => {
   				let userInfo = res.userInfo;
   				resolve(userInfo);
   			},
   			fail(err) {
   				reject(err);
   			}
   		});
   	});
   },
   

3. 判断是否登录

   if (this.userInfo) {
   	this.isLogin = true
   } else {
   	this.isLogin = false
   }
   

   • 登录——渲染用户信息
   • 未登录——渲染登录信息
     • 点击登录按钮
       • 获取openid
       • 获取用户信息
       • 存储在本地

         async getInfo() {
         	this.userInfo = await this.getUserInfo();
         	this.openId = await this.getOpenId();
         	this.userInfo.openid = this.openId;
         	wx.setStorage({
         		data: this.userInfo,
         		key: this.openId,
         	})
         	this.isLogin = true
         },
         

跳转收藏列表

wx.navigateTo({
	url: "../collect/main"
});

收藏

渲染收藏列表到页面

onLoad() {
	db.collection("collectList").get().then(res => {
		res.data.forEach(e => {
			return (e.label = e.label.split(","));
		});
		this.colList = res.data;
	});
},

点击列表跳转详情

goDetail(val){
	wx.navigateTo({
		url: "../detail/main?id=" + val._id
	});
}