在app.json处设置“tabBar”,例子如下: { "pages": [ "pages/index/index", "pages/pages1/pages1", "pages/pages2/pages2" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundCol

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

最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论,设计总监拿他手机(高大上的苹果机)当场演示,才恍然,这是又入了大苹果的坑... 啊,说这么多废话好累! 如果发现你的小程序在scorll-view设置了enable-back-to-top为true,在安卓上返回顶部好使,ios上点击状态栏返回顶部不好使,如下图操作即可.

前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是很忙,终于磨磨唧唧的写了个小demo,(当然还有好多接口没有使用). 预计阅读时间:5min 正文 介绍 小程序的框架,挺像Vue的. wxml <view> Hello {{name}}! </view> <button bindtap="changeName&quo

不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙的小程序,还未展现全貌,就已经成了开发界的头条大事儿.有人不以为然.嗤之以鼻,有人奉若神明.投怀送抱.敢于尝鲜的已经开始动手了--不管合不合适,先借这个热度来一波关注是不错的选择: 所谓"不登高山,不知天之高:不临深溪,不知地之厚".我生怕看不清小程序这座大山,滚去做了个demo.放上几张

官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 组件视图 #视图API文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161122#视图手机体验https://mp.weixin.qq.com/debug

最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开发中遇到的难点.项目的架构设计.最佳实践以及踩过的坑.文章内容较多,如果想看架构设计和躲坑技巧,请直接浏览后面的正文,简书没有目录,也挺伤感的. 值得再次声明的是:微信小程序的内容部分是hybrid模式,并非原生,所以性能并不好,绑定的tap事件也有明显的延迟. 每一个由边框围起来的部分,都是一个最

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }

一.概述     特点:对商家来说,小程序的开发成本低(有丰富的组件.api等).运营成本低(有数据日志等).稳定.互动流畅,便于分享.传播(基本微信平台的大量用户).对用户来说,扫码即可获取服务,随时可用,无须安装卸载     市面上的一部分互联网产品划分(图片来在网络):                       一些刚需和高频的金融类.电商类.教育类等其实是最不适合接入小程序的.这些功能都太重了,小程序难以承载.再加上小程序是无法被关注的,这也就以为着,它没有办法获取用户更多的信息,这对

微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值得我们学习的,技术上面如果了解React的话,会发现他们在组件化上面有很多雷同之处.说白了,小程序就是基于微信平台的H5轻应用,微信将系统底层功能(设备.位置.媒体.文件等)和微信自身功能(登录.支付.分享等)封装成相应API供小程序调用. 自己根据官方文档写过一个DOME,借助和风天气开放API接

微信小程序图片轮播及滚动视图 移动端常用效果图片轮播及数据列表已被小程序封装成了组件,这里和大家分享一下如何使用. Scroll-view   可滚动视图区域 Swiper       图片轮播容器 Navigator    页面链接的3种方式 scroll-view 属性说明如下:   使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height.示例代码:      效果图:      注意点: tip: 请勿在 scroll-view 中使用 textarea.map.canva

一.基本的准备工作 1.工具安装 工具是有微信官方提供. 2.下载地址: windows32位:https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1475052055457 windows64位:https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&t=147

新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只有项目才是实践学习的根本:二来刚出来,总是有很多坑.爬坑总是痛并快乐着. 再多的借口,产品项目需求拍在桌前,都得缴械投降.不要怂撸起袖子,就是干. 初识小程序 微信推出小程序,想要实现即开即用,用完即走的用户体验.免去APP下载安装繁琐的流程.听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间.而小程序

尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. 1 2 3 app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量. app.json 这个文件可以对小程序进行全局配置,决

年前的时候,因为公司开发小程序的人员不够,临时参与了一个项目中几个小模块的开发,这里做个简单的小记录,眼过千篇不若手过一遍,希望将来如果要用到时不至于大脑空白! 开发工具:wechat_devtools 一,准备工作 1.申请账号. 2.安装开发工具. 二,小程序代码构成 1.json配置:app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部 tab 等.这里说pages,window,tabBar三个项目中使用到的主要配置项,其余配置可参考小程序

目录 一.样式中如何使用background-image呢? 二.使用自适应单位rpx类似于rem,布局尽量使用flex布局 三.万能的{{双大括号,用于在模版中输出变量 四.你想要的基础组件和API,微信的mina框架和通用API都给你准备好了 五.使用wepy框架,这里没有click,只有tap,longpress和touchend等等 六.使用wepy框架全局的东西都可以丢到app.wpy中,如globalData 七.异步更新数据后记得调用this.$apply()更新视图 八.使用we

根据上一文,已建立QuickStart 项目,该项目系本人毕设部分内容,所以记录以便以后查阅 开发小程序就必须了解小程序项目目录结构和文件作用,接下来就根据我现在自学得到的知识把这些记录下来. 一.目录介绍 首先这是该项目目录 小程序包含一个描述整体程序的app和对个描述各自页面的page,小程序的主体部分由三个文件组成----app.js.app.json.app.wxss,他们的作用如下 一个小程序页面由四个文件组成---js.wxml.wxss.json 二.配置介绍 全局配置 小程序根目

微信小程序 小程序代码构成 JSON配置WXML模板WXSS样式JS逻辑 1.JSON配置 小程序配置 app.json app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部 tab 等 pages字段 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录. window字段 用于设置小程序的状态栏.导航条.标题.窗口背景色.定义小程序所有页面的顶部背景颜色,文字颜色

三个概念 微信:就是一个聊天工具 微信公众号:企业或个人用于管理其粉丝/用户的应用(类似于APP) 微信小程序:不需要下载安装直接可以使用的软件/应用/APP 小程序与公众号的区别: 定位不同(小程序:产品与服务,公众号:营销与信息传递) 体验差异(小程序:体验接近原生APP,公众号:操作延时较大) 技术区别(小程序:微信自身开发环境与开发语言,公众号:基于H5开发) 1.之前通过申请获得了小程序的AppId通过QuickStart快速生成了一个小程序 这个时候可以使用预览然后用手机扫描二维码预

2018.3.25 这个时间我觉得更具58页面进行模仿. 微信小程序,标题更改在app.json文件中window属性. window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖.

首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量. - app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等. - app.wxss 是小程序的公共样式表.(为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性. 同时为了更