写在前面: 从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都预示着张小龙以及团队当初的布局是成功的,让用户在原生APP和网页之外又有一种新形式的选择,随着微信自家的推广以及得益于小程序本身的”短小精悍,用完即走“的特性,同时再加上各家公司的努力跟进,小程序的未来不可限量,博主从小程序发布到现在的每次微信公开课都在关注,着实感觉到小程序的功能的日益强大,再加上最近博主最

上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示   右左联动.gif 一.关键技术: (1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 获取到的值是 px,所以存在rpx 转 px 的问题.以 iPhone6 为基准,转换公式: // percent 为当前设备1rpx对应的px值 var percent = res.windowWidth / 750; 详情参考:WXSS尺寸单位

在开发的很多电商类型的项目中,免不了会遇到三级联动选择地址信息,如果单纯的使用文本框给用户选择,用户体检可能就会差很多.今天我给大家整理了关于小程序开发利用picker-view组件和animation来实现省市区的三级联动 效果如图:   首先我觉的大家需要先去阅读下小程序有关picker-view和animation相关的api,然后再跟着这篇文章来理一下思路,一定会有深刻的理解. 文档连接传送门:https://developers.weixin.qq.com/miniprogram/de

github项目地址   https://github.com/z1511676208/chooseAddr 序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml <!--index.wxml--> <view class="infoText">{{province}} {{city}} {{county}}</view> <view class=&

这就是我们要实现的效果 <view class="consignee"> <!-- consignee 收件人 --> <text>收件人: </text><input type='text' placeholder='请输入姓名'></input> </view> <!-- 手机号 --> <view class="consignee"> <text&

之前做过一个picker的三级联动功能,这里分享代码给大家 具体代码: // An highlighted block <template> <view> <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex&quo

微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 | Coding 开发文档 开发文档 微信公众平台 · 小程序文档 微信公众平台 | 小程序 小程序介绍 小程序设计 小程序开发 - 简易教程· 小程序 小程序运营 简易教程· 小程序(非官方) | 项目地址 微信小程序设计指南 微信小程序平台运营规范 WeUI 微信官方设计团队为微信Web开发量

微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian}}--{{yue}}--{{ri}}</view> <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindt

最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清楚),窗口下滑, 做这个我用的是picker-view这个组件,现在来看一看picker-view的属性: 现在开始写wxml的代码,对了,插一句,我这里是把它写成一个模板的,先看看目录结构 我们先来看看cascade.wxml里的代码: <template name="cascade&quo

这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布局) 说说原理,主要是使用两个scroll-view组件,然后监听两个scroll-view的滑动事件,然后根据滑动的scroll-view横向滑动的距离,通过scroll-left来设置另一个scroll-view滑动的距离 首先WXML代码: <scroll-view style='width:

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- <view class="title">属性值联动选择</view> --> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> <

微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelector https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 在网上也找了资料,代码都太繁琐,并且对于频繁变化的数据,非常不好维护: 代码在git上有:https://github.com/jonyellow/co

最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils文件夹存入arealist.js文件,内容为: const areaList=[ { name:'河南', id:, parentId: },{ name:'浙江', id:, parentId: },{ name:'郑州', id:, parentId: },{ name:'新乡', id:, p

微信小程序端的左右联动-滚动效果插件: 效果图如下:                                                                               使用说明: 1. components/ScrollBox是滚动联动的组件,pages/scroll是demo 里面也有相关的注释,demo中的数据是引入的静态文件(utils/data.js),一定要注意传入的数据格式!!!!参考 utils/data.js文件. 2. 我的图片来自京东

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

满网都是微信小程序,技术dog们不关注都不行了.先别忙着去学怎么开发小程序,先纠正一下你对微信小程序的三观吧~~~~ 小程序目前被炒得沸沸扬扬,无数媒体和企业借机获取阅读流量. 这再次证明一点,微信想让什么火,真的就能让什么火. 先列出8个多数人都搞错的问题: 小程序是HTML5: 小程序是B/S的: 把M站改改就可以接入到小程序里: 小程序体验不佳: 小程序适合低频长尾应用: 小程序是新的Appstore: 小程序做不起来,需求不高: 小程序会做起来,但会和原生应用长期并存. 以上8个是很多人

微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个双Tab框架PageA和PageB,子页面pageB, PageC. 让我们假设这样一个场景:首页PageA有一个飘数,当我们从PageA新开PageC后,做一些操作,再回退到PageA的时候,这个飘数要刷新.很显然,这需要在PageC中做操作时,能通知到PageA,以便PageA做相应的联动变化.

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

原文:https://isux.tencent.com/high-performance-wechat-app-development.html 前言 微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续工程师建立在可靠牢固的基础上. 笔者需要经常新建项目,每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程,实在是…费心费力. 另一个痛点是:每次新建小程序页面要生成三个文件名相同的文件 ( .wxml..wxss 和 .js ),命令行太

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