首页
定位当前城市
- 获取经纬度
wx.getLocation({
type: "wgs84",
success: res => {
console.log(res); // 获取到经纬度
}
});
- 需要给app.json配置permission字段
{
"pages": [
...
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
}
-
根据经纬度逆解析
- 使用腾讯地图小程序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; } });
-
- 使用腾讯地图小程序JavaScriptSDK
-
点击跳转地图——跳转时加上参数(当前城市)
goCity() { wx.navigateTo({ url: "../city/main?city=" + this.city }); },
列表渲染
-
将列表数据、图片资源全部上传到云存储数据库
注意点:
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);
-
获取云存储的数据
- 初始化数据库
const db = wx.cloud.database()
- 查询数据库
db.collection("库名").get().then(res => { console.log(res) });
- 初始化数据库
-
点击跳转到详情页
跳转时将自己当前的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 }); }
-
上拉更新
onReachBottom(){ ... }
列表详情
- 页面渲染
-
接收到首页跳转时传递的数据
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; }) } })
-
- 点击收藏
- 点击收藏按钮样式发生改变
- 新建一个,存储已收藏数据的唯一标识符,并判断是否收藏
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; }) } }) },
- 点击收藏按钮样式发生改变
地图
地图列表渲染
- 引入数据
- 循环赋值页面
点击导航字母跳转到对应城市位置
- 须通过scroll-view实现
- scroll-into-view:值应为某子元素id(id不能以数字开头)
<scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="letter">
.......
</scroll-view>
点击城市切换定位
类似于组件传参的eventBus,需要在传递参数的页面和接收参数的页面都写上
-
通过全局变量传递参数
let app = getApp(); app.globalData.自定义属性 = "传递的参数"
-
通过全局变量接收参数
onShow() {
if (typeof app.globalData.自定义属性(需要和你传递页面的这个属性名一致) != "undefined") {
this.city = app.globalData.c;
}
},
为什么使用onShow而不是onLoad:
onLoad只会在页面第一次创建时触发 而这里是从跳转出去的页面返回一级到这个页面 onLoad是不会被触发的 所以使用onShow,每次进入到当前页面都会被触发
点击城市后跳转回首页
wx.navigateBack({
delta: 1
})
这里的delta为你要想上返回几层,返回几层就写几
个人中心
判断用户是否登录
-
获取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); } }); } }); }); }
-
获取用户信息
getUserInfo() { return new Promise((resolve, reject) => { wx.getUserInfo({ success: res => { let userInfo = res.userInfo; resolve(userInfo); }, fail(err) { reject(err); } }); }); },
-
判断是否登录
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
});
}