小程序 单页应用的  tab切换 实现…

代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 基于swiper组件的tab切换 2.案例目录结构 二.程序实现具体步骤 1.tab切换index.wxml代码 <view class="continer"> <!--内…

代码地址如下:http://www.demodashi.com/demo/14243.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现横版日历,tab栏 可控制显示时间 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="conta…

主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757Z GitHub: github.com/WozHuang/Miniprogram-Demo 小程序是轻量级的app,本应小巧精悍.用完即走,但是很多企业还是想要在这辆自行车上装发动机,要求拥有原生APP的操作体验.作为一介码农也只能默默想办法实现了,总不能说这东西我不想做吧 有兴趣可以在Github看看另外…

WXML中: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">地图</view> <view class="swiper-tab-list {{currentTab==1 ? 'on…

首先检查你的跳转方法,如果是wx.navigateTo(OBJECT)或者是wx.redirectTo(OBJECT)都是无法跳转的,在微信小程序中如果需要跳转到具有tab的页面必须使用wx.switchTab(OBJECT)方法(点击跳转到该方法文档说明处) 方法如下: wx.switchTab({ url: '/index' })…

在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触发的生命周期是 onShow,不经过onLoad,下图: 此时,和小伙伴讨论重定向问题时,想到用类似的方法可以做到,就立马实行: app.json中加pages/index/index(入口文件),pages/home/home(tabbar页面主页),pages/detail/detail(详情页…

问题背景 -- 分享的数据来源 当前在维护的小程序项目使用wepy开发:分享的数据都是通过接口请求后台的形式获得:然后存在了数据data的对象中:类似 定义分享数据 data = { shareData: "", // 分享数据 } 获取分享数据 tip.getShareDataReci(res => { that.shareData = res; // 赋值后台返回的分享数据 that.$apply(); }, curCode); // curCode当前商品的唯一code值…

对于小程序单选,官方文档已经贴出了代码,我这里也不做过多解释,只是分享给大家一个小功能 一般在单选或者多选时,都会出现“其他”这个选项,如果通过input焦点事件.失焦事件来控制,代码会很繁琐 这里可以用到“for”来绑定“id” <radio id="item1" style="display:none"/> <label for='item1' class='other clearfix'> <text>其他:</tex…

[1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for="{{goods}}" wx:key="index" bindtap="toDetail" data-item="{{item}}" class="goodArea"> <image src="{…

类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">…

使用微信开发者工具切新的页面保存刷新无法在左侧直接预览必须在app.json文件配置页面(填写路径但是不用写后缀名),并且把想要预览的页面放在第一个位置.…

前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最近这个项目终于上线了,我也来试着总结回顾一波吧. 关于框架的选择 我刚来现在的公司时,我就了解过有一个小程序框架叫mpvue被美团开源了,有过一个大致的了解.来了公司之后了解到我们公司已经有了一套自己的小程序技术栈那就是基于wepy的,而不是原生小程序,毕竟我们要开发的小程序不是简单的几个页面,而且…

前言 最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析 首先实现这个功能分为三步: 实现顶部menu菜单 实现多页面滑动切换 支持自定义下拉刷新和上拉加载 2.实现分析: 顶部menu菜单: 这个功能看实现效果,来决定难易程度,这里po主已经写过类似的组件,所以这块直接完事. 多页面滑动切换: 在微信小程序中这个效果还是比较容易实现的,直接上一个swiper就完事了. 上拉加载: swpier里面套用一个scroll-view…

// 更新2018/11/20:现在小程序的页面栈长度为10 更正 2018/11/20: 经过一段时间的实践,我发现以前方法存在很多问题,比如 getCurrentPages 方法并不在官方的 API 列表中,route 属性是私有的,存在被废弃/替代的可能:又比如原来的代码掺杂了许多业务无关的逻辑,变得冗余,不易后期维护. 现在要实现原来的需求,我更推荐这样做: onLoad() { this.init() } init() { this.checkAuth() .then(this.fet…

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5…

一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都通过npm进行: npm install -g wepy-cli //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli wepy -v //查看wepy-cli版本 wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的…

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/#资源…

基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢. 说到设计规范,这里有一篇绝对不能错过的:<内部教程!超实用6步透视网易设计规范(附完整PDF下载)> 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示…

一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 选择无appid,即可在没有appid情况下进行开发,但是无法预览: 二 基本架构和配置文件 1.小程序架构 小程序主要由两个部分构成,主体部分 (app)和各个页面(page). 类似于许多框架,主体部分主要用于核心…

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单…

这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然写完了,我竟然没有半途放弃,可真把我自己感动坏了. 好吧,主要是这个小程序很简单,本文会讲解一下这个小程序的代码,所有代码几乎是我一个个敲出来的,所有逻辑也是自己构思梳理的,因此很多实现方式并不是很好,冗余代码很多,代码质量堪忧,但我也在学习中,随着技术提升,会不断来重构代码,如果大家有任何建议欢迎…

历经一年的等待后,小程序在2017年1月9日凌晨终于揭开神秘面纱,正式上线. 微信小程序推广海报 随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序. 值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换. 微信小程序展示的位置 用…

随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序. 值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换. 微信小程序展示的位置 用户使用过的小程序,将以列表的方式呈现在小程序TAB中. 小程序列表 如此前微信团队介绍的一样,小程…

微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo:文章列表demo 微商城(含微信小程序)完整源码+配置指南 微信小程序Demo:一个简单的工作系统 微信小程序Demo:用于聚会的小程序 微信小程序Demo:Growth 是一款专注于Web开发者成长的应用,… 微信小程序Demo: Music-Player 微信小程序Demo:团贷网(投资) 微信…

作者:初雪链接: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:简易教…

微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo:文章列表demo 微商城(含微信小程序)完整源码+配置指南 微信小程序Demo:一个简单的工作系统 微信小程序Demo:用于聚会的小程序 微信小程序Demo:Growth 是一款专注于Web开发者成长的应用,… 微信小程序Demo: Music-Player 微信小程序Demo:团贷网(投资) 微信…

微信小程序,简称CX,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题. 应用将无处不在,随时可用,但又无需安装卸载. 微信小程序于2017年1月9日凌晨正式上线.张小龙随后在朋友圈发出一条写着“2017.1.9”的状态,同时配有 iPhone 一代的新品发布图.张小龙以这样的形式,向乔布斯致敬. 微信将“小程序”定义为“一种新的应用形态”.微信方面强调,小程序.订阅号.服务号.企…

小程序生命周期分为应用生命周期和页面生命周期 1.Onload:页面加载时触发,一般在onLoad中发送异步请求来初始化页面数据. 2.onShow:页面显示时触发 3.onReady:页面初次渲染完成时触发. 4.onHide:是页面隐藏时触发,注意不是应用隐藏,切后台时,页面就会隐藏.即整个小程序隐藏时,页面也就隐藏了.另外,在当前页面跳转的时候也相当于当前页面隐藏. 5.onUpload:页面卸载(关闭)时触发,当open-type为redirect,reLaunch,navigateBa…

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh…