生如夏花 炫至茶靡

最近微信小程序蛮火的，我自己也开始了微信小程序的学习之路，在这里记下学习中遇到的问题，总结项目过程中的知识点，希望在帮助自己总结知识的同时也能帮助到有需要的小伙伴。下面来讲一下新手如何创建一个微信小程序。第一步：进入https://mp.weixin.qq.com/官网，选择，【小程序】>>【开发】选项进入查看小程序开发文档。开发选项下你可以看到官方提供的教程、框架、组件、ap

今天在做微信小程序的时候，做的商品购买流程。流程是这样的：商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面。但是在支付成功之后，点击按钮跳转，发现怎么也跳转不了到订单详情页面，前后log都能打印出来，证明已经执行了wx.navigateTo方法，但是跳转不成功，而且，坑爹的是也不报错。翻看微信小程序开发文档，参考链接：https://m

.module-news .news-title{ height: 60px; overflow: hidden; width: calc(100% - 100px); box-sizing: border-box; padding: 0 10px; display: -webkit-box; word-break: break-all; text-overflow

本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下：原理主要是通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。代码如下： 人气 销量

本篇文章主要讲解在微信小程序中，如何利用微信自带的api（wx.getLocation()）结合百度地图的逆地址解析api来获取当前所在城市名。实现起来也比较简单，步骤为：1--利用微信小程序接口 wx.getLocation() 获取当前经纬度。使用简单，具体可以参照微信小程序api。https://mp.weixin.qq.com/debug/wxadoc/dev/api/loca

本篇文章主要讲解在微信小程序中如何通过checkbox选中和未选中来改变checkbox的样式，效果如下：原理：通过serviceValChange来监听所有checkbox的变化，监听函数通过e.dtail.value得到一个被选中的数组，通过选中数组checkArr[]，来给原先的数据数组allGoodFilter[]的被选中对象的check属性置true，没有被选中的置f

项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步：下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为：搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。

现在要在微信小程序中实现点击控件修改样式，如下：微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。第一步：在wxss中定义被点击和未被点击的样式，如下：.service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002

项目中最常用的两种布局方式，水平布局和垂直布局，在微信小程序中实现起来也比较简单。1.横向水平布局：实现水平布局，需要四个view容器组件，其中一个是父容器。如下： box1 box2 box3给父容器以下样式：/**index.wxss**/.content{ display: flex; flex-direction: row;}其中disp

在微信开发者工具中添加项目并勾选创建默认小程序，系统给我们自动创建的小实例是第一个页面显示我们的头像、昵称还有hello world的文本，点击头像跳转到另外一个页面显示启动日志，效果如下：进入【编辑】选项，你会看到如下目录结构：在图中的目录可以看到几种文件格式：.wxml、.js、.json、.wxss、其中：.wxml—页面结构文件；.js—脚本文件，包含页面/

轮番效果在很多的网站主页或者手机应用端都能看到，在微信小程序中使用swiper组件来实现图片轮番，今天的小例子效果如下：为了方便演示我将动画切换的间隔调整为3s，现实项目中一般为5s，具体看项目需求而定。实现图片轮番使用swiper滑块视图容器组件，页面结构文件代码如下： <swiper indicator-dots="{{indicatorDots}}" a

项目中，一个表单中经常有好几个input，但是微信小程序并不像vue那样实现双向绑定，所以我们要自己去实现当用户输入的时候，实时获取用户输入的值。方法比较简单，就两个步骤。1.wxml &lt;input data-name='form.base.name' bindinput="inputChange" name="text" value="{{ form.base.name }}...