演示如下,使用时,你也许会配合它:腾讯地图路线规划 wxml: <view class='address' bindtap='onChangeAddress'> <input class='choose-address' placeholder='请选取地点' value='{{chooseAddress}}'></input> </view> wxss: .choose-address{ border: 1px solid #000; } js Page(

微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> .wxss: .hidden { display: none; } .show { display: block; } .js: data: { showOrHidden:true, //判断显示与否的,true表示显示,反之隐藏 }, 简洁的方式,利用wx:if的方式 .wxml: <view wx:

效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="map_container"> <view class="map-tab-bar"> <view class="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="

用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方法不能写到 methods里 实例生命周期 同 vue,不同的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期,详细的 vue 生命周期文档请看生命周期钩子 beforeCreate created beforeMount mounted beforeUpdate u

微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 js文件中 var WxParse = require('../../../weui/wxParse/wxParse.js'); css文件中 @import "../../../weui/wxParse/wxParse.wxss"; 页面中 <import src="../

亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 3 4 5 6 7 8 9 .login-btn {     font-size: 16px;     width: 100% !important;     font-weight: 400;     color: #fff;     border-radius: 4px;     border

说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图: 但是在手机上真机模拟的时候就比较尴尬了,地图挡住了我底部的按钮,这个要怎么办呢?先是在百度上百度了好久,别人家写的博客都说,小程序的map组件是层级最高的,这个没办法处理; 然后就觉得凉凉了,不知道要怎么办了,难道要自己重新写个地图吗?感觉又不太现实,于是就问了最近在

1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提供的cover-view及cover-image可覆盖原生组件: 2.小程序map自定义个性化地图设置: 1)进入小程序平台,点击开发找到开发者工具,点击腾讯位置服务的查看详情,进入腾讯小程序官网,点击立即接入,选择个性化地图 2)选好地图模板,点击提交 3)复制密钥 4)在小程序map里加上复制好

在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [              "pages/index/index",           "pages/main/main",      "pages/you/you",      "pages/me/me"  ], "tabBar&q

现实需求 在项目中需求,有时候现场设备发生故障,需要远程的人员知道.除了邮件方式,以微信小程序的方式也很好.今天进行尝试,并制作了一个demo版本. 1.微信小程序申请制作前端 1.1lists文件(利用模板和数据绑定循环显示数据) lists.wxml <!--lists.wxml--> <view class="warp"> <!--列表模板--> <template name="lists"> <navig

1.场景描述: IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是由系统(IOS 12)支持而不是代码实现 小程序端 基础库API input 是可以设置type属性的,设置的type属性后,当用户点击键盘的时候弹出来的键盘那是微信给封装好的.也就是说,不用设置这个type 这个问题就解决了(使用系统原生键盘)

因项目需要,以map为背景,上面悬浮有其他组件.微信开发者工具测试时一切正常,但是真机测试时地图组件却把所有的组件覆盖,检查z-index设置,一切正常,地图组件层级也在这些组件的下面,为什么会被覆盖呢? 查小程序官方文档,官方文档表示,map组件层级最高无法用z-index控制.这就很难受了. 那我一定要在地图上放东西怎么办,官方给出解决办法是 1. controls,但是controls的本质就是一张图片,无法满足多样化的需求(controls即将废弃,请使用 cover-view) 2.c

如果你发现自己的小程序页面没有返回按钮,请检查是不是用的wx.redirectTo(OBJECT)进行的跳转,如果是那就把它改成wx.navigateTo(OBJECT)就可以了. wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.

小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 none;} 另外button的样式, 都是通过button::after伪类来实现的.

演示效果如下: 资源如下 marker,png index.wxml <view class="map-container"> <map id="map" longitude="{{myLongitude}}" latitude="{{myLatitude}}" scale="18" bindcontroltap="controltap" markers="{

源码 <template> <view class="echart-box"> <canvas class="ec-canvas" :id="chartId" :canvasId="chartId" @error="error"></canvas> </view> </template> <script> import Wx

刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应的APP 思路一:用map组件来实现 坑:布局都搞好之后,在微信开发者工具一切正常,结果真机测试的时候只有地图,所有东西都被覆盖住了 效果: 原因:原生Map组件层级是最高的,并且不能使用z-index来修改层级 如果要在地图上面加一些组件呢 解决: 方案一:控件设置,控件就是controls属性,

1.wx.wxml页面部分 <view bindtap='click'>点击</view> //这是显示隐藏的部分 <view hidden="{{hiddenName}}">隐藏显示部分</view> 2.wx.js js部分 page({ data:{ hiddenName:true }, click:function(e){ this.setData({ hiddenName:!this.data.hiddenName }) } }

WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap="quxiaosongjian"> <view>取消送检</view> </view>   当前页面显示为待送检 js中: quxiaosongjian:function(e) { var that = this; var orderstate

有些时候要求下拉按钮需要动画效果,但又不需要引入插件． 这时需要手动写一个动画． 主要思路: 动态切换class 默认与动画转向的样式编写 上图是默认给出的按钮向下的样式, 上图是动画转向后的样式 上图声明动画执行动作 在page实例data对象中声明一个变量,默认给true 然后给图片加个点击事件 这样一来就达到动态切换class的动画效果啦

本案例实现动态显示城市天气的功能,案例效果如下: 首先分析制作的思路: 1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径. 2.在main.js文件中,在onLoad()函数中调用loadInfo()函数. 3. 自定义获取位置的函数loadInfo(),调用wx.getLocation,用于获取当前的纬度(latitude)和经度(longitude).在loadInfo()函数中接着调用loadCity()函数. 4. 自定义获取城市的函数