Sunday——微信小程序从入门到实战
文章平均质量分 70
一个web前端从业者,带你一起学习微信小程序,从0开始。
SundayAaron
web前端从事者。
展开
-
微信小程序开发阅读&电影小程序之(3)——新闻列表页面构建-数据绑定-for循环
1、效果图预览2、准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局。小程序里建议使用flex布局,因为小程序对flex的支持是很好的。上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分3、wxml部分新闻列表部分整体使用flex纵向布局比较合适, 先把页面内的元素标签和类名写好。 <view class="post-conta原创 2017-02-06 16:23:00 · 15515 阅读 · 1 评论 -
微信小程序开发阅读&电影小程序之(2)——阅读页面轮播图实现
前言: 今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。 属性名 类型 默认值 说明 indicator-color Color rgba(0,0,0,.3) 指示点颜色 (这个属性目前暂未启用) indicator-active-color Color #000000 当前选中的指示点颜色 (这个属性目前暂未原创 2017-01-18 10:42:08 · 2774 阅读 · 2 评论 -
微信小程序开发阅读&电影小程序之(1)——欢迎页面的创建
先看下最后的效果图: 首先打开开发工具,创建quick start项目,简单的修改一下。 把Index文件夹重命名为welcome; 底部的hello world改为一个类似于按钮的样式;添加背景颜色; 修改顶部样式;按钮的实现:welcome.wxml <view class="usermotto"> <text class="btn">开启小程序之旅</text> </vie原创 2017-01-03 11:52:40 · 6647 阅读 · 5 评论 -
微信小程序开发阅读&电影小程序之(0)——基础目录创建
我将带大家从0开始搭建一个小程序,我也是在一边学习一边写博客。也希望能和大家交流交流经验。之前是从事web前端的,上手小程序计较容易。0、效果图展示: 1、目录结构讲解:微信小程序有四种文件类型:*.wxml *.wxss*.js*.json wxml:类似网页里的html页面; wxss:类似于网页里的css样式; js:js文件,用来定义函数方法等; json原创 2016-12-23 10:43:06 · 4850 阅读 · 3 评论 -
微信小程序开发之——flex布局
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码。flex-direction flex-direction属性表示布局的方向 有两个值: row | column 默认属性是row 行布局html代码如下:<view class="section"> <view class="section__title">flex-direction: row</view>原创 2016-12-06 15:36:29 · 13613 阅读 · 3 评论 -
微信小程序开发之——wx.showToast(OBJECT)的使用
wx.showToast API是显示消息提示框的作用。 先让我们看一下官方的文档说明: 注意:其中的图标,只支持”success”、”loading”示例代码:wx.showToast({ title: '成功', icon: 'success', duration: 2000})接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分原创 2016-11-29 14:39:19 · 51755 阅读 · 9 评论 -
微信小程序开发之——weui-wxss的使用
概述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。预览:用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目) Github下载地址: https原创 2016-12-13 11:33:55 · 20948 阅读 · 5 评论