taro项目

搭建

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.

2. 横向滑动展示商品

    overflow-x: auto;
    white-space: nowrap;

3. 具有块级元素的特点，能设置宽高；具有内联元素的特点，在同一行展示

display: inline-block;

4. <image>标签中的mode
   

   

5. 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拿不到父组件传递的值。
解决：新建项目，把当前代码粘贴过去即可。