一、小程序中如何获取地理位置并通过小程序展示地址
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 });
}
})
}
二、小程序中如何进行路由跳转
跳转到新页面
在当前页打开
切换 Tab
打开绑定的小程序
//保留当前页面,跳转到应用内的某个页面。但是不能跳到 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'
>
四、小程序中如何调用地图标记地点
五、小程序中如何分享好友,添加属性即可
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
var msg = function(val){
return val.substring(0,18)
}
module.exports.message = msg;
{{m1.message(statement)}}
九、小程序中云数据库的使用
api:云开发http
十、云函数的使用
api:云函数
1.比如在cloudfunctions下建立一个nodejs云函数seeCount,然后进入该文件夹使用npm i
2.想要写的逻辑直接在index.js里面进行编辑(想要操作数据库请注意,前端的使用时wx.cloud.database();而云函数中是require('wx-server-sdk').database())
3.编写逻辑代码完毕,鼠标右键选折该函数,上传并部署即可。