1. 登录公众号平台 https://mp.weixin.qq.com/ 2. 设置->第三方服务->添加插件->输入插件名称->申请 3. 项目中使用 3.1 app.json配置 3.2 项目中配置wxml,json,js wxml <map-route route-info="{{routeInfo}}"></map-route> json { "usingComponents": { "map-rou

一.本篇文章主要知识点有以下几种: 1.授权当前位置 2.map组件的使用 3.腾讯地图逆地址解析 4.坐标系的转化 二.效果如下: 三.WXML代码 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="6" markers="{{markers}}" bindmarkertap="markertap&

微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​ 小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.

微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)config.js /** * 小程序配置文件 */ // 此处主机域名修改成腾讯云解决方案分配的域名 var host = 'https://vqp8djdy.qcloud.la'; var config = { // 下面的地址配合云端 Demo 工作 service: { host, // 登录地址,

欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS等: 本篇概览 前段时间因为工作关系接触了微信小程序的实时音视频播放,这里将过程详细记录下来,作为今后的参考: 整体方案上,我这边用OBS推流到腾讯云,再用小程序的live-player组件从腾讯云拉流播放,架构图如下: 本篇内容就是上图中的所有操作,从配置OBS推流开始,到腾讯云直播服务配置,再到

微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度

}) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小程序框架删除的并不是我们自己编写代码删除的,是腾讯把删除原页面的功能封装在了这个接口里面. 当点击“A页面”进入到“B页面”时,原“A页面”将被删除掉,只留下当前页面“B页面”,如果从“B页面”又进入到了“C页面”后,那么,“B页面”也被删除掉了,当前页面就是“C页面”. 如果我想回到“A页面”或“

在个人开发微信小程序时,发布之前要配置微信小程序的域名https及域名的SSL证书的申请及安装 我用的是腾讯云,SSL证书申请好之后,点击下载,解压文件夹,会有如图,根据你要配置的服务器是哪种,我是tomcat配置,这时候腾讯云官方有文档,教你4种不同该怎么去云服务器配置,一步步跟着走就行.一般配置完成后会发现,还是运行不了https的网址,我个人用配置Tomcat时就出现这个问题,小程序端还是不能认证https的网址,这时将云服务器tomcat/conf/server.xml中的注释掉,就成功

先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持. 不过有了需求,也要想办法解决呀. 图层查询 既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢? 首先想到的是通过图层查询接口把所有数据查出来. 但是既然数据是按图层发布的,一般数据量都比较大,把所

下单 通过下单获取prepay_id,然后返回给小程序发起支付 若是服务商,mch_id:传入服务的商户号:sub_mch_id:传入子商户的商户号,算法签名的秘钥是服务商的秘钥. 'use strict'; const Service = require('egg').Service; class wxPayment extends Service { // 小程序支付 async unifiedorder(data) { const { ctx } = this; const wxpayUi

在开发过程中,不少人肯定遇到过要用到地图,那么在小程序里,腾讯也给出了相应的SDK供我们来使用.那么接下来,就介绍下如何使用该SDK实现获取经纬度然后显示当前用户所在地址 首先第一步:下载腾讯地图SDK,地址:http://download.csdn.net/download/qq_36431166/10050677(也可以在官方下载:lbs.qq.com); 进去之后呢可以看到下面 第二步是下载SDK,第一步,申请密钥,大家点击进去,根据流程填好,就会了! 至于第三步,在哪里填加,登录小程序微

环境:微信SDK2.9+   + uniapp (可切换直接使用.map.js不限制环境) 正题: 先创建一个地图组件 <template> <view class="customCanvasComponent"> <!-- 建立画布坐标系 --> <canvas :style="{ width: `${options.style.width}rpx`, height: `${options.style.height}rpx`, bo

原文地址: http://fanjiajia.cn/2018/08/30/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E8%85%BE%E8%AE%AF%E5%9C%B0%E5%9B%BE%E6%98%BE%E7%A4%BA%E5%81%8F%E5%B7%AE%E9%97%AE%E9%A2%98/ 背景 在小程序中使用map组件,可以调用腾讯地图的API,将一些固定的点标记到地图界面上,点的经纬度获取是通过android端百度地图API获取的,所

swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也可以是文本,以及其他组件,需要灵活应用. 基本的配置包括:是否显示面板指示点.指示点颜色,当前选中的指示点颜色.是否自动切换.自动切换时间间隔.是否垂直滚动等. 详情如下官方文档: 实例:编写新闻阅读列表 示意图: 按照第二篇随笔:初尝小程序2-基本框架,中的工程,进行添加内容. 工程目录结构为:

1.在app.json中与pages平级的位置处,加上: "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口展示" } }, 注意:必须有类似于上面的汉字文字说明.   2.在.wxml中 <button open-type="getUserInfo">允许使用微信昵称等</button> <but

在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //container是地图显示模块id Taro.getLocation({ type: 'wgs84', success(res) { _this.setState({ latitude = res.latitude, longitude = res.longitude }) } }) //移动到定位

下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一.基本使用方法 1. Copy文件夹wxParse,把wxParse放在与page同一级目录 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxPars

index.wxml: longitude:经度 latitude:维度 地图所定位的区域 index.js 地图所定位的点

实现功能: 点击不同的tab导航,筛选数据 UI:   js: data:{ navbar: ['半月维保', '季度维保', '半年维保',"年度维保"],    //count:[0,2,3],                                  //记录不同状态记录的数量    currentTab: 4, } //响应点击导航栏  navbarTap: function (e) {    var that = this;    that.setData({    

  GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / 180.0; var radLat2 = lat2 * Math.PI / 180.0;   var a = radLat1 - radLat2;   var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;   var s = 2 * Mat

页面 <picker mode="time" value="{{time}}" start="{{minTime}}" end="{{maxTime}}" bindchange="timeChange"> {{time}} </picker> <picker mode="date" value="{{date}}" start="