小程序案例.docx
《小程序案例.docx》由会员分享，可在线阅读，更多相关《小程序案例.docx（18页珍藏版）》请在冰豆网上搜索。
小程序案例
（1）[小程序案例][微信小程序]微信小程序知识总结及案例集锦
目录
主要从以下几个方面给大家总结一下微信小程序相关的知识!
1前言
什么是小程序
微信小程序在微信开发中的位置
微信小程序框架–MINA
现代化前端技巧
MINA是不是HTML5
小程序与传统APP区别
小程序为开发者提供了什么
微信小程序源码结构
10.MINA组件
1微信小程序案例
1公众号
前言
今天把之前收集的微信小程序案例,给大家共享出来,一起学习!
学习的别人东西是自己技能增长最快的一种方式.
就像之前我们在写程序时,主管或项目经理,经常提醒我们一样,程序写的太乱,不简洁,要多看别人写的好的的程序源码,看多了,模仿多了,自己写代码结构和性能就提高很多了.
回归正题,今天着重给大家15个微信小程序案例,需要的可以下载看看!
首先在介绍源码之前,还是给大家讲讲微信小程序相关的知识.
什么是小程序
小程序是微信推出的一种新的公众号的形态
不需要下载安装即可在微信中使用的应用
小程序、订阅号、服务号、企业号是并行的体系
微信小程序在微信开发中的位置
微信小程序框架–MINA
小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。
它不是三者中的任意一个，而是拼凑出一个新的框架。
尽可能简单、高效的方式让开发者可以在微信中开发
具有原生APP体验的服务
现代化前端技巧
VirtualDOM开发者写iOS和原生的h5应用的时候，很多时候是手动地去操作UI，用户按按钮之后改变页面。
当应用很复杂的时候在改变的过程可能就会产生错误，VirtualDOM每次要去改变一个界面的时候，重新把界面做一次再进行修改，避免出错。
MVVM分离逻辑和数据。
组件化功能、风格模块化，每个风格封装在组件里就不会泄露。
MINA是不是HTML5
微信小程序一出来，大家都在猜测是基于什么技术，是H5还是原生。
它的框架看起来既像H5，又像原生。
小程序写的是H5代码，但是它又不遵从H5的标准写法。
它很多方面借用了Web技术，但很多细节又不一样。
非标准标签（组件）
我们知道写浏览器用的都是标准的主键，但是在MINA里面，小程序自成一个体系，虽然后台还是一样用浏览器的主键去实现的，但是在前面写HTML的时候加上它自己的一套标准。
非标准CSS
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。
如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.
非标准事件系统
当按下一个按钮的时候分配一个事件，这个事件也是非标准的，但是跟非标准很像。
包括冒泡阶段和捕捉阶段。
非标准JSAPI
支持微信的接口，但是没有任何标准JS接口。
不能操作document或者DOM
虽然是在浏览器里面运行，但是不能操作浏览器本身，不能操作原生文件本身，只能用VirtualDOM去改变页面。
有些组件有奇怪的默认高宽（scroller,image）
通常在Web浏览器里面，主键是按图片内容的高度，基本上所有组件默认高宽都是0，小程序的image是按照background-image来实现的，所以所有图像会得到一个初始宽高320240，而且无法通过auto重置，只可以通过具体的值来重写。
Require
因为小程序自成一个体系，JS的包、CSS框架都不能用，全部都要重新开始。
1M打包上线
能够更快地下载。
小程序与传统APP区别
微信小程序和传统的APP存在较大的差异，所以在设计小程序时不能以传统APP的思维来实现，要采用与之相匹配的小程序思维进行设计。
那么，可以从以下6个关键词中思考
1）轻量
让用户便捷、迅速、简单地获取服务，不要挑战微信的产品观。
2）社交
必须和微信生态融入，那就必须考虑到微信的生态基因。
抛开社交关系链做的话，最大的可能性是过于平庸导致反响平平。
价值小程序本身不是为了哗众取众，必须对用户有切实的价值，能够让用户在有需要时主动进入，主动唤醒。
3）引流
对于第三方来说，微信必须是重要的流量入口。
在微信允许的范围内，用可能的手段获取用户流量，是我们需要着重考虑的。
4）数据
即便没有引流成功，至少要获取用户数据，支持自有APP开展业务。
5）生态
如果已经有了微信公众号、服务号，在微信生态内考虑和小程序相互依托，互为补充。
小程序为开发者提供了什么
小程序提供了一个框架，微信称之为mina，这个框架主要分两个层面，视图层和逻辑层。
框架的核心是一个响应的数据绑定系统。
WXML中的动态数据均来自对应Page的data，这个数据绑定是单向的，只有数据发生变化，视图才会做出相应的调整。
这种模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。
为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件，媒体组件，导航等），组件自带一些功能与微信风格的样式，类似html标签。
微信还提供了很多原生的微信api,用来调用微信内部提供的功能，以及一个微信小程序开发者工具。
微信小程序源码结构
视图层（将逻辑层的数据展现在视图上）
逻辑层（通过改变数据[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
1微信小程序案例
案例01–电影推荐
案例下载地址
案例02–天气查询
案例下载地址
案例03–知乎日报
案例下载地址
案例04–APP
案例下载地址
案例05–名片APP
案例下载地址
案例06–聊天室
案例下载地址
案例07–百思不得姐APP
案例下载地址
案例08–天气预报查询
案例下载地址
案例08–APP
案例下载地址
10.案例10–zhixingAPP
案例下载地址
1案例11–阅读APP
案例下载地址
1公众号:
更多源码下载关注公众号:
（2）[小程序案例]从“三农”角度，看微信小程序的红利和创业机会有哪些？
小程序
小程序是一种不需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。
应用将无处不在，随时可用但又无需安装卸载。
张小龙如是说。
其中有四个关键词用完即走、触手可及、无处不在、无需安装。
“用完即走”是“体验”，“触手可及”是“生态”，“无处不在”是“体量”，“无需安装”是共赢。
体验
除了开头那段，张小龙还说过一句话，应用会静静的呆在那里，你需要的时候就去用。
这意味着小程序处于被动的地位。
为什么要将应用号置于如此之境地呢？
可以从两方来看
1、用户很多服务和功能用户需要的频次很低，还会在手机上有推送，其实没必要。
2、企业开发一个APP的成本很高，很多小的商户或者企业承担不起，也没必要。
从用户角度来说，微信小程序改善了体验；对小企业来说，亦能节约成本。
表面上，小程序类似于“淘宝”，像是个店家/企业的集合地，但实际上，在如今信息过于冗杂的互联网科技时代，XX一下即可找到想要的信息，方便之极。
微信小程序也如此，点击一下即可找到对应的APP。
因此，微信小程序不仅为用户解决了APP的安装卸载问题，它更是信息筛选的通道。
在APP过于冗杂的时期，用户迫切需要一个APP的搜索入口。
微信&农民
随着微信在农民群体中的日渐普及，农民的生活方式也在发生变化，工作和生活边界不断拓宽。
据腾讯介绍，微信“小程序”小程序可以借助微信联合登录；这意味着，能够无缝链接到微信的8亿用户资源。
据腾讯研究院报告，微信在四、五线城市27-28%的渗透率推算，使用微信的农村网民已超过5400万。
另一方面，农民工把微信当作是一种通讯工具和连接器，通过微信连接和留守人员之间的感情，也让自己更快地融入城市生活。
（关注农业引擎公众号，获取报告全文）
微信成为农村新农人打造个人品牌的利器，也使得进城务工人员，更快更好地融入城市生活的工具之一。
目前，我国共有74亿农民工，其中40岁以下的新生代农民工占了58%。
与第一代农民工相比，新生代农民工受教育程度较高，对互联网等新生事物接受度较高，更渴望融入城市的主流社会。
通过调查，有96%的新生代农民工认为微信、QQ等社交网络对他们在城市的生活帮助很大。
通讯、学习、娱乐是新生代农民工在微信上使用最多的前三大功能。
小程序行业案例
来看看旅游行业的几个小程序
1艺龙艺龙的小程序已经开发完成，最初提供的服务为酒店预订，后期会逐步增加机票、火车票和景区门票的预订服务。
艺龙的小程序产品架构分为首页、订单、客服和个人中心。
2携程携程和艺龙两家公司的产品思路比较接近，携程在小程序上设置了酒店、机票、火车票和汽车票的预订服务。
不论是携程，还是艺龙的小程序，跟App的体验都非常类似。
3穷游穷游开发的小程序是一款问答产品，分为提问、广场和个人中心三个频道，相当于旅游版本的问答社区。
对于攻略社区来说，穷游的锦囊产品或许也是比较适合小程序的。
试想一下，旅行者在旅途之中，随时随地的查询某一目的地的攻略方案，就不用提前下载至手机了。
（案例来源环球旅讯）
（3）[小程序案例]别瞎找了，微信小程序开发视频教程与案例源码都在这！
2019
本专题将以实战案例以及视频教程为主线，为大家揭开微信小程序开发的神秘面纱！
耗费巨大洪荒之力，特将小程序开发从入门到实战案例资料进行整理！
一、新手入门
微信小程序认证指引
微信小程序接入指南
微信小程序开发指南
微信小程序平台运营规范
个人进行申请开发者权限教程
小程序接入流程，主体验证
手机预览小程序demo流程
微信小程序支付文档
开发之间互相分享小程序教程
微信小程序服务类目范围
二、视频教程
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布局
微信小程序学习用demo12306
微信小程序控件练习demotext、icon
微信小程序学习用demo音乐播放控制
微信小程序学习用demo推荐图片自适应
微信小程序demorequestURL的连通性测试
微信小程序demo新闻阅读器富文本解析
微信小程序完整demojspapa包含前后台
微信小程序学习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微信小闹钟对话实现
微信小程序demoXX翻译
微信小程序学习用实用demo简单的左滑操作
微信小程序学习用demoLOOK
微信小程序demo乐助
微信小程序练习demo数据绑定条件渲染练习
微信小程序学习用demo轮播图变换
微信小程序demo阳淘
微信小程序自定义组件带未读数目
微信小程序学习用demo推荐聊天室
微信小程序demo知乎日报
微信小程序demo装逼神器
微信小程序demo果库更新版
微信小程序demo计算器
微信小程序开发之录音机音频播放
微信小程序demo人脸识别
微信小程序democnode练习版
微信小程序demo知乎日报练习版
微信小程序学习用demo豆瓣电影
微信小程序学习用精品demo航空订票
微信小程序精品学习demo瀑布流布局
微信小程序demo今日头条
微信小程序学习用demo推荐蜂融网
学习用精品demo电影推荐
微信小程序demo名片盒子
剪刀石头布小游戏，来和小五猜拳吧
微信小程序学习用demo
微信小程序demo宝宝起名
微信小程序demo今日头条
小程序实现简单的倒计时
微信小程序demo奔跑果果
微信小程序demo聊天
微信小程序精品demo创客+
微信小程序学习demo视图控件
微信小程序练习demotab实现选中时文字
微信小程序democanvas时钟
微信小程序demo组件canvas股票分时图
微信小程序开发之下拉刷新上拉加载
微信小程序学习用demo推荐家具在线
微信小程序demo知亦行
微信小程序学习demo豆瓣电影
精品学习demo仿IOS计算器
微信小程序学习用demo小商店
微信小程序demoihobby
微信小程序学习用精品组件登录注册效果
微信小程序demo会议精灵
微信小程序demo精品天气预报
demo推荐aehyok；列表，图片排布
微信小程序demo拾旧
微信小程序demo组件练习！
微信小程序推荐demo全球购
微信小程序学习demo笑话大全
微信小程序学习demo小说flex布局
微信小程序学习用demoV2EX
微信小程序demo商城
微信小程序精品学习demo娱票
微信小程序学习用demo掘金收藏集
微信小程序推荐demo豆瓣电影修订版
微信小程序学习用demo天气预报
微信小程序demo学习框架
微信小程序学习用demo工具大全
微信小程序demo页面框架
微信小程序demo鲜时达
福利demo妹子图分类标签
微信小程序demo计算器真机可用
微信小程序demo天气查询及快递查询
微信小程序学习用demo知乎日报简易版
V2EX社区获取最新文章，最热文章，所有节点.
微信小程序后端demo仿微信基于node
微信小程序学习用demo时尚购ajax获取数据
微信小程序学习用demo头条
微信小程序demogithub调用githubAPI
微信小程序精品demo推荐电影
学习demo新词列表，调用数据
微信小程序学习用demo积分商城
微信小程序学习用demo基础练习
微信小程序学习用demo极客学院
微信小程序学习用demo基础demo
微信小程序demo推荐petty妈咪顶部导航
微信小程序学习用demotodo
微信小程序demo基础商城
微信小程序学习用demo推荐午饭
微信小程序学习用demotabbar设计
微信小程序学习用demo图书搜索，打开效果
微信小程序学习demo表单练习
微信小程序推荐demo商城
微信小程序demo场地派
微信小程序demoIP查询
微信小程序学习用demo推荐豆瓣电影
微信小程序自定义tabbar，包含可左右滚动。
微信小程序demo加法计算器
微信小程序学习用democnode
精品demo推荐事项助手；引入兼容库Bluebird
微信小程序学习用demoXBOX账号绑定
基于labrador构建微信小程序
精品demo推荐爱拼宝宝
微信小程序学习用demo我的淘宝
微信小程序学习用demo行者
微信小程序实现--列表的上拉刷新和上拉加载
升级会员 