mpvue开发小程序

前两天出去面试一把，感觉有点坑，问我一堆前端的问题，结果说招后端，具体哪个公司就不给大家说了，总结就是：“面试的时候一定问清楚HR招聘的要求”。

小程序第一个问题：获取用户位置信息

获取用户位置信息，貌似18年开发小程序的时候还没有提示这种情况，直接调用wx.getLocation(),但是时隔两个月之后，哎！只能说互联网行业更新太快，时刻的学习，

出现这种情况，报错位置基本已经很清楚了（控制台也会有提示），我们去app.json中添加permisssion字段就可以了具体代码如下

"pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

填写完毕之后我们就可以获取经纬度信息了

深层次：如果想要根绝经纬度获取城市名称该怎么操作呢？

按照上面的操作我已经取得了用户的经纬度，然后在百度地图中查询具体代码如下

 loadCity(longitude, latitude){
      console.log(longitude)
          var page = this
          wx.request({
            url: 'https://api.map.baidu.com/geocoder/v2/?ak=百度ak&location=' + latitude + ',' + longitude + '&output=json',
            data: {},
            header: {
              'Content-Type': 'application/json'
            },
            success: function (res) {
              console.log(res);
              var city = res.data.result.addressComponent.city;
              // page.setData({ currentCity: city });
            },
            fail: function () {
              // page.setData({ currentCity: "获取定位失败" });
            },
            
          })
        }

小提示：1.在使用wx.getLocation()方法时，我们要用箭头函数不然this指向会有问题

2.在同样配置完成之后，还需要一步操作，就是域名的合法性，需要再小程序的后天把百度的域名添加上去，不然会提示不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

具体代码如下

 wx.getLocation({
      type: 'wgs84',
      success:res=> {
        var longitude = res.longitude
        var latitude = res.latitude
        this.loadCity(longitude , latitude)
      }
    });

小程序第二个问题：改变顶部title

如果用原生编写小程序大家也许很清楚在什么地方添加顶部的title,但是用mpvue大家也许有些蒙蔽了，具体做法，在我们搭建好项目的时候其实有一个用例，在log这个文件夹下面，所以我们如果想要更改顶部的titile时候需要再当前的文件夹下添加一个json文件然后具体代码如下

{
  "navigationBarTitleText": "快起步首页"
}

说白了其实就是少了一个配置文件而已，希望给大家做一个参考

小程序第三个问题：吸顶的做法

所谓吸顶就是上拉固定某一块位置在顶部并且隐藏某一模块，下拉展示某一模块，定位取消。用vue和远程写可能会相对简单点，但是用mpvue，我们的借鉴小程序的scroll-view标签的scroll属性，具体代码如下

 <scroll-view  :style="{'height': '600px'}" :scroll-y="true"  @scroll="scroll" >
      
      <CardHeader></CardHeader>


      <div class="condition" :class="searchBarFixed == true ? 'isFixed' :''">
          <div v-for="(item , index ) in condition" :key="index" :class="[index == checkedNum ? 'checked' :'']" @click="dbChecked(index)">
            <label>{{item.title}}</label>
            <span class="iconfont" v-bind:class="item.class"></span>
          </div>
      </div>

      <Cardsx></Cardsx>
    </scroll-view>


scroll(el){

     if(el.mp.detail.scrollTop>44){  //获取到顶部的距离》大于某一个值
        this.searchBarFixed = true;
     }else{
        this.searchBarFixed = false;
     }
   },

小程序第四个问题：组件的用法

在上面我已经用过了组件，他和vue引用组件的方式大致差不多，唯一不同的就是不知道为啥非得在前面添加一个Card

import Cardsx from '../../components/shuaixuan';
components: {
    Cardsx
  },

5:,mpvue实现小程序的外链跳转，

首选：我们需要再app.json里配置里添加的路径名称

其次：新增点击事件大致内容和一般跳转类似

备注：以下是outline文件的内容

6.铺满屏幕：

单独讲铺满屏幕，主要用到mode='widthFix'

具体加在的程序段是.wxml：

<image src="/images/img21.jpg" class='in-image' mode='widthFix'> </image>