小程序常见问题总结

一、小程序中如何获取地理位置并通过小程序展示地址

1.app.json权限配置：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置方便获取最新房源"
    }
  }

2.调用

wx.getLocation({//获取经纬度
   type: 'wgs84',
   success: res => {
      var longitude = res.longitude
      var latitude = res.latitude
     _this.loadCity(longitude, latitude)
   }
})

loadCity: function (longitude, latitude) {//百度api，经纬度转换地址
     var page = this
     wx.request({
       url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=......&location=' + latitude + ',' + longitude + '&output=json&coordtype=wgs84ll',
        data: {},
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          // success 
          console.log(res);
          var city = res.data.result.addressComponent.city;
          console.log("城市为" + city)
          page.setData({ city: city });
        }
    })
  }

二、小程序中如何进行路由跳转

<!-- 按钮形式 -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.navigateTo({
   url: '/commen/cityIndex/cityIndex'
})
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/index'
})
//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
  url: 'test?id=1'
})
//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
  url: 'test?id=1'
})
// 返回两层
wx.navigateBack({
  delta: 2
})

三、联系客服如何携带图文信息

<
    button 
    open-type='contact' 
    text="立即沟通" 
    send-message-title="商品" 
    send-message-img="{{pageData.img[0].pic_url}}" 
    send-message-path="/pages/indexItem/indexItem?id={{pageData._id}}" 
    show-message-card='true'
>
</button>
<!--show-message-card:必填  send-message-path：要分享的地址  send-message-img：图文的img send-message-title：图文标题   open-type='contact'：必填，调起联系客服-->

四、小程序中如何调用地图标记地点

<!--latitude,longitude:地图对应的经纬度    markers：标记的点，type：array，[{latitude: "21.099994", longitude: "110.324520"}]-->
<map
    id="myMap"
    latitude="{{pageData.latitude}}"
    longitude="{{pageData.longitude}}"
    markers="{{pageData.markers}}"
    show-location
>
</map>

五、小程序中如何分享好友，添加属性即可

open-type="share"

六、小程序中如何调用npm包（以vant为例）

1.组件的包，应当安装在miniprogram下，小程序是不允许依赖包安装在根目录下

2.打开miniprogram目录，输入 npm i vant-weapp -S --production

3.在开发者工具中，打开详情，勾选npm选项。再打开工具-->构建npm

4.在页面的json文件中进行引入，即可使用

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index",
    "van-search": "/miniprogram_npm/vant-weapp/search/index",
    "i-icon": "/iview/icon/index",
    "van-card": "/miniprogram_npm/vant-weapp/card/index",
    "van-tag": "/miniprogram_npm/vant-weapp/tag/index"
  }
  
}

七、小程序中调用全局的变量，方法

const app = getApp();
app.globalData.openid = '11111111';//其他page即可引用

八、wxs脚本的使用

场景：获取到的data数据，在渲染页面时，是不能使用字符串或者数组进行处理方法的，这时候就用到了wxs

<wxs module="m1">
    var msg = function(val){
        return val.substring(0,18)
    }
    module.exports.message = msg;
</wxs>
<view>{{m1.message(statement)}}</view>

 

九、小程序中云数据库的使用

api：云开发http

十、云函数的使用

api：云函数

1.比如在cloudfunctions下建立一个nodejs云函数seeCount，然后进入该文件夹使用npm i

2.想要写的逻辑直接在index.js里面进行编辑（想要操作数据库请注意，前端的使用时wx.cloud.database();而云函数中是require('wx-server-sdk').database()）

3.编写逻辑代码完毕，鼠标右键选折该函数，上传并部署即可。