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

效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat

详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小米8等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的, 所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight 第一步:全局设置 把ap

微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的标识,然后 用递归算法进行上传 在上传成功的回调函数里面,直接递归,标识满足直接跳出,完成所有图片上传 贴上个

效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的文字描述. wx.ready(() => { wx.getLocation({ type: "gcj02", success: function(res) { var location = "&location=" + res.longitude + &q

在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,效率上肯定不如css直接给定样式. 于是我们

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

问题:base64图片不能直接用wx.saveImageToPhotosAlbum保存到手机相册 解决: 先用fs.writeFile写入本地文件,再wx.saveImageToPhotosAlbum保存到手机相册 saveimg:function(){ var _this=this //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx.env.USER_DATA_PATH + '/qrcodeI

业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 github源码链接 https://github.com/richard1015/canvas 微信IDE代码预览 https://developers.weixin.qq.com/s/DBZhf8mB7qaD 海报需求设计图分析 图1分析: 可以看到海报 要求宽750 高1218(当然了数据是动态

在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null } }, touchStartHandle(e) { // 单手指缩放开始,也不做任何处理 ) { console.log("单滑了") retur

这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '<img class="rich-img" ' ); 就可以了 rich-text   .rich-img { width: 100% ; height: auto ; }

一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title">横向滚动</view> <scroll-view scroll-x="true" style="height:240px;white-space:nowrap"> <view class="scroll-view-it

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"

一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字——爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

尺寸单位与设计原则 首先,我们现在页面中引入一张图片    但是实际上,这个图片的大小是32*18的,之所以会显示这么大,是因为image组件默认的宽度为300px,默认的高度为225px,如果我们需要图片显示真实的大小,就需要添加相关样式进行设置. .image-show{ width:32px; height:28px; } 此时,虽然进行了大小设置,但是,图片依旧是偏大的,之所以会出现这种情况,是因为我们使用了px为单位.但是在小程序中,除了px这种单位外,还有一种rpx,小程序假定的是屏

Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个平台和垂直类掠夺者已经瓜分掉了线上流量,那么未来争夺的流量战场必然在实体场景,很多巨头其实已经证明了线下流量庞大的潜力.在快递包裹上印上自己的二维码关注公众号形成二次寄出快递的粘性,PokemonGo让用户在实体地图上捕获小精灵. 未来的入口不限于二维码,而是一切的富媒体.二维码之于2D识别,复杂图

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝牙/NFC读写器,然后通过蓝牙发送指令操作读写器对15693协议的芯片进行读写操作. DAY #1 上午开了半天会,下午开始开发. 先开发简单的:直接通过Android手机的NFC模块读写芯片.开发思路如下: 1. 首先调用 wx.getHCEState(OBJECT), 判断设备是否支持NFC,如