搭建
iconfont的使用
引入import '../../style/iconfont2.css'
使用<Text className='iconfont2 icon-sousuo'></Text>
標(biāo)簽別寫<i>楞黄，改變樣式用.icon-sousuo
位置
先獲取經(jīng)緯度
taro中異步編程要裝包
// 獲取用戶的地理位置
async getLocation () {
let point = await Taro.getLocation()
console.log(point)
}
componentDidMount () {
this.getLocation()
}
打印結(jié)果
再把經(jīng)緯度轉(zhuǎn)為城市
逆地址解析網(wǎng)址
引入文件椰棘，設(shè)置key
// 騰訊地圖继榆，坐標(biāo)逆解析
import QQMapWX from '../../qqmap-wx-jssdk1.0/qqmap-wx-jssdk'
var qqmapsdk = new QQMapWX({
key: 'xxxxxxxxxxxxxxx'
});
進(jìn)行逆解析
// 獲取用戶的地理位置
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,
})
}
// 坐標(biāo)逆解析方法
reverseGeocoder(obj) {
return new Promise((resolve, reject) => {
qqmapsdk.reverseGeocoder({
location: obj,
success(res){
resolve(res)
},
fail(res){
reject(res)
}
})
})
}
輪播
首頁發(fā)請(qǐng)求拿值
// 獲取輪播圖
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>
)
}
}
菜單
類似輪播，字體圖標(biāo)拼寫下
<Text className={"iconfont icon " + item.icon}></Text>
獎(jiǎng)勵(lì)
jsx中不能用路徑引入圖片母市，方法如下
import award from '../../imgs/jiangli.png'
<Image src={award} mode="widthFix" className="award"></Image>
拼團(tuán)
1.
- 橫向滑動(dòng)展示商品
overflow-x: auto;
white-space: nowrap;
- 具有塊級(jí)元素的特點(diǎn)藐不，能設(shè)置寬高；具有內(nèi)聯(lián)元素的特點(diǎn)挑围，在同一行展示
display: inline-block;
-
<image>標(biāo)簽中的mode
text-decoration: line-through;劃線
廣告組
flex的元素多行顯示
flex-wrap: wrap;
猜你喜歡
計(jì)算商店和當(dāng)前定位之間的距離
獲取商店經(jīng)緯度，獲取當(dāng)前位置經(jīng)緯度糖荒，計(jì)算距離杉辙，渲染數(shù)據(jù)
// 獲取用戶的地理位置
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())
// 拿到商店的經(jīng)緯度數(shù)組
let shopDisArr = shopArr.map((item, index) => {
return {
latitude: item.distance.lat,
longitude: item.distance.lng
}
})
let disObj = {
from: {latitude, longitude},
to: shopDisArr
}
// 計(jì)算距離
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
})
}
// 計(jì)算距離方法
calculateDistance(obj) {
return new Promise((resolve, reject) => {
qqmapsdk.calculateDistance({
from: obj.from,
to: obj.to,
success (res) {
resolve(res)
},
fail (res) {
reject(res)
}
})
})
}
計(jì)算距離時(shí)，傳入的參數(shù)obj.to可以是數(shù)組
其他問題
npm和yarn在創(chuàng)建其他項(xiàng)目的時(shí)候有沖突捶朵，把yarn卸載了蜘矢。不再使用yarn dev:weapp來啟動(dòng)項(xiàng)目，而使用npm run dev:weapp來啟動(dòng)項(xiàng)目综看。此時(shí)報(bào)錯(cuò)：“ ‘taro' 不是內(nèi)部或外部命令 也不是可運(yùn)行的程序”品腹。
解決：npm install -g @tarojs/cli
項(xiàng)目成功啟動(dòng)后，子組件的props拿不到父組件傳遞的值红碑。
解決：新建項(xiàng)目舞吭，把當(dāng)前代碼粘貼過去即可。
