【www.shanpow.com--工作总结】
(1) [小程序案例][微信小程序]微信小程序知识总结及案例集锦
目录
主要从以下几个方面给大家总结一下微信小程序相关的知识!
1 前言
2.什么是小程序?
3.微信小程序在微信开发中的位置?
4.微信小程序框架–MINA
5.现代化前端技巧
6.MINA 是不是 HTML 5
7.小程序与传统APP区别
8.小程序为开发者提供了什么?
9.微信小程序源码结构
10.MINA 组件
11.微信小程序案例
12.公众号
1.前言
今天把之前收集的微信小程序案例,给大家共享出来,一起学习!学习的别人东西是自己技能增长最快的一种方式.
就像之前我们在写程序时,主管或项目经理,经常提醒我们一样,程序写的太乱,不简洁,要多看别人写的好的的程序源码,看多了,模仿多了,自己写代码结构和性能就提高很多了.
回归正题,今天着重给大家15个微信小程序案例,需要的可以下载看看!首先在介绍源码之前,还是给大家讲讲微信小程序相关的知识.
2.什么是小程序?
小程序是微信推出的一种新的公众号的形态
不需要下载安装即可在微信中使用的应用
小程序、订阅号、服务号、企业号是并行的体系
3.微信小程序在微信开发中的位置?
4.微信小程序框架–MINA
小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。它不是三者中的任意一个，而是拼凑出一个新的框架。
尽可能简单、高效的方式让开发者可以在微信中开发
具有原生 APP 体验的服务
5.现代化前端技巧
Virtual DOM：开发者写 iOS 和原生的 h5 应用的时候，很多时候是手动地去操作 UI，用户按按钮之后改变页面。当应用很复杂的时候在改变的过程可能就会产生错误，Virtual DOM每次要去改变一个界面的时候，重新把界面做一次再进行修改，避免出错。
MVVM：分离逻辑和数据。
组件化：功能、风格模块化，每个风格封装在组件里就不会泄露。
6.MINA 是不是 HTML 5
微信小程序一出来，大家都在猜测是基于什么技术，是 H5 还是原生。它的框架看起来既像 H5，又像原生。小程序写的是 H5 代码，但是它又不遵从 H5 的标准写法。它很多方面借用了 Web 技术，但很多细节又不一样。
1.非标准标签（组件）
我们知道写浏览器用的都是标准的主键，但是在 MINA 里面，小程序自成一个体系，虽然后台还是一样用浏览器的主键去实现的，但是在前面写 HTML 的时候加上它自己的一套标准。
2.非标准CSS：
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.
3.非标准事件系统：
当按下一个按钮的时候分配一个事件，这个事件也是非标准的，但是跟非标准很像。包括冒泡阶段和捕捉阶段。
4.非标准 JS API：
支持微信的接口，但是没有任何标准 JS接口。
5.不能操作 document 或者 DOM：
虽然是在浏览器里面运行，但是不能操作浏览器本身，不能操作原生文件本身，只能用Virtual DOM 去改变页面。
6.有些组件有奇怪的默认高宽(scroller,image)：
通常在 Web 浏览器里面，主键是按图片内容的高度，基本上所有组件默认高宽都是0，小程序的image是按照background-image来实现的，所以所有图像会得到一个初始宽高320 240，而且无法通过auto重置，只可以通过具体的值来重写。
7.Require：
因为小程序自成一个体系，JS 的包、CSS 框架都不能用，全部都要重新开始。
8.1M打包上线：
能够更快地下载。
7.小程序与传统APP区别
微信小程序和传统的APP存在较大的差异，所以在设计小程序时不能以传统APP的思维来实现，要采用与之相匹配的小程序思维进行设计。那么，可以从以下6个关键词中思考：
1)轻量：
让用户便捷、迅速、简单地获取服务，不要挑战微信的产品观。
2)社交：
必须和微信生态融入，那就必须考虑到微信的生态基因。抛开社交关系链做的话，最大的可能性是过于平庸导致反响平平。
价值：小程序本身不是为了哗众取众，必须对用户有切实的价值，能够让用户在有需要时主动进入，主动唤醒。
3)引流：
对于第三方来说，微信必须是重要的流量入口。在微信允许的范围内，用可能的手段获取用户流量，是我们需要着重考虑的。
4)数据：
即便没有引流成功，至少要获取用户数据，支持自有APP开展业务。
5)生态：
如果已经有了微信公众号、服务号，在微信生态内考虑和小程序相互依托，互为补充。
8.小程序为开发者提供了什么
小程序提供了一个框架，微信称之为mina，这个框架主要分两个层面，视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 data，这个数据绑定是单向的，只有数据发生变化，视图才会做出相应的调整。这种模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。
为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件，媒体组件，导航等），组件自带一些功能与微信风格的样式，类似html标签。微信还提供了很多原生的微信api,用来调用微信内部提供的功能，以及一个微信小程序开发者工具。
9.微信小程序源码结构
视图层（将逻辑层的数据展现在视图上）
逻辑层（通过改变数据[setData方法]来改变视图）
配置文件
在小程序中，微信规定了界面的组成模式，由四个文件组成。
.wxml文件（页面结构文件）标签语言，类似html，真正负责页面结构的文件，可以绑定数据。
.wxss文件（样式表文件）类似css，大部分css样式都相同
.js文件（脚本文件）用来运行我们的逻辑，使用js语言
.json文件（配置文件）主要配置公用的样式，比如tab栏，窗口样式等
10.MINA 组件
基本：view,text
表单：button,input,radio,slider
媒体：image,video,audio,canvas
模态：action-sheet,modal,toast,loading
容器：swiper,scroller
导航：navigator,tabbar
11.微信小程序案例
1. 案例01–电影推荐
案例下载地址
https://github.com/liuyugang123/movie
2. 案例02–天气查询
案例下载地址
https://github.com/liuyugang123/tianqi
3.案例03–知乎日报
案例下载地址
https://github.com/liuyugang123/zhihuAPP
4.案例04–APP
案例下载地址
http://download.csdn.net/my
5.案例05–名片APP
案例下载地址
https://github.com/liuyugang123/CardAPP
6.案例06–聊天室
案例下载地址
https://github.com/liuyugang123/chatAPP
7.案例07–百思不得姐APP
案例下载地址
https://github.com/liuyugang123/BaisiSister
8.案例08–天气预报查询
案例下载地址
https://github.com/liuyugang123/Weather
9.案例08–APP
案例下载地址
https://github.com/liuyugang123/V2EX
10.案例10–zhixingAPP
案例下载地址
https://github.com/liuyugang123/kwonWhere
11.案例11–阅读APP
案例下载地址
https://github.com/liuyugang123/MyRead
12.公众号:
更多源码下载关注公众号:
(2) [小程序案例]从“三农”角度，看微信小程序的红利和创业机会有哪些？
1.小程序
小程序是一种不需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
应用将无处不在，随时可用但又无需安装卸载。
张小龙如是说。
其中有四个关键词：用完即走、触手可及、无处不在、无需安装。
“用完即走”是“体验”，“触手可及”是“生态”，“无处不在”是“体量”，“无需安装”是共赢。
2.
体验
除了开头那段，张小龙还说过一句话，应用会静静的呆在那里，你需要的时候就去用。
这意味着小程序处于被动的地位。为什么要将应用号置于如此之境地呢？
可以从两方来看：
1、用户：很多服务和功能用户需要的频次很低，还会在手机上有推送，其实没必要。
2、企业：开发一个APP的成本很高，很多小的商户或者企业承担不起，也没必要。
从用户角度来说，微信小程序改善了体验；对小企业来说，亦能节约成本。
表面上，小程序类似于“淘宝”，像是个店家/企业的集合地，但实际上，在如今信息过于冗杂的互联网科技时代，百度一下即可找到想要的信息，方便之极。
微信小程序也如此，点击一下即可找到对应的APP。
因此，微信小程序不仅为用户解决了APP的安装卸载问题，它更是信息筛选的通道。在APP过于冗杂的时期，用户迫切需要一个APP的搜索入口。
3.
微信&农民
随着微信在农民群体中的日渐普及，农民的生活方式也在发生变化，工作和生活边界不断拓宽。
据腾讯介绍，微信“小程序”小程序可以借助微信联合登录；这意味着，能够无缝链接到微信的8亿用户资源。
据腾讯研究院报告，微信在四、五线城市27-28%的渗透率推算，使用微信的农村网民已超过5400万。
另一方面，农民工把微信当作是一种通讯工具和连接器，通过微信连接和留守人员之间的感情，也让自己更快地融入城市生活。
（关注农业引擎公众号，获取报告全文）
微信成为农村新农人打造个人品牌的利器，也使得进城务工人员，更快更好地融入城市生活的工具之一。
目前，我国共有2.74亿农民工，其中40岁以下的新生代农民工占了58%。与第一代农民工相比，新生代农民工受教育程度较高，对互联网等新生事物接受度较高，更渴望融入城市的主流社会。
通过调查，有96%的新生代农民工认为微信、QQ等社交网络对他们在城市的生活帮助很大。通讯、学习、娱乐是新生代农民工在微信上使用最多的前三大功能。
4.
小程序行业案例
来看看旅游行业的几个小程序：
1艺龙艺龙的小程序已经开发完成，最初提供的服务为酒店预订，后期会逐步增加机票、火车票和景区门票的预订服务。
艺龙的小程序产品架构分为首页、订单、客服和个人中心。2携程携程和艺龙两家公司的产品思路比较接近，携程在小程序上设置了酒店、机票、火车票和汽车票的预订服务。
不论是携程，还是艺龙的小程序，跟App的体验都非常类似。3穷游穷游开发的小程序是一款问答产品，分为提问、广场和个人中心三个频道，相当于旅游版本的问答社区。
对于攻略社区来说，穷游的锦囊产品或许也是比较适合小程序的。
试想一下，旅行者在旅途之中，随时随地的查询某一目的地的攻略方案，就不用提前下载至手机了。（案例来源：环球旅讯）
(3) [小程序案例]别瞎找了，微信小程序开发视频教程与案例源码都在这！
2017.1.9
本专题将以实战案例以及视频教程为主线，为大家揭开微信小程序开发的神秘面纱！小编耗费巨大洪荒之力，特将小程序开发从入门到实战案例资料进行整理！
一、新手入门
微信小程序认证指引 http://t.cn/RI1RMEO
微信小程序接入指南 http://t.cn/RI1RKRi
微信小程序开发指南 http://t.cn/RI1RYEe
微信小程序平台运营规范 http://t.cn/RI1R8tO
个人进行申请开发者权限教程 http://t.cn/RI1Evtd
小程序接入流程，主体验证 http://t.cn/RI1EyTO
手机预览小程序demo流程 http://t.cn/RI1E5Am
微信小程序支付文档 http://t.cn/RI1EIvV
开发之间互相分享小程序教程 http://t.cn/RI1EJgl
微信小程序服务类目范围 http://t.cn/RI1EQSv
二、视频教程
01、微信小程序视频教程合集 附带源码+PPT
02、WXopen开发免费视频课程系列共十部+源码
03、8天微信小程序视频
04、如何注册微信小程序，获取appid，增加开发者等
05、极客学院小程序视频教程
06、基础视频资源：某鹏网入门视频八部
07、微信小程pages页面启动顺序配置
08、微信小程序demo真机演示视频集锦
09、15节微信小程序视频
10、小程序实战开发6集视频
11、微信小程序开发视频教程
12、蓝鸥实战系列：贪吃蛇，豆瓣电影等15个实战视频
13、微信小程序五部入门+实战视频
14、小码哥Android学院从“零”带你制作“微信小程序”
15、微信小程序App实战开发视频教程
16、蓝欧手把手教你小程序
17、教0基础妹子做微信小程序
18、微信小程序开发视频199教程
19、掘金直播课程
20、微信小程序实战案例讲解
21、千锋HTML5开发培训基础视频教程
22、小木微信小程序开发视频教程
23、传播智客小程序实战
24、全网首个微信小程序开发视频教程
二、案例源码
微信小程序-省市县三级联动，带有自定义地区码
微信小程序demo：知乎日报
精品demo：商城：界面设计基本完善
微信小程序学习用demo：小程智能
优质demo推荐：二维码生成器
微信小程序demo：好动健身
微信小程序demo：豆瓣
微信小程序精品demo：大转盘，仿天猫超市抽奖
微信小程序demo：图书管理系统
微信小程序学习用精品demo：易购售卖机
微信小程序学习用demo推荐：审批流
微信小程序学习用demo：练习页面跳转
微信小程序学习用demo推荐：flex布局
微信小程序学习用demo：12306
微信小程序控件练习demo：text、icon
微信小程序学习用demo：音乐播放控制
微信小程序学习用demo推荐：图片自适应
微信小程序demo：requestURL的连通性测试
微信小程序demo：新闻阅读器：富文本解析
微信小程序完整demo：jspapa：包含前后台
微信小程序学习demo推荐：侧边栏滑动特效
微信小程序学习demo推荐：凑单神器
微信小程序学习用demo：豆瓣api，果壳api
微信小程序学习用demo推荐：股票；形势
微信小程序demo：拍照查字典
微信小程序学习用demo推荐：滴滴作业
使用第三方模块Underscore.js，Immutable.js
微信小程序学习demo推荐：仿微信漂流瓶
微信小程序demo：狼人杀：猎人之章
微信小程序demo：卡车之家论坛
微信小程序demo：货币汇率
微信小程序demo：国信映盛H5案例
微信小程序demo：仿微信朋友圈, 带前后台交互
微信小程序demo：斗图神器
微信小程序demo：触摸计数器
HotCity城市选择器 开源 - 城市数据库可自己导出
微信小程序demo：题库：选择选项
微信小程序demo：微赞论坛
微信小程序精品demo：仿分答
微信小程序练习demo：练习demo
微信小程序完整demo：新浪读书
微信小程序学习demo推荐：练手试坑
微信小程序学习用demo：手机银行
微信小程序学习用demo：蔬菜列表
微信小程序学习用demo：微信小程序示例教程
微信小程序学习用demo：装逼生成器
微信小程序学习用demo推荐：B站首页
微信小程序学习用demo推荐：设备列表
微信小程序学习用demo推荐：易打卡
微信小程序学习用demo：康爱多微商城
微信小程序demo：柏拉图测试
微信小程序学习用demo：豆瓣及新闻列表
微信小程序demo：简易聊天室
微信小程序demo：百思不得姐
微信小程序学习用demo：雪球
HotApp云笔记 - 精品开源demo
微信小程序demo：新颜征信
微信小程序开发之视频播放 弹幕
微信小程序学习用demo推荐：美容商城
微信小程序学习用demo：简易微信小程序
微信小程序游戏类demo：识色
微信小程序学习demo推荐：外卖
微信小程序精品demo：仿网易云音乐
微信小程序学习用demo：一元夺宝
微信小程序学习demo推荐：卡卡汽车
微信小程序demo：仿商城
微信小程序学习用demo：微信小闹钟：对话实现
微信小程序demo：百度翻译
微信小程序学习用实用demo：简单的左滑操作
微信小程序学习用demo：LOOK
微信小程序demo：乐助
微信小程序练习demo：数据绑定条件渲染练习
微信小程序学习用demo：轮播图变换
微信小程序demo：阳淘
微信小程序自定义组件：带未读数目
微信小程序学习用demo推荐：聊天室
微信小程序demo：知乎日报
微信小程序demo：装逼神器
微信小程序demo：果库更新版
微信小程序demo：计算器
微信小程序开发之录音机 音频播放
微信小程序demo：人脸识别
微信小程序demo：cnode练习版
微信小程序demo：知乎日报练习版
微信小程序学习用demo：豆瓣电影
微信小程序学习用精品demo：航空订票
微信小程序精品学习demo：瀑布流布局
微信小程序demo：今日头条
微信小程序学习用demo推荐：蜂融网
学习用精品demo：电影推荐
微信小程序demo：名片盒子
剪刀石头布小游戏，来和小五猜拳吧
微信小程序学习用demo
微信小程序demo：宝宝起名
微信小程序demo：今日头条
小程序实现简单的倒计时
微信小程序demo：奔跑果果
微信小程序demo：聊天
微信小程序精品demo：创客+
微信小程序学习demo：视图控件
微信小程序练习demo：tab实现选中时文字
微信小程序demo：canvas时钟
微信小程序demo组件：canvas股票分时图
微信小程序开发之下拉刷新 上拉加载
微信小程序学习用demo推荐：家具在线
微信小程序demo：知亦行
微信小程序学习demo：豆瓣电影
精品学习demo：仿IOS计算器
微信小程序学习用demo：小商店
微信小程序demo：ihobby
微信小程序学习用精品组件：登录注册效果
微信小程序demo：会议精灵
微信小程序demo：精品天气预报
demo推荐：aehyok；列表，图片排布
微信小程序demo：拾旧
微信小程序demo：组件练习！
微信小程序推荐demo：全球购
微信小程序学习demo：笑话大全
微信小程序学习demo：小说：flex布局
微信小程序学习用demo：V2EX
微信小程序demo：商城
微信小程序精品学习demo：娱票
微信小程序学习用demo：掘金收藏集
微信小程序推荐demo：豆瓣电影修订版
微信小程序学习用demo：天气预报
微信小程序demo：学习框架
微信小程序学习用demo：工具大全
微信小程序demo：页面框架
微信小程序demo：鲜时达
福利demo：妹子图：分类标签
微信小程序demo：计算器：真机可用
微信小程序demo：天气查询及快递查询
微信小程序学习用demo：知乎日报简易版
V2EX社区：获取最新文章，最热文章，所有节点.
微信小程序后端demo：仿微信：基于node
微信小程序学习用demo：时尚购：ajax获取数据
微信小程序学习用demo：头条
微信小程序demo：github：调用githubAPI
微信小程序精品demo推荐：电影
学习demo：新词：列表，调用数据
微信小程序学习用demo：积分商城
微信小程序学习用demo：基础练习
微信小程序学习用demo：极客学院
微信小程序学习用demo：基础demo
微信小程序demo推荐：petty妈咪：顶部导航
微信小程序学习用demo：todo
微信小程序demo：基础商城
微信小程序学习用demo推荐：午饭
微信小程序学习用demo：tabbar设计
微信小程序学习用demo：图书搜索，打开效果
微信小程序学习demo：表单练习
微信小程序推荐demo：商城
微信小程序demo：场地派
微信小程序demo：IP查询
微信小程序学习用demo推荐：豆瓣电影
微信小程序自定义tabbar，包含可左右滚动。
微信小程序demo：加法计算器
微信小程序学习用demo：cnode
精品demo推荐：事项助手；引入兼容库Bluebird
微信小程序学习用demo：XBOX账号绑定
基于labrador构建微信小程序
精品demo推荐：爱拼宝宝
微信小程序学习用demo：我的淘宝
微信小程序学习用demo：行者
微信小程序实现--列表的上拉刷新和上拉加载
