<template> <div> <a @click="isShow">half-screen-dialog</a> <!--BEGIN half-screen-dialog--> <!-- mpvue微信小程序不支持vue中的transition --> <div v-if="show"> <div class="weui-mask" @click=&qu

骨架屏 - “与其等待网络加载,不如提前给点暗示” 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示

新产品要做一个微信小程序,不想吐槽老板没给任何准备就给出了需求和原型图,好像默认小程序闭着眼睛就可以很顺利开发好.现在半周下来(五一结束开始到今天)完成了差不多所有的界面,网络请求部分还跟服务端兄弟耗着:) .总结下来小程序的开发速度肯定不会慢,门槛不高,缺点则在于限制非常多,并且其本质终究是换了毛皮的web开发,或多或少存在很多web app的通病,即使微信帮助提供了很多原生支持,这还是牺牲了很多开发自由度换来的.写本文的目的不在小程序开发的学习上,毕竟笔者一直都只听闻小程序大名,使用起来不过

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

wxml: <view class="page-section-spacing"> <view> <text>商家列表</text> </view> <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll"> <block wx:for=&quo

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove=”preventTouchMove” 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事件,另外还

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

总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是数据url是要控制跳转到哪个页面,可能是tab页面也可能是非tab页面,但是微信小程序中跳转到tab和非tab页面用的api不是同一个,但是在页面中渲染肯定是要用到循环的,难道要再多个参数来判断是跳转到tab页面还是非tab页面? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由 整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机

微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> <button type="primary" bindtap="getData">加载数据</button> </view> js getData () { wx.request({ url: ' url地址 &type=t

一.是什么 小程序启动会常常遇到如下图场景: 这是因为,小程序首次启动前,微信会在小程序启动前为小程序准备好通用的运行环境,如运行中的线程和一些基础库的初始化 然后才开始进入启动状态,展示一个固定的启动界面,界面内包含小程序的图标.名称和加载提示图标.此时,微信会在背后完成几项工作: 下载小程序代码包 加载小程序代码包 初始化小程序首页 下载到的小程序代码包不是小程序的源代码,而是编译.压缩.打包之后的代码包 整体流程如下图: 二.手段 围绕上图小程序的启动流程, 我们可以从加载.渲染两个纬度进

微信小程序终于开始公测了,这篇文章也终于可以发布了. 这篇文章可以说是微信小程序系列三部曲最后一篇.8 月份,小程序推出前,我写了<别开发 app 了>详细阐述了为什么创业应该放弃原生 app 开发,上个月,<为什么你觉得只开发微信号是不行的>从做生意的角度分析为什么应该把目光放在微信平台.今天,这篇文章可能是大家最期待和最失望的. 期待是因为这篇文章我将会分享我看到小程序生态里的机会,失望是,我无法手把手教你如何在这个新平台里挣钱,就像我无法告诉你如何快速赚取人生第一个一百万.

微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialog&

微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

微信小程序开发时,Console 提示:获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级 错误原因: 直接调用这个方法依旧可以获取用户信息, 但是如果你之前没有点击过那个授权的小弹出框,这个方法就直接报错了,需要你直接去引导用户去授权. 解决方法: 微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.使用该接口将不再出现授权弹窗,请使用 <button open-type="getUserInfo"></butt

概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demodashi.com/demo/13177.html 一.前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是

在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1.相关代码文件 我这里是使用了自定义组件的形式来渲染的 外部的引用的自定义组件的wxml文件 /* limitCommodity是一个数组,返回的是商品对象,包含商品价格.商品结束时间.商品图片等 */ <block wx:for="{{limitCommodity}}" wx:key

先上效果图

微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度

一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替.二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件   @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boot