搭建
iconfont的使用
引入import '../../style/iconfont2.css'
使用<Text className='iconfont2 icon-sousuo'></Text>
标签别写<i>，改变样式用.icon-sousuo
位置
先获取经纬度
taro中异步编程要装包
image.png
// 获取用户的地理位置
async getLocation () {
let point = await Taro.getLocation()
console.log(point)
}
componentDidMount () {
this.getLocation()
}
打印结果
再把经纬度转为城市
逆地址解析网址
引入文件，设置key
// 腾讯地图，坐标逆解析
import QQMapWX from '../../qqmap-wx-jssdk1.0/qqmap-wx-jssdk'
var qqmapsdk = new QQMapWX({
key: 'xxxxxxxxxxxxxxx'
});
进行逆解析
// 获取用户的地理位置
async getLocation() {
let point = await Taro.getLocation()
console.log(point)
let latitude = point.latitude
let longitude = point.longitude
let city = (await this.reverseGeocoder({latitude, longitude})).result.address_component.city
this.setState({
city,
})
}
// 坐标逆解析方法
reverseGeocoder(obj) {
return new Promise((resolve, reject) => {
qqmapsdk.reverseGeocoder({
location: obj,
success(res){
resolve(res)
},
fail(res){
reject(res)
}
})
})
}
轮播
首页发请求拿值
// 获取轮播图
async getSwiper() {
let swiperArr = (await Taro.request({
url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
})).data.data
this.setState({
swiperArr,
})
}
首页传值给组件，列表渲染
<MtSwiper swiper_arr={this.state.swiperArr}></MtSwiper>
render() {
let swiperArr = this.props.swiper_arr
let elements = swiperArr.map((item, index) => {
return (
<SwiperItem className="swiper_item" key={index}>
<Navigator className="navigator" url={item.url}>
<Image className="image" src={item.img_src}></Image>
</Navigator>
</SwiperItem>
)
})
return (
<View className="mt_swiper">
<Swiper className="swiper" indicatorDots autoplay>
{elements}
</Swiper>
</View>
)
}
}
菜单
类似轮播，字体图标拼写下
<Text className={"iconfont icon " + item.icon}></Text>
奖励
jsx中不能用路径引入图片，方法如下
import award from '../../imgs/jiangli.png'
<Image src={award} mode="widthFix" className="award"></Image>
拼团
1.
- 横向滑动展示商品
overflow-x: auto;
white-space: nowrap;
- 具有块级元素的特点，能设置宽高；具有内联元素的特点，在同一行展示
display: inline-block;
-
<image>标签中的mode
text-decoration: line-through;划线
广告组
flex的元素多行显示
flex-wrap: wrap;
猜你喜欢
计算商店和当前定位之间的距离
获取商店经纬度，获取当前位置经纬度，计算距离，渲染数据
// 获取用户的地理位置
async getLocation() {
let point = await Taro.getLocation()
let latitude = point.latitude
let longitude = point.longitude
let city = (await this.reverseGeocoder({latitude, longitude})).result.address_component.city
this.setState({
city,
})
// 获取shop的信息
let shopArr = (await this.getShop())
// 拿到商店的经纬度数组
let shopDisArr = shopArr.map((item, index) => {
return {
latitude: item.distance.lat,
longitude: item.distance.lng
}
})
let disObj = {
from: {latitude, longitude},
to: shopDisArr
}
// 计算距离
let res = (await this.calculateDistance(disObj)).result.elements
let newShopArr = shopArr.map((item, index) => {
item.dis = res[index].distance
return item
})
this.setState({
shopArr: newShopArr
})
}
// 计算距离方法
calculateDistance(obj) {
return new Promise((resolve, reject) => {
qqmapsdk.calculateDistance({
from: obj.from,
to: obj.to,
success (res) {
resolve(res)
},
fail (res) {
reject(res)
}
})
})
}
计算距离时，传入的参数obj.to可以是数组
其他问题
npm和yarn在创建其他项目的时候有冲突，把yarn卸载了。不再使用yarn dev:weapp来启动项目，而使用npm run dev:weapp来启动项目。此时报错：“ ‘taro' 不是内部或外部命令 也不是可运行的程序”。
解决：npm install -g @tarojs/cli
项目成功启动后，子组件的props拿不到父组件传递的值。
解决：新建项目，把当前代码粘贴过去即可。
