小程序常见问题总结

布满荆棘的人生 2021-12-20 00:35 298阅读 0赞

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

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>

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

<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][http]

**十、云函数的使用**

api：[云函数][Link 1]

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

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

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

[miniprogram]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm
[http]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/init.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html