map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些组件上的,用于设置在map上或者设置在视频播放上等等,上面提到map标签要用标签对就是应对这种情况.将cover-view组件嵌套在map组件内就可以了.cover-image组件可以嵌套在cover-view内. <map id="myMap" show-location=&quo

scroll-view占满整个屏幕,且scroll-view的滚动不影响到页面其他地方的滚动 在iphone6的尺寸下,scroll-view设置高度为1110rpx,就不会影响页面其他地方的滚动 但是当屏幕尺寸调至iphone5时,左边scroll-view的滚动,就会带动右边内容的滚动 而在iphone7 plus时,scroll-view不能占满整个屏幕 最后发现只需要将scroll-view的高度设置为 100vh 就可以解决这个问题 <scroll-view scroll-y="

微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后的宽高,如果是适应屏幕宽度的话,就用到 wx.getSystemInfo() 方法设备的信息,并保存到一个数组中,(因为加载的原因不能用push,只能根据索引),切换时监听当前显示的图片,根据其索引找到对应的高度,并赋值给组件即可. wxml: <view class='swiper'> <

最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <input class='phone' placeholder='请输入手机号' placeholder-class='placeholder'></input> <view class='code_container'> <input class='code' placehol

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:n

获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfoSync()[官方文档]获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的. let res = wx.getSystemInfoSync(); let statusHeight = res.statusBarHeight; // 注意

如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ border: 1px solid #ccc; border-radius: 10rpx; width: 60%; float: right; height: 20px; min-height: 20px; padding-left: 10rpx; font-size: 30rpx; }

微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view class='content'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0&qu

1. 设置图片,小程序支持两种引用图片方法,一种是本地引用,一种是网络资源引用. 但是引用本地图片的的时候不能用wxml样式去引用本地的图片,不会报错,也没效果.就是在wxss页面中不能引用本地的图片.这个时候就要用image组件了. 2. 加载本地的图片 <image class="user" src='../../images/login/icon.png' style='width:120px;height:120px'></image> src是图片的相

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror     当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}4.bindload     当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片

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

Map组件 是原生组件,使用时请注意相关限制.个性化地图能力可在小程序后台"设置-开发者工具-腾讯位置服务"申请开通. 设置subkey后,小程序内的地图组件均会使用该底图效果,底图场景的切换会在后续版本提供. 详见<小程序个性地图使用指南> 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/map.html 本文主要展示地图组件的几个能力: 经纬度转预览图 经纬度转大图 地理位置转经纬度 预

官方实例:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object 官方实例代码如下: Page({ onShareAppMessage() { const promise = new Promise(resolve => { setTimeout(() => { resolve({ title: '自定义转发标题' }) }, 2000) }

Md2All 一个Markdown在线转换工具 网址:http://md.aclickall.com 微信公众号:颜家大少本文所用排版工具:http://md.aclickall.com 支持通用的Markdown语法,并对html,css样式有很好的支持(请看后面示例的高级使用部分) 对微信公众号做了特别的优化:解决把内容粘贴到公众号时,图片.或样式丢失的问题;解决代码块换行不正确,特别是iPone.iPad上不会滚动的问题. 对代码块的显示专门做了优化,几十种超酷的代码风格任你选择 支持 "

小程序开发并不愉快,许多必建的文件不会自动生成,页面之间的跳转没有快捷键,开发者工具显示区域受限……如果谁有对应的解决办法求告知…… 开始的时候每次保存代码,页面都会刷洗重新渲染一次,而且自动跳回首页,让人很不爽,后来随便点点,发现这里还是可以设置一些东西方便开发的. 开发模式下,点击左侧的“项目”,下面的选项可以阻止ctrl+S触发的刷新(其实这个留着也挺好的,不卡就行). 下一个选项是允许开发环境中从未注册的域名中请求数据,下载文件等.项目上线则需要将相关的域名都在开发设置中添加进去,每个月

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------

   最近在跟斯坦福的CS106A,里面的java代码都是Applet程序,而我运行程序的时候发现,Applet小程序窗口大小总是固定的,但是我画的图却越来越大,所以怎么在Eclipse中run的时候生成大一点的窗口呢?    网上说只要安装一个名叫myeclipse的插件就可以直接到html文件中去修改,事实上直接在eclipse中也可以进行设置,方法如下:    右击你的Applet程序(.java),在弹出的下拉菜单中选择Run AS > 选择Run configurations > 选

开发设置中,启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 不过照着说明去操作,即使按照最简单的明文方式去设置,还是提示Token验证失败.仔细研究说明,其实服务器验证过程很简单,用Get发来一个连接,然后在自己的页面中去检验,不想做也可以先不做,直接返回echostr即可.关键在,怎么返回,开始我还以为必须要按照xml或者json返回,试了半天,其实很简单,清空所有其他输出,直接返回echostr即可. Response.Clear()

好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮 在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别

参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的XX.json中去配置 "navigationBarTitleText":"在线教研" 页面就有在线教研了 点击按钮 页面标题由 在线教研 变为 校验成功 getalldata是按钮的点击事件 通过 wx.setNavigationBarTitle来设置动态标题 tit