微信小程序之和风

凑了一把微信小程序的热闹!12月,小程序正式发布,很火,但随之而来的是各种冷水,唱衰之调随处可见。但作为一个小前端,岂能有新技术却弃之不顾之理,更何况是微信出品的?抱着学习和研究的态度,才有了今天的这个我称之为DEMO的和风小程序,以及小小的总结。

源代码在这里:https://github.com/CaptainLiao/wechatProgram

实现功能

天气预报

这是最先尝试的,用和风天气的API,好处是免费,但不是很稳定的说。具体实现:

  • 列表渲染

  • 切换隐藏/显示

  • iconfont的应用

干货新闻

做完天气预报,觉得太单薄了,不能称之为应用,何况心里还有点痒痒,于是借用了干货API,实现了简单的新闻客户端(捂脸)。具体功能:

  • 图片的切换

  • 新闻列表,简单的数据处理

  • 下拉加载

  • 上拉刷新

  • 新闻详情的跳转(新闻详情返回的是含有标签的字符串,小程序不能解析......留待后期解决)

上图先:

具体代码这里就不贴出来了......

大家可以直接下载源码查看,也很简单。

更重要的是,我想说说微信的组件,被这个坑了......

微信组件补充

微信官网关于组件的介绍实在不多,已经写好的在这里不在赘述,官网很清楚了说几个上面没有而我们开发中常用的。

toast消息提示框

toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的。

主要属性:

wxml

<!--点击button触发toast-->
<button type="primary" bindtap="listenerButton">点击显示toast</button>
<!--toast消息框显示3秒,并绑定事件-->
<toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>

js

Page({
data:{
// text:"这是一个页面"
hiddenToast: true
},

/**
* 监听button点击事件
*/
listenerButton: function() {
this.setData({
hiddenToast: !this.data.hiddenToast
})
},
/**
* toast显示时间到时处理业务
*/
toastHidden:function(){
this.setData({
hiddenToast: true
})
},

onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

model组件

modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等。

常用属性:

wxml

<!--监听button点击事件-->
<button bindtap="listenerButton" type="primary">弹出modal</button>

<!--弹出框-->
<modal
title="退出应用"
hidden="{{hiddenModal}}"
confirm-text="再看看"
cancel-text="退出"
bindconfirm="listenerConfirm"
bindcancel="listenerCancel" >
您是否真的要退出应用
</modal>

js

Page({
data:{
// text:"这是一个页面"
hiddenModal: true
},

listenerButton:function() {
this.setData({
hiddenModal: !this.data.hiddenModal
})
},

listenerConfirm:function() {
this.setData({
hiddenModal: true
})
},

listenerCancel:function() {
this.setData({
hiddenModal: true
})
},

onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

loading 组件

loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否

主要属性:

wxml

<!---->
<button type="primary" bindtap="listenerButton">显示loading</button>
<!--默认隐藏-->
<loading hidden="{{hiddenLoading}}">正在加载</loading>12341234

js

Page({
data:{
// text:"这是一个页面"
hiddenLoading: true
},

/**
* 监听button点击事件
*/
listenerButton:function(){
this.setData({
hiddenLoading: !this.data.hiddenLoading
})
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

【微信小程序】——实战开发之和风(含demo)的更多相关文章

  1. Web前端_微信小程序实战开发

    微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1  2 点击立即注册:进入下方页面 3  4 点击小程序进入表单填写页 ...

  2. 微信小程序实战--开发一个简单的快递单号查询

    功能如图: 虽然工作中只负责小程序后台开发,但是还是小程序开发产生了浓厚的兴趣,官方文档也是超级详细了 这里就简单做一个快递单号的查询: 新建一个page: 接着就可以写wxml了.这里用一个简单的i ...

  3. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  4. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  5. 《微信小程序商城开发实战》唐磊,全网真实评价截图,不吹不黑,全部来自网友的真实评价

    偶尔看了下网友的销量和评价,感觉还不错,因为市面上大多关于小程序的书籍可能写的不够全面,要么只是点到为止的大致罗列,要么就是只简单介绍一下小程序的 界面设计这块.这样很难给学习小程序开发的人一个完成的 ...

  6. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  7. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  8. 微信小程序-云开发实战教程

    微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...

  9. 微信小程序-云开发-实战项目

    微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...

  10. WordPress 网站开发“微信小程序“实战(三)

    本文是"WordPress 开发微信小程序"系列的第三篇,本文记录的是开发"DeveWork+"小程序1.2 版本的过程.建议先看完第一篇.第二篇再来阅读本文. ...

随机推荐

  1. 动量Momentum梯度下降算法

    梯度下降是机器学习中用来使模型逼近真实分布的最小偏差的优化方法. 在普通的随机梯度下降和批梯度下降当中,参数的更新是按照如下公式进行的: W = W - αdW b = b - αdb 其中α是学习率 ...

  2. 【BZOJ2716】天使玩偶【kd树】

    这个题要求kd树支持两个操作. 1.插入一个新的点. 2.查询某个点最近曼哈顿距离. 注意查询曼哈顿距离和查询欧几里得距离,是有区别的.(估价函数不同). #include <cstdio> ...

  3. 74. Search a 2D Matrix (Graph; Divide-and-Conquer)

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  4. JavaScript Math.floor() 方法

    定义和用法: floor() 方法可对一个数进行下舍入. 语法: Math.floor(x); x:必须参数,可以是任意数值或表达式: 返回值: 小于等于 x,且与 x 最接近的整数. 说明: flo ...

  5. Debian Mount nfs 出错的解决

    系统未安装 nfs 客户端 #aptitude install nfs-common 解决!

  6. Effective Java 中文版

    始读于2014年8月2日10:15,整理完成于2014年8月20日23:14:42 一图一世界,<Effective Java >是Java领域大牛Joshua Bloch的获奖之作,去年 ...

  7. 主线程不能直接调用webservice方法

    @Overrideprotected void onCreate(Bundle savedInstanceState){//StrictMode.setThreadPolicy(new StrictM ...

  8. o7 文件和函数

    一:文件 1 控制文件内指针的移动 文件内指针移动,只有在t模式下的read(n),n代表的字符的个数 除此之外文件内指针的移动都是以字节为单位的 with open('a.txt',mode ='r ...

  9. CentOS7通过 yum安装路径查询方法

    CentOS7通过 yum安装路径查询方法 rpm -qa 然后执行 rpm -ql 软件名称 就可以显示软件的安装路径. 原文博客的链接地址:https://cnblogs.com/qzf/

  10. Mysal表类型的区别-MyISAM,InnoDB

    1/ISAM ISAM是一个定义明确且历经时间考验的数据表格管理方法,它在设计之时就考虑到数据库被查询的次数要远大于更新的次数.因此,ISAM执行读取操作的速度很快,而且不占用大量的内存和存储资源.I ...